ตาราง HTML สามารถเพิ่มส่วนหัวตาราง (Header) ได้ทั้งใน แถว (Row) และ คอลัมน์ (Column) ได้ตามต้องการ
| EMIL | TOBIAS | LINUS |
|---|---|---|
| 8:00 | ||
| 9:00 | ||
| 10:00 | ||
| 11:00 | ||
| 12:00 | ||
| 13:00 |
| MON | TUE | WED | THU | FRI | |
|---|---|---|---|---|---|
| 8:00 | |||||
| 9:00 | |||||
| 10:00 | |||||
| 11:00 | |||||
| 12:00 |
| DECEMBER | ||
|---|---|---|
HTML Header นั้นจะใช้ Element <th>
โดยแต่ละ <th> จะเป็นข้อความที่แสดงอยู่ในส่วนหัวของตารางแต่ละช่อง
Table Headers แนวนอน
การใช้
<th> เพื่อกำหนด หัวตารางในแถวบนสุด
<table>
<tr>
<th>ชื่อ</th>
<th>นามสกุล</th>
<th>อายุ</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Table Headers แนวตั้ง
หากต้องการให้ คอลัมน์แรกของตารางเป็นส่วนหัว ให้ใส่
<th> ไว้ในแต่ละแถว
<table>
<tr>
<th>ชื่อ</th>
<td>Jill</td>
<td>Eve</td>
</tr>
<tr>
<th>นามสกุล</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>อายุ</th>
<td>50</td>
<td>94</td>
</tr>
</table>
การจัดวางตำแหน่งของ Table Headers
| ชื่อ | นามสกุล | อายุ |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
ค่าเริ่มต้นของข้อความใน <th> จะอยู่ กึ่งกลาง และเป็น ตัวหนา (bold)
แต่ถ้าต้องการให้ข้อความอยู่ทางซ้าย ให้ใช้ text-align: left;
th {
text-align: left;
}
Header ใช้หลายคอลัมน์
| ชื่อ | อายุ | |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
ในบางกรณี Header อาจต้อง รวมหลายคอลัมน์เข้าด้วยกัน
สามารถทำได้โดยใช้ Attribute colspan ใน <th>
<table>
<tr>
<th colspan="2">ชื่อ</th>
<th>อายุ</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Table Caption
คุณสามารถใส่ ชื่อของตาราง (Caption) ได้โดยใช้ <caption> โดยให้วาง <caption> ไว้ถัดจาก Tag <table>
<table style="width:100%">
<caption>ตารางออมเงินรายเดือน</caption>
<tr>
<th>เดือน</th>
<th>จำนวนเงิน</th>
</tr>
<tr>
<td>มกราคม</td>
<td>฿100</td>
</tr>
<tr>
<td>กุมภาพันธ์</td>
<td>฿50</td>
</tr>
</table>