Data Table Là Gì? Khi Nào Nên Trình Bày Số Liệu Bằng Bảng HTML

Data table là gì và khác bảng dùng để dàn trang ở đâu?

Data table là bảng chứa dữ liệu thật, trong đó mỗi ô có nghĩa nhờ tiêu đề hàng và tiêu đề cột của nó. Tài liệu HTML trên web.dev ghi bảng HTML hiển thị dữ liệu dạng bảng theo hàng và cột. Bảng dàn trang chỉ mượn lưới của bảng để xếp các khối cạnh nhau.

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

Phép thử nhanh: bỏ tiêu đề cột đi mà nội dung vẫn hiểu được thì đó không phải bảng dữ liệu.

Khi nào nên trình bày nội dung bằng bảng dữ liệu?

Nên dùng bảng dữ liệu khi nội dung có từ hai đối tượng trở lên được so theo cùng một bộ tiêu chí. Checklist AEO Ready của Danh Nolan ghi sáu trường hợp: so sánh, checklist, tiêu chí, giá, thông số và ma trận quyết định. Nội dung chỉ có một chiều thì danh sách gọn hơn bảng.

Cách viết danh sách bước nằm ở bài step-by-step là gì.

Có hai chiều thì dùng bảng. Có một chiều thì dùng danh sách.

Vì sao số liệu trong ảnh không thay được bảng HTML?

Số liệu trong ảnh không thay được bảng HTML vì cả tài liệu của Google lẫn chuẩn SQA-200 đều yêu cầu nội dung ở dạng chữ. Tài liệu về AI Overviews và AI Mode ghi nội dung quan trọng cần có ở dạng văn bản. Chuẩn P4.05 yêu cầu so sánh, thông số và chỉ số nằm trong thẻ table.

Ba chỗ số liệu hay bị kẹt ngoài HTML

• Ảnh chụp bảng tính: bảng dán vào bài dưới dạng ảnh PNG, JPG.
• Infographic: con số nằm trong hình vẽ, không lặp lại trong bài.
• Bảng do JavaScript dựng sau: bảng chỉ hiện sau khi script chạy xong ở trình duyệt.

Checklist AEO Ready của Danh Nolan ghi bảng phải xuất hiện trong HTML đã render từ máy chủ, kiểm bằng công cụ URL Inspection của Google Search Console. Ảnh có số liệu vẫn dùng được, miễn các con số đó có thêm một bảng HTML ngay bên cạnh. Nguồn: AI features and your website.

Con số nào quan trọng thì phải bôi đen và chép được ngay trên trang.

Một bảng số liệu dễ đọc cần có những phần nào?

Một bảng số liệu dễ đọc cần tên bảng, tiêu đề cột có đơn vị, mỗi ô một giá trị và dòng ghi nguồn. Thẻ caption cho bảng một cái tên gắn liền với nó, theo web.dev. Checklist AEO của Danh Nolan yêu cầu số liệu có tên nguồn, năm và đường link.

Năm việc làm cho một bảng số liệu

1. Đặt tên bảng: viết vào thẻ <caption>, nói bảng so cái gì.
2. Ghi đơn vị ở tiêu đề cột: ví dụ Thời gian tải (giây), để ô bên dưới chỉ còn con số.
3. Mỗi ô một giá trị: không gộp hai con số vào một ô.
4. Ghi nguồn và năm: đặt ở cuối bảng, có link tới tài liệu gốc.
5. Viết một câu đọc bảng: ngay trên hoặc dưới bảng, nêu điều người đọc cần thấy.

Phần thẻ tiêu đề cột, thân bảng và chân bảng viết thế nào nằm ở bài thead, tbody, th là gì.

Bảng đạt khi một ô bất kỳ, đọc cùng tiêu đề hàng và cột, thành một câu đủ nghĩa.

Data table nằm ở đâu trong bảng chuẩn SQA-200?

Bảng dữ liệu là mục P4.05 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: so sánh, thông số và chỉ số trình bày trong thẻ <table> HTML. Mục P4.07 của cùng trụ cột kiểm cấu trúc thẻ bên trong bảng.

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

• P4.03 Definition List Formatting: định nghĩa thuật ngữ ngành theo cú pháp “X là Y”.
• P4.04 Full Entity Naming: dùng tên riêng đầy đủ (“Google Search Console”), tránh đại từ mơ hồ.
• 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.07 Table Extraction QA: bảng HTML có <thead>, <tbody> và tiêu đề cột <th> rõ ràng.

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.05 Numerical Data Tables.

P4.05 đạt khi mọi so sánh, thông số và chỉ số trên website nằm trong bảng HTML, không nằm trong ảnh.

Người viết bài hay hỏi gì về bảng số liệu trong bài?

Người viết bài hay hỏi ba câu về bảng số liệu: bảng dựng bằng div có đạt không, infographic có số liệu thì xử lý ra sao, và bảng rộng hiển thị thế nào trên điện thoại. Câu trả lời dựa trên web.dev, tài liệu của Google và cách danhnolan.com đang làm.

Bảng dựng bằng div và CSS có đạt mục P4.05 không?

Không đạt. Chuẩn P4.05 ghi rõ thẻ table, và checklist AEO Ready của Danh Nolan kiểm mục này bằng cách tìm thẻ table trong mã nguồn. Lưới dựng bằng div trông giống bảng với người xem, nhưng không có tiêu đề cột gắn với từng ô. Dữ liệu dạng bảng thì dùng thẻ table.

Infographic có số liệu thì có cần thêm bảng không?

Cần, khi các con số đó là nội dung chính của bài. Giữ infographic cho người xem, rồi đặt một bảng HTML chứa đúng các con số đó ngay dưới hình. Google ghi nội dung quan trọng cần có ở dạng văn bản. Thuộc tính alt của ảnh chỉ đủ chỗ cho một câu mô tả, không đủ cho cả bảng số.

Bảng nhiều cột hiển thị thế nào trên điện thoại?

Trên danhnolan.com, bảng rộng hơn màn hình được đặt trong một khung cuộn ngang, người đọc vuốt sang để xem các cột còn lại. Toàn bộ nội dung bảng vẫn nằm trong HTML, không bị cắt hay ẩn theo cỡ màn hình. Bảng nào quá nhiều cột thì tách thành hai bảng, mỗi bảng một nhóm tiêu chí.

Dữ liệu hai chiều thì vào thẻ table, có tên, có đơn vị, có nguồn.