Công cụ tạo bảng HTML dễ truy cập: chuyển CSV thành HTML có chú thích | We.Inc
Dán CSV hoặc bắt đầu từ mẫu bảng giá hay giờ mở cửa. Tạo bảng HTML đúng chuẩn với chú thích, ô tiêu đề và thuộc tính scope được bảo vệ an toàn, kèm đoạn CSS đáp ứng nhỏ để sao chép.
Dán các hàng từ bảng tính hoặc CSV, hoặc bắt đầu từ mẫu bảng giá dịch vụ hay giờ mở cửa. Bạn sẽ nhận được một bảng HTML đúng chuẩn, có chú thích, ô tiêu đề và thuộc tính scope giúp trình đọc màn hình nhận biết cấu trúc, cùng một đoạn CSS ngắn để bảng dễ đọc trên điện thoại. Mọi giá trị đều được thoát ký tự an toàn, vì vậy văn bản đã dán không thể làm hỏng trang của bạn. Tất cả hoạt động trong trình duyệt. Nội dung bạn nhập không được gửi cho We.Inc hay bất kỳ ai khác và sẽ biến mất khi bạn đóng thẻ.
Chọn mẫu có sẵn hoặc dán các hàng của riêng bạn. Dấu phẩy, tab (từ bảng tính) và dấu chấm phẩy đều dùng được; các giá trị đặt trong dấu ngoặc kép có dấu phẩy bên trong vẫn được giữ nguyên.
Chọn xem hàng đầu tiên có chứa tiêu đề cột hay không và cột đầu tiên có dùng để đặt tên cho từng hàng hay không. Các ô này sẽ trở thành ô th có thuộc tính scope.
Viết chú thích. Chú thích giúp người dùng trình đọc màn hình biết tên bảng và hiển thị phía trên bảng cho mọi người.
Chọn kiểu hiển thị rồi xem trước ở kích thước máy tính và điện thoại. Trên màn hình nhỏ, bảng rộng sẽ cuộn ngang bên trong khung riêng thay vì bị bóp hẹp.
Sao chép HTML và CSS, hoặc tải cả hai xuống dưới dạng một tệp.
Chỉ dùng bảng cho dữ liệu có hàng và cột, như giá cả hoặc giờ mở cửa. Với bố cục trang, hãy dùng CSS.
Viết tiêu đề ngắn gọn. Trình đọc màn hình lặp lại tiêu đề trong mỗi thông báo.
Ghi đơn vị trong tiêu đề (Giá, USD) thay vì lặp lại ở mọi ô.
Đừng gộp ô trừ khi thật sự cần. Ô gộp khiến người dùng trình đọc màn hình khó theo dõi.
Kiểm tra bảng ở kích thước điện thoại. Nếu cần vuốt ngang nhiều hơn một lần, hãy cân nhắc chia bảng.
Câu hỏi thường gặp
Điều gì giúp bảng HTML dễ truy cập?
Một chú thích nêu tên bảng, các ô tiêu đề cột và hàng bằng th, cùng thuộc tính scope cho biết tiêu đề áp dụng cho cột hay hàng. Trình đọc màn hình dùng các thông tin này để thông báo mỗi giá trị thuộc tiêu đề nào. Công cụ này thêm cả ba thành phần.
Tại sao không dựng bảng bằng các thẻ div?
Một lưới div có thể trông giống bảng, nhưng công nghệ hỗ trợ không thể biết ô nào thuộc tiêu đề nào. Phần tử table thực sự mang sẵn ý nghĩa đó.
Bảng thích ứng với màn hình được xử lý thế nào?
Bảng nằm trong một khung có thể cuộn ngang trên màn hình hẹp. Khung có thể nhận tiêu điểm và được gắn nhãn bằng chú thích, nên người dùng bàn phím cũng cuộn được.
Dữ liệu của tôi có được thoát ký tự an toàn không?
Có. Dấu và, dấu ngoặc nhọn và dấu ngoặc kép trong ô được chuyển thành thực thể HTML, nên nội dung ô chứa <script> sẽ hiển thị như văn bản thay vì chạy mã.
Tôi có thể dán trực tiếp từ Excel hoặc Google Sheets không?
Có. Các ô đã sao chép được phân tách bằng tab và công cụ tự động nhận biết điều đó.
Công cụ này có miễn phí không?
Có, không cần đăng ký. Công cụ chạy trong trình duyệt của bạn.
Bảng giá và giờ mở cửa là dữ liệu dạng bảng
Hầu hết trang web doanh nghiệp nhỏ có ít nhất hai bảng: giá các mặt hàng và giờ mở cửa. Cả hai đều là dữ liệu dạng bảng thực sự, vì vậy nên được đánh dấu dưới dạng bảng, trong đó mỗi mức giá gắn với dịch vụ tương ứng và mỗi khung giờ gắn với ngày tương ứng.
Các mẫu ở đây giúp bạn bắt đầu với hai cấu trúc đó. Hãy thay các hàng ví dụ bằng dữ liệu của bạn trước khi xuất bản; đây chỉ là nội dung giữ chỗ, không phải giá thật.