Thead, Tbody, Th Là Gì? Cấu Trúc Bảng HTML Để Máy Đọc Đúng

Thead, tbody và th là gì trong một bảng HTML?

Thead, tbody và th là các thẻ con của thẻ table. Thead bọc các hàng tiêu đề, tbody bọc các hàng dữ liệu, còn th là ô tiêu đề của một cột hoặc một hàng. Tài liệu HTML trên web.dev ghi mỗi phần gồm các hàng tr, trong hàng có ô tiêu đề th và ô dữ liệu td.

Nguồn: Learn HTML, chương Tables trên web.dev.

Thẻ th nói ô nào là tiêu đề. Thead và tbody nói hàng nào thuộc phần nào.

Thẻ th và thuộc tính scope nối ô với tiêu đề ra sao?

Thẻ th khai một ô là tiêu đề của cột hoặc của hàng, tùy giá trị của thuộc tính scope. Theo web.dev, khi không khai scope thì trình duyệt tự chọn col hoặc row. Nhờ thẻ th, mỗi ô dữ liệu được gắn với tiêu đề của nó ngay cả khi tiêu đề đã cuộn ra khỏi màn hình.

Hai giá trị scope hay dùng

• scope="col": ô là tiêu đề của cả cột bên dưới.
• scope="row": ô là tiêu đề của cả hàng bên phải, thường là ô đầu hàng.

Ví dụ trong tài liệu của web.dev: ô 1956 có hai tiêu đề, Year ở đầu cột và tên người ở đầu hàng. Nhờ vậy máy hiểu 1956 là năm của đúng người đó. Một ô in đậm bằng CSS trông giống tiêu đề nhưng không tạo ra liên kết này.

Tiêu đề cột viết bằng thẻ th, không viết bằng thẻ td rồi in đậm.

Thead và tbody có bắt buộc không và giúp được gì?

Thead và tbody không bắt buộc theo chuẩn HTML. Tài liệu trên web.dev ghi cả ba phần thead, tbody, tfoot đều tùy chọn, không làm khả năng tiếp cận của bảng tốt lên hay xấu đi, nhưng có ích cho việc sử dụng và tạo kiểu. Chuẩn P4.07 của SQA-200 thì yêu cầu bảng có đủ thead, tbody và th.

Ba việc thead và tbody làm được

• Tách tiêu đề khỏi dữ liệu: ai đọc mã nguồn cũng thấy ngay hàng nào là tiêu đề.
• Giữ tiêu đề đứng yên: web.dev nêu ví dụ tiêu đề dính ở trên trong khi phần thân cuộn.
• Tạo kiểu theo phần: CSS chọn riêng được hàng tiêu đề, hàng dữ liệu, hàng chân bảng.

Điều này có nghĩa SQA-200 đặt mức cao hơn mức tối thiểu của HTML. Một bảng chỉ có tr, th và td vẫn hợp lệ. Bảng có thêm thead và tbody thì rõ cấu trúc hơn cho người bảo trì và cho công cụ đọc bảng.

HTML cho phép bỏ thead và tbody. SQA-200 yêu cầu có.

Kiểm một bảng HTML đã đủ cấu trúc bằng cách nào?

Kiểm cấu trúc bảng HTML bằng cách mở mã nguồn của trang và đọc các thẻ bên trong thẻ table. Việc này làm trên HTML mà máy chủ trả về, vì bảng dựng bằng JavaScript có thể chưa có mặt ở đó. Mỗi bảng đi qua năm phép kiểm theo thứ tự.

Năm phép kiểm cho một bảng

1. Mở mã nguồn: bấm chuột phải vào bảng, chọn Inspect, hoặc xem View Source.
2. Tìm caption: thẻ <caption> là thẻ con đầu tiên của bảng và nói đúng nội dung bảng.
3. Tìm thead: hàng tiêu đề nằm trong <thead>, các ô trong đó là <th>.
4. Tìm tbody: các hàng dữ liệu nằm trong <tbody>.
5. Đọc tiêu đề cột: mỗi tiêu đề nói rõ cột chứa gì, có đơn vị khi là số.

Trong WordPress, khối Table có hai tùy chọn Header section và Footer section trong phần Settings, bật lên để thêm phần tiêu đề và phần chân cho bảng, theo tài liệu khối Table của WordPress.

Bảng đạt khi có caption, có thead chứa th, có tbody, và tiêu đề cột đọc là hiểu.

Thead, tbody, th nằm ở đâu trong bảng chuẩn SQA-200?

Cấu trúc thead, tbody, th là mục P4.07 trong bảng chuẩn SQA-200, thuộc trụ cột IV về tối ưu cho AI, trọng số 3 điểm. Chuẩn đạt của mục này: bảng HTML có <thead>, <tbody> và tiêu đề cột <th> rõ ràng. Mục P4.05 của cùng trụ cột kiểm việc số liệu có nằm trong bảng hay không.

Các mục đứng cạnh P4.07 trong trụ cột IV

• P4.05 Numerical Data Tables: so sánh, thông số và chỉ số trình bày trong thẻ <table> HTML.
• P4.06 Structured FAQ Accordion: có mục hỏi đáp riêng, trả lời ngắn gọn các băn khoăn thật của người mua.
• P4.08 Executive Summary Box: đầu bài có hộp tóm tắt nêu các ý chính.
• P4.09 Expert Quote Citation: có ý kiến chuyên gia ghi rõ tên, chức danh và link.

Toàn bộ 99 mục kiểm, chuẩn đạt và điểm từng mục nằm ở bài SQA-200 là gì, mục này ở dòng P4.07 Table Extraction QA.

P4.07 đạt khi mọi bảng trên website có thead, tbody và tiêu đề cột viết bằng thẻ th.

Người làm web hay hỏi gì về thead, tbody và th?

Người làm web hay hỏi ba câu về thead, tbody và th: bảng thiếu thead có hiển thị sai không, thẻ tfoot dùng khi nào, và bảng tạo bằng trình soạn thảo có đủ thẻ không. Câu trả lời dựa trên tài liệu HTML của web.dev và tài liệu của WordPress.

Bảng không có thead thì có hiển thị sai không?

Không. Trình duyệt vẫn hiển thị bảng bình thường. Theo web.dev, các hàng không nằm trong thead, tbody hay tfoot được ngầm bọc trong một tbody. Phần mất đi là ranh giới rõ giữa hàng tiêu đề và hàng dữ liệu trong mã nguồn. Bảng như vậy hợp lệ với HTML nhưng chưa đạt mục P4.07.

Thẻ tfoot dùng khi nào?

Thẻ tfoot dùng cho các hàng chân bảng, ví dụ hàng tổng cộng hoặc dòng ghi nguồn số liệu. Theo web.dev, tfoot là phần tùy chọn. Tài liệu này cũng ghi trước đây tfoot được quy định đặt ngay sau thead và trước tbody, nên mã nguồn cũ có thể còn thứ tự đó.

Bảng tạo bằng trình soạn thảo WordPress có thead không?

Có, khi bật tùy chọn Header section trong phần Settings của khối Table. Tài liệu của WordPress ghi tùy chọn này thêm một phần tiêu đề cho bảng, và Footer section thêm phần chân. Bảng tạo xong mà chưa bật thì hàng đầu là hàng dữ liệu thường. Mở mã nguồn để kiểm lại sau khi bật.

Bật phần tiêu đề của bảng trong trình soạn thảo, rồi kiểm lại bằng mã nguồn.