H5 : HTML TABLE

HTML Tables

HTML tables allow web developers to arrange data into rows and columns.

Define an HTML Table

The <table> tag defines an HTML table.

Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag.

By default, the text in <th> elements are bold and centered.

By default, the text in <td> elements are regular and left-aligned.

Example

<!DOCTYPE html>
<html>
<body>
<h2>Basic HTML Table</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>

HTML Table - Add a Border

To add a border to a table, use the CSS border property:

Example

table, th, td {
border: 1px solid black;
}

HTML Table - Collapsed Borders

To let the borders collapse into one border, add the CSS border-collapse property:

Example

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

HTML Table - Add Cell Padding

Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS padding property:

Example

th, td {
padding: 15px;
}

HTML Table - Left-align Headings

By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

Example

th {
text-align: left;
}

HTML Table - Add Border Spacing

Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

Example

table {
border-spacing: 5px;
}

Note: If the table has collapsed borders, border-spacing has no effect.

HTML Table - Cell that Span Many Columns

To make a cell span more than one column, use the colspan attribute:

<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>

HTML Table - Cell that Span Many Rows

To make a cell span more than one row, use the rowspan attribute:

<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>

HTML Table - Add a Caption

To add a caption to a table, use the <caption> tag:

<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>

ศึกษาเพิ่มเติมได้ที่ https://www.w3schools.com/html/html_tables.asp

ACTIVE 5 : HTML Table

ให้นักเรียนสร้างไฟล์ table.html แล้วสร้างตารางดังต่อไปนี้

1. สร้างตาราง 1 ตาราง 5 คอลัมน์ 6 แถว
2. กำหนดข้อความหัวคอลัมน์ดังนี้ ที่, รหัสนักเรียน, ชื่อ-นามสกุล, ชั้น,หมายเลขโทรศัพท์
3. กำหนดให้เส้นตารางยุบเป็นเส้นเดียว (เส้นบาง)
4. รวมเซลล์ คอลัมน์ 3 และ คอลัมน์ 4 แถวที่ 3
5. รวมเซลล์ แถวที่ 4 และ 5 คอลัมน์ที่ 2

เกณฑ์การให้คะแนน

1. ไม่ปฏิบัติกิจกรรมใดเลย 0 คะแนน
2. ปฏิบัติโดยให้ได้รับการช่วยเหลือจากครูผู้สอน 5 คะแนน
3. ปฏิบัติโดยได้รับการช่วยเหลือจากเพื่อน 8 คะแนน
4. ปฏิบัติด้วยตนเอง 10 คะแนน

Page updated

Report abuse