แท็ก tfoot
แท็ก tfoot กำหนดส่วนท้ายของตาราง
ใช้สำหรับจัดกลุ่มแถว เพื่อให้สามารถ
นำสไตล์ CSS ไปใช้กับกลุ่มหนึ่งได้ทันที ในหนึ่งตาราง
สามารถมีแท็ก tfoot ได้เพียงแท็กเดียว
แท็ก tfoot มักใช้ร่วมกับ
thead
และ tbody
เพื่อกำหนดส่วนหัว ส่วนหลัก
และส่วนท้ายของตาราง HTML โดยค่าเริ่มต้น
เบราว์เซอร์จะวางเนื้อหาของ tfoot
ไว้ที่ส่วนท้ายของตาราง และ thead -
ไว้ที่ส่วนหัว
ตัวอย่าง
มาใส่สีข้อความเป็นสีแดงให้กับกลุ่มแถว
ที่ถูกรวมด้วยแท็ก
tfoot โดยใช้คุณสมบัติ
color:
<table>
<thead>
<tr>
<th>ชื่อ</th>
<th>นามสกุล</th>
<th>เงินเดือน</th>
</tr>
</thead>
<tbody>
<tr>
<td>ชื่อ1</td>
<td>นามสกุล1</td>
<td>200$</td>
</tr>
<tr>
<td>ชื่อ2</td>
<td>นามสกุล2</td>
<td>1000$</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>จำนวน: 2</td>
<td>-</td>
<td>รวม: 1200$</td>
</tr>
</tfoot>
</table>
tfoot {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
ตัวอย่าง
และที่นี่ มาดูกันว่า thead
ไม่ได้อยู่ด้านบน และ tfoot ไม่ได้อยู่ด้านล่าง
อย่างไรก็ตาม เบราว์เซอร์จะจัดวางพวกมันตาม
ตำแหน่งของตัวเอง:
<table>
<tfoot>
<tr>
<td>จำนวน: 2</td>
<td>-</td>
<td>รวม: 1200$</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>ชื่อ1</td>
<td>นามสกุล1</td>
<td>200$</td>
</tr>
<tr>
<td>ชื่อ2</td>
<td>นามสกุล2</td>
<td>1000$</td>
</tr>
</tbody>
<thead>
<tr>
<th>ชื่อ</th>
<th>นามสกุล</th>
<th>เงินเดือน</th>
</tr>
</thead>
</table>
tfoot {
color: red;
}
table, td, th {
border: 1px solid black;
}
: