Bạn sẽ tạo bảng so sánh HTML, CSS và JavaScript với tên bảng, tiêu đề cột và tiêu đề hàng. Sau đó học cách gộp ô khi dữ liệu thực sự cần, thay vì dùng bảng để dàn bố cục website.

Lộ trình này học qua website “Góc học web”: trang chủ, trang bài viết và trang liên hệ. Mỗi bài giải quyết một việc cụ thể. Các bài về từng thẻ là tài liệu tra cứu, không phải danh sách bắt buộc học thuộc.

Khi nào dữ liệu phù hợp với bảng?

Nếu người đọc cần đối chiếu giá trị theo hàng và cột, bảng là lựa chọn tự nhiên. Ví dụ mỗi môn có mục tiêu và thời lượng. Nếu chỉ muốn đặt logo ở trái, menu ở phải và bài viết ở dưới, đó là bố cục trang, nên xử lý bằng CSS thay vì table.

Một bảng tốt có tiêu đề rõ và số cột vừa đủ. Đừng biến các đoạn văn dài không có quan hệ đối chiếu thành một bảng chỉ vì muốn có đường viền.

Các phần tử làm việc cùng nhau

table chứa toàn bảng. caption đặt tên hoặc giải thích ngắn cho bảng. tr là một hàng; th là ô tiêu đề, td là ô dữ liệu. thead, tbody và tfoot nhóm phần đầu, thân và kết thúc khi cần. tfoot không bắt buộc và không có nghĩa mọi bảng đều phải có một hàng tổng.

scope=”col” chỉ rõ tiêu đề cột; scope=”row” chỉ rõ tiêu đề hàng trong bảng đơn giản. Một chữ được in đậm trong td không tự mang ý nghĩa như th. Những quan hệ này giúp công cụ hỗ trợ nối dữ liệu với tiêu đề phù hợp.

Đọc ví dụ theo từng hàng

Trong ví dụ, hàng đầu có hai th cho Môn và Mục tiêu. Mỗi hàng thân dùng th cho tên môn và td cho mô tả. Khi thêm JavaScript, bạn thêm một tr với cùng cấu trúc hai cột, không chèn p trực tiếp vào tbody.

Khung xem trước có CSS tối thiểu để đường viền dễ quan sát; đường viền không phải một phần ý nghĩa của table. Bạn có thể bỏ CSS và bảng vẫn giữ các quan hệ hàng, cột.

colspan và rowspan dùng có kiểm soát

colspan=”2″ khiến một ô chiếm hai cột; rowspan=”2″ chiếm hai hàng. Sau khi gộp, phải kiểm tra tổng số vị trí ô trong từng hàng để không vô tình tạo bảng lệch. Bắt đầu bằng một bảng nhỏ và phác sơ đồ các ô trước khi viết.

Bảng tiêu đề phức tạp có thể cần cách nối headers và id thay cho một scope đơn giản. Người mới nên ưu tiên dữ liệu và bảng đơn giản trước, không học thuộc hàng loạt trường hợp gộp ô chưa có nhu cầu.

Thuộc tính cũ và màn hình nhỏ

Các thuộc tính trình bày cũ như cellpadding và cellspacing không phải cách nên dùng để viết HTML hiện đại. Khoảng đệm, khoảng cách đường viền và màu sắc chuyển sang CSS. Bạn có thể gặp chúng trong bài tra cứu cũ; hãy phân biệt cú pháp lịch sử với cách viết mới.

Bảng nhiều cột có thể cần một vùng cuộn ngang khi đưa lên màn hình nhỏ. Không thu nhỏ chữ tới mức không đọc được chỉ để nhét hết. Trong bài này, bảng chỉ có hai cột nên dễ xem hơn. Luôn giữ tên bảng và tiêu đề có nghĩa.

Ví dụ để tự chạy

Tạo một tệp HTML để thử đoạn mã sau. Nếu đây là đoạn trích trong body, hãy đặt nó vào bộ khung tài liệu đã học ở bài 3. Bộ mã tải về có sẵn ví dụ đầy đủ của bài này.

<table>
  <caption>Lộ trình học web</caption>
  <thead><tr><th scope="col">Môn</th><th scope="col">Mục tiêu</th></tr></thead>
  <tbody>
    <tr><th scope="row">HTML</th><td>Tổ chức nội dung</td></tr>
    <tr><th scope="row">CSS</th><td>Trình bày giao diện</td></tr>
    <tr><th scope="row">JavaScript</th><td>Bổ sung hành vi</td></tr>
  </tbody>
</table>

Kết quả hiển thị

Bảng có caption Lộ trình học web, hai cột và ba hàng môn học. CSS trong bản xem trước chỉ làm đường viền dễ nhìn, không thay đổi ý nghĩa dữ liệu.

Mở ví dụ bài 09 trong tab riêng · Tải bộ ví dụ 16 bài và website hoàn chỉnh

Lỗi thường gặp và cách sửa

• Dùng td cho mọi ô vì thấy th đậm: chọn ô tiêu đề theo vai trò.
• Dùng table làm khung chia cột website: chuyển bố cục sang CSS.
• Gộp ô rồi vẫn thêm đủ số td cũ: tính lại vị trí ô.

Tự kiểm tra

• Thêm cột Mức độ với tiêu đề cột đúng.
• Chỉ ra một dữ liệu trên website của bạn nên dùng bảng và một phần không nên.

Tra cứu khi cần

• Thẻ Table trong HTML (colspan, rowspan, cellpadding và cellspacing)
• Thẻ caption trong HTML
• Thẻ th trong HTML
• Thẻ tbody trong HTML

Tài liệu gốc về chủ đề này trên MDN / HTML Standard

Mục lục lộ trình HTML 16 bài · Thư viện bài HTML tra cứu