Dùng bảng khi cần đối chiếu hàng và cột
Bảng phù hợp khi mỗi đối tượng có nhiều thông tin cùng loại cần đối chiếu. Ví dụ, mỗi vật dụng có tên và số lượng. Không dùng bảng để dàn toàn bộ bố cục trang.
| Phần tử | Vai trò |
|---|---|
| table |Bao bảng|
| caption |Tên bảng, đặt sau thẻ mở table trong mẫu|
| tr |Một hàng|
| th |Ô tiêu đề|
| td |Ô dữ liệu|
caption là một phần tử, không phải thuộc tính HTML và không tạo thêm một hàng tr.
Đếm hàng từ mã nguồn
```html
<table>
<caption>Vật dụng minh họa</caption>
<tr><th>Vật dụng</th><th>Số lượng</th></tr>
<tr><td>Sách</td><td>6</td></tr>
<tr><td>Bút</td><td>4</td></tr>
</table>
```
Bảng có ba hàng tr, mỗi hàng hai ô: một hàng tiêu đề và hai hàng dữ liệu. Sáu ô gồm hai th, bốn td. Việc tên bảng hiện ở phía trên không làm số hàng tr tăng thành bốn.
Đặt định dạng đúng phần tử cần có viền
```html
<table style="width:100%;border:1px solid blue">
<tr>
<td style="border:1px solid blue">Sách</td>
<td style="border:1px solid blue">6</td>
</tr>
</table>
```
`border:1px solid blue` đặt viền liền dày 1 pixel CSS, màu xanh blue. Đặt border riêng trên table tạo viền của bảng; muốn các ô có viền thì đặt cho từng th/td tương ứng. Không coi viền tự được truyền từ table xuống mọi ô.
`width:100%` yêu cầu chiều rộng theo vùng chứa. Cách trình bày còn phụ thuộc nội dung; vẫn cần xem trên màn hình nhỏ, không mặc định mọi bảng luôn vừa chỉ nhờ dùng phần trăm.
Bài luyện
Bảng Vật dụng minh họa có bao nhiêu hàng tr?
Hàng tiêu đề cũng là một tr.
Đúng. Đếm ba cặp thẻ tr trong mã.
caption không phải một hàng tr.
Ô th/td khác hàng tr.
Lời giải
Mã có một tr chứa hai th và hai tr chứa các td. Tổng cộng ba hàng; caption đặt tên bảng, không thêm một hàng dữ liệu vào phép đếm này.
Bài luyện
Muốn một ô td có viền xanh theo cách đang học, nhận xét nào đúng?
color của caption đặt màu chữ tên bảng, không đặt viền ô.
border là đặc tính trình bày, không phải tên ô.
Viền table không tự đặt viền từng ô.
Đúng. Khai báo tác động tới đúng phần tử ô.
Lời giải
Viền cần thuộc ô td, nên đặt border trong style của td ấy. Viền trên table thuộc bảng, còn color trên caption chỉ điều khiển màu chữ của tên bảng.
Bài luyện
Nhận xét nào đúng về caption trong ví dụ?
Đúng. Cần phân biệt tên bảng với hàng dữ liệu.
caption có cặp thẻ riêng, không đặt như thuộc tính trong thẻ đóng.
caption không tự tạo ô td.
colspan là thuộc tính ô để trải ngang nhiều cột.
Lời giải
caption là phần tử con đặt tên bảng. Trong mẫu nó đứng trước các tr, nhưng không phải tr hoặc td và không phải thuộc tính colspan.
Đang học