Công Cụ Tạo Bảng HTML

Điều gì làm nên một bảng HTML tốt

Bảng HTML tồn tại để trình bày dữ liệu thực sự dạng bảng, các hàng và cột nơi vị trí của một giá trị mang ý nghĩa, như một ma trận giá, một lịch trình, hay một bảng so sánh. Một bảng đúng đắn không chỉ là một lưới các ô; nó được dựng từ một họ nhỏ các phần tử mô tả vai trò: table bao bọc tất cả, thead và tbody tách phần tiêu đề khỏi phần thân, th đánh dấu một ô tiêu đề, còn td chứa một ô dữ liệu. Trình tạo này phát ra trọn cấu trúc đó cho bạn nên kết quả gọn gàng và tuân thủ chuẩn.

Làm đúng cấu trúc rất quan trọng vì trình duyệt, công cụ tìm kiếm và công nghệ trợ giúp đều dựa vào nó. Một lưới được làm giả bằng các thẻ div có thể trông như một bảng nhưng không truyền đạt được mối quan hệ nào, trong khi đánh dấu bảng đúng đắn cho mọi đối tượng đọc trang biết chính xác dữ liệu được tổ chức ra sao.

Hai cách đưa dữ liệu của bạn vào

Bạn có thể dựng một bảng theo kiểu tương tác trong Trình Soạn Thảo Lưới, thêm và xóa hàng cùng cột rồi gõ trực tiếp vào từng ô, vốn lý tưởng cho các bảng nhỏ hoặc các lần chỉnh sửa nhanh. Với bất cứ thứ gì vốn đã nằm trong một bảng tính, tab Nhập CSV nhanh hơn: dán dữ liệu của bạn và nó được phân tích vào lưới chỉ trong một bước.

Bộ nhập linh hoạt về dấu phân cách. Nó chấp nhận văn bản ngăn cách bằng dấu phẩy, tab, chấm phẩy và gạch đứng, nên một bản sao chép thẳng từ Excel hoặc Google Sheets (vốn dùng tab) lẫn một tệp CSV tải về (vốn dùng dấu phẩy) đều hoạt động. Hãy đánh dấu Dòng đầu tiên là tiêu đề khi dòng trên cùng của bạn chứa các tên cột, và những giá trị đó sẽ trở thành các ô th trong thead thay vì dữ liệu thông thường.

Một ví dụ cụ thể

Dán ba dòng vào Nhập CSV với dòng đầu được đánh dấu là tiêu đề: Name, Email, Phone ở dòng một, rồi hai hàng liên hệ. Công cụ tạo ra một bảng có thead chứa một hàng duy nhất gồm ba ô th và có tbody chứa hai hàng tr gồm các ô td. Bật Bảng Có Viền và Hàng Có Vạch thì đoạn đánh dấu nhận thêm các lớp và kiểu vẽ viền ô và tô màu xen kẽ các hàng, nên phần xem trước khớp chính xác với những gì sẽ xuất hiện trên trang của bạn trước cả khi bạn sao chép mã.

Các tùy chọn tạo kiểu trực quan

Các Tùy chọn Cơ bản bao quát những kiểu mà bạn dùng đến nhiều nhất. Bảng Có Viền vẽ các đường quanh các ô, Hàng Có Vạch tô màu các hàng xen kẽ để các bảng dài dễ quét nhìn hơn, còn Hiệu Ứng Di Chuột làm nổi bật hàng nằm dưới con trỏ, giúp người đọc dõi theo các hàng rộng. Mỗi tùy chọn được phản ánh trực tiếp trong phần xem trước.

Để kiểm soát tinh tế hơn, các Tùy chọn Nâng cao mở ra phần đệm và khoảng cách ô, độ rộng và màu viền, cùng chế độ border-collapse, vốn quyết định liệu viền của các ô kề nhau có gộp thành một đường duy nhất (collapse) hay vẫn là các đường kép tách biệt (separate). Bạn cũng có thể gắn một ID và một lớp tùy chỉnh để bảng móc nối vào bảng định kiểu hiện có của bạn thay vì chỉ dựa hoàn toàn vào các kiểu nội tuyến.

Chú thích và phạm vi tiêu đề để dễ tiếp cận

Một chú thích cho bảng một tựa đề nhìn thấy được và được liên kết về mặt lập trình, và bạn có thể đặt nó ở trên hoặc ở dưới. Đây là cách dễ tiếp cận để đặt tên cho một bảng, tốt hơn nhiều so với một đoạn văn ở gần đó, vì các trình đọc màn hình đọc nó như nhãn của bảng.

Tùy chọn Phạm Vi Tiêu Đề là thiết lập về khả năng tiếp cận quan trọng nhất ở đây. Đặt scope thành col trên các ô tiêu đề báo cho công nghệ trợ giúp biết rằng mỗi th gắn nhãn cho cột phía dưới nó; đặt thành row gắn nhãn cho hàng bên cạnh nó; còn tùy chọn kết hợp xử lý các bảng vừa có hàng tiêu đề vừa có cột tiêu đề. Với scope được đặt đúng, một trình đọc màn hình có thể đọc các tiêu đề liên quan khi người dùng di chuyển từ ô này sang ô khác, nên một giá trị được đọc thành Phone: 555-1234 thay vì một con số trơ trọi, không có ngữ cảnh.

Lưu ý về tính đáp ứng

Bảng vốn dĩ rộng, và một bảng có nhiều cột sẽ tràn ra ngoài màn hình điện thoại. Tùy chọn Bảng Đáp Ứng xử lý điều này bằng cách bọc bảng lại sao cho nó cuộn theo chiều ngang bên trong phần bao của nó thay vì làm vỡ bố cục trang, qua đó giữ mọi cột nguyên vẹn và có thể tiếp cận được. Đây là mặc định an toàn cho các bảng dữ liệu trên màn hình nhỏ.

Cũng đáng để hiểu rõ sự đánh đổi: cuộn ngang giữ dữ liệu trung thực nhưng buộc người đọc phải cuộn. Không có cách nào để xếp lại dòng một bảng dữ liệu thực sự thành một cột hẹp duy nhất mà không đánh mất các mối quan hệ hàng-và-cột, nên với nội dung thực sự dạng bảng, cuộn là giải pháp trung thực chứ không phải một mẹo chữa cháy.

Những lỗi thường gặp cần tránh

Sự lạm dụng thường gặp nhất là dùng một bảng để kiểm soát bố cục trang thay vì để trình bày dữ liệu; CSS hiện đại như flexbox và grid mới là công cụ đúng cho bố cục, còn bảng nên được dành riêng cho nội dung dạng bảng. Một lỗi phổ biến khác là bỏ qua hoàn toàn các ô tiêu đề, vốn để lại người dùng trình đọc màn hình không có ngữ cảnh cột, nên hãy luôn nâng hàng đầu tiên của bạn thành tiêu đề khi nó chứa các tên cột. Cuối cùng, đừng nhồi các kiểu vào những thuộc tính style nội tuyến dài dằng dặc khi một lớp sẽ gọn gàng và dễ bảo trì hơn; hãy dùng các ô ID và class để kết nối bảng với một bảng định kiểu.