Tiêu đề bảng HTML
Bảng HTML có thể có tiêu đề cho từng cột, hàng hoặc cho nhiều cột/hàng.
| EMIL | TOBIAS | LINUS |
|---|---|---|
| 8:00 | ||
|---|---|---|
| 9:00 | ||
| 10:00 | ||
| 11:00 | ||
| 12:00 | ||
| 13:00 |
| THỨ HAI | THỨ 3 | THỨ TƯ | THU | THỨ SÁU | |
|---|---|---|---|---|---|
| 8:00 | |||||
| 9:00 | |||||
| 10:00 | |||||
| 11:00 | |||||
| 12:00 |
| THÁNG 12 | ||
|---|---|---|
Tiêu đề bảng HTML
Tiêu đề bảng được xác định bằng phần tử th . Mỗi phần tử th đại diện cho một ô của bảng.
Ví dụ
<table>
<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>
</table> Hãy tự mình thử »Tiêu đề bảng dọc
Để sử dụng cột đầu tiên làm tiêu đề bảng, hãy xác định ô đầu tiên trong mỗi hàng làm phần tử <th> :
Ví dụ
<table>
<tr>
<th>Firstname</th>
<td>Jill</td>
<td>Eve</td>
</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>Age</th>
<td>94</td>
<td>50</td>
</tr>
</table> Hãy tự mình thử » Căn chỉnh tiêu đề bảng
Theo mặc định, tiêu đề bảng được in đậm và căn giữa:
| Tên đầu tiên | Họ | Tuổi |
|---|---|---|
| Jill | thợ rèn | 50 |
| Đêm | Jackson | 94 |
Để căn trái các tiêu đề bảng, hãy sử dụng thuộc tính CSS text-align :
Tiêu đề cho nhiều cột
Bạn có thể có tiêu đề trải dài trên hai hoặc nhiều cột.
| Tên | Tuổi | |
|---|---|---|
| Jill | thợ rèn | 50 |
| Đêm | Jackson | 94 |
Để thực hiện việc này, hãy sử dụng thuộc tính colspan trên phần tử <th> :
Ví dụ
<table>
<tr>
<th colspan="2">Name</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>
</table> Hãy tự mình thử »Bạn sẽ tìm hiểu thêm về colspan và rowpan trong chương Table colspan & rowpan .
Bảng chú thích
Bạn có thể thêm chú thích làm tiêu đề cho toàn bộ bảng.
| Tháng | Tiết kiệm |
|---|---|
| Tháng Một | 100 USD |
| Tháng hai | $50 |
Để thêm chú thích vào bảng, hãy sử dụng thẻ <caption> :
Ví dụ
<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> Hãy tự mình thử » Lưu ý: Thẻ <caption> phải được chèn ngay sau thẻ <table> .
