Khi dữ liệu cần so sánh
Lịch sinh hoạt có ngày và hoạt động; một bảng giúp người đọc đối chiếu theo hàng, cột. Ta dùng bảng cho dữ liệu có quan hệ ấy, không dùng để dàn toàn bộ bố cục website.
Từ bảng đến mã
table bao bảng; tr tạo hàng; th là ô tiêu đề; td là ô dữ liệu. caption đặt tên bảng. colspan cho biết ô chiếm bao nhiêu cột, rowspan cho biết ô chiếm bao nhiêu hàng. Sau khi gộp, các vị trí đã bị chiếm không được tạo thêm ô trùng. Đường viền và màu nên đặt bằng CSS.
Một bảng hai cột
```html
<table>
<caption>Lịch sinh hoạt</caption>
<tr><th>Ngày</th><th>Hoạt động</th></tr>
<tr><td>Thứ bảy</td><td>Đọc sách</td></tr>
<tr><td>Chủ nhật</td><td>Thảo luận</td></tr>
</table>
```
Bảng có ba hàng, mỗi hàng hai ô. Hàng đầu dùng th để thể hiện tiêu đề. caption không tạo thêm một hàng dữ liệu tr.
Thử vận dụng
Muốn một ô trải ngang hai cột, dùng thuộc tính nào?
rowspan trải qua nhiều hàng theo chiều dọc.
Đúng: colspan chỉ số cột ô chiếm.
width không biểu thị số cột được gộp.
rows không phải thuộc tính gộp ô bảng.
Lời giải
colspan gộp theo chiều cột, khiến ô chiếm hai vị trí ngang.
Gộp ô theo chiều dọc
```html
<table>
<tr><th>Nhóm</th><th>Môn</th></tr>
<tr><td rowspan="2">A</td><td>Toán</td></tr>
<tr><td>Tin</td></tr>
</table>
```
Ô A chiếm cột đầu của hai hàng dữ liệu. Vì vậy hàng cuối chỉ viết một td cho môn Tin; cột đầu đã có phần kéo dài của ô A.
Ví dụ xem cách làm
Viết một hàng tiêu đề “Kết quả” trải ngang ba cột.
Lời giải
```html
<tr><th colspan="3">Kết quả</th></tr>
```
Hàng này có một ô HTML nhưng chiếm ba cột của lưới bảng.
Ví dụ xem cách làm
Ở ví dụ gộp dọc, nếu thêm td chứa A vào đầu hàng cuối thì có đúng ý định không?
Lời giải
Không. Vị trí cột đầu đã được ô rowspan chiếm; thêm ô làm thay đổi lưới và đẩy dữ liệu sang cột tiếp. Cần vẽ lưới vị trí để đọc bảng có ô gộp.
Những điều cần nhớ
Đếm cả phần tử ô và vị trí trong lưới. colspan trải ngang, rowspan trải dọc; ô đã gộp chiếm chỗ ở các hàng/cột liên quan.
Đang học