Trình tạo bảng HTML
Tạo các bảng HTML một cách trực quan và sao chép mã.
Cách sử dụng
- Xác định số hàng và cột, sau đó nhấp Áp dụng.
- Nhập dữ liệu trực tiếp vào các ô có thể chỉnh sửa.
- Kích hoạt các tùy chọn như hàng tiêu đề, sọc, viền và di chuột.
- Nhấp Sao chép HTML để sao chép mã được tạo.
Câu hỏi thường gặp
Mã được tạo có bao gồm CSS không?
Có. Khi bạn kích hoạt các tùy chọn như sọc, viền hoặc di chuột, công cụ tạo các style CSS inline trong HTML để bảng hoạt động ở mọi nơi.
Kích thước tối đa của bảng là gì?
Tối đa 50 hàng và 20 cột. Đối với các bộ dữ liệu lớn hơn, hãy xem xét sử dụng một công cụ spreadsheet và xuất sang HTML.
Cách thức hoạt động
- Xác định kích thước của bảng: nhập số hàng và cột để tạo lưới ban đầu.
- Điền dữ liệu: nhấp vào các ô để nhập nội dung, thêm các hàng tiêu đề và kích hoạt các viền và sọc.
- Tạo kiểu bảng: chọn kiểu viền, màu nền của các tiêu đề, các hàng sọc và padding ô.
- Sao chép HTML: markup bảng được tạo bao gồm một
<thead>với các tiêu đề<th>và một cấu trúc semantic chính xác.
Tại sao sử dụng trình tạo bảng HTML?
Viết tay markup bảng HTML là tốn công và lặp đi lặp lại, đặc biệt cho các bảng với nhiều hàng hoặc các tiêu đề phức tạp. Có được sự lồng nhau chính xác của <table>, <thead>, <tbody>, <tr>, <th> và <td> mỗi lần dễ mắc lỗi. Trình tạo này tạo các bảng HTML semantic chính xác và dễ tiếp cận với các thuộc tính scope trên các ô tiêu đề cho khả năng tương thích với các trình đọc màn hình, hỗ trợ caption đúng và CSS sạch cho các viền và các trạng thái di chuột. Sử dụng nó cho các bảng giá, các bảng so sánh, các bảng dữ liệu và tài liệu.
Đặc điểm của các bảng
- Cấu trúc thead/tbody, markup bảng semantic cho khả năng tiếp cận
- Sọc các hàng, các màu xen kẽ với CSS nth-child
- Các kiểu viền, lưới đầy đủ, chỉ ngang hoặc không có viền
- Hợp nhất cột, hỗ trợ colspan và rowspan
- Wrapper responsive, wrapper cuộn ngang tùy chọn cho di động
Trình tạo bảng HTML là gì?
Trình tạo bảng HTML cung cấp cho bạn một lưới trực quan mà bạn có thể điền giống như một bảng tính, sau đó xuất ra markup
| và | bằng tay và đếm các thẻ mở và đóng, bạn đặt kích thước, nhập dữ liệu và sao chép kết quả. Đầu ra là HTML xác thực và đọc đúng cho trình đọc màn hình.
Các phần tử bảng ngữ nghĩa đã có trong HTML kể từ bản nháp 1993 và được chính thức hóa trong HTML 2.0 (1995). Chúng tồn tại vì một lý do: dữ liệu dạng bảng. Bảng giá, ma trận so sánh, lưới dữ liệu có thể sắp xếp, bảng tuần hoàn các nguyên tố, bất kỳ tập hợp các sự kiện hình chữ nhật nào mà các hàng và cột mang ý nghĩa. Các bảng đọc đúng cho công nghệ hỗ trợ khi được sử dụng cho dữ liệu dạng bảng và tạo ra cơn ác mộng về khả năng truy cập khi được sử dụng cho bố cục trang (kỷ nguyên và Flexbox đã chấm dứt sự lạm dụng đó).
Trình tạo này xuất ra markup có thể truy cập với các thuộc tính scope trên các ô tiêu đề, một riêng cho hàng tiêu đề và CSS nội tuyến cho các tùy chọn trực quan mà bạn đánh dấu. Đầu ra sẵn sàng để sao chép-dán cho các bài đăng blog, tài liệu, mẫu email và bất kỳ ngữ cảnh nào chấp nhận HTML. Lưới trực quan chạy hoàn toàn trong trình duyệt của bạn nên không có dữ liệu nào rời khỏi thiết bị của bạn.
Hàng điều khiển hàng đầu chứa hai đầu vào số (hàng và cột), một nút Áp dụng, và bốn hộp kiểm tùy chọn (hàng tiêu đề, hàng có sọc, có viền, hiệu ứng di chuột). Điều chỉnh kích thước trước, nhấp Áp dụng, sau đó đánh dấu các tùy chọn phù hợp với thiết kế của bạn. Lưới có thể chỉnh sửa bên dưới cập nhật ngay lập tức và HTML được tạo trong textarea phản ánh mọi thay đổi bạn thực hiện. Lưới có thể chỉnh sửa là một bảng HTML thực sự với các đầu vào trong mỗi ô, vì vậy bạn có thể tab giữa các ô, dán một cột giá trị, hoặc sử dụng điều hướng bàn phím. Hàng tiêu đề (khi được đánh dấu) được kết xuất với nền màu để bạn có thể nói trong nháy mắt hàng nào sẽ trở thành Ba nút hành động nằm ở dưới cùng: Copy HTML ghi markup vào clipboard của bạn qua Clipboard API, Toggle Preview hiển thị một phiên bản được kết xuất bên dưới để bạn có thể xác nhận kiểu, và Clear Cells làm trống dữ liệu mà không cần đặt lại kích thước. Bản xem trước sử dụng cùng CSS với đầu ra, vì vậy những gì bạn thấy là những gì blog hoặc tài liệu của bạn sẽ hiển thị. Bản nháp HTML đầu tiên bao gồm RFC 1942 của Dave Raggett (tháng 5 năm 1996) đã cung cấp cho các bảng HTML đặc tả chính thức đầu tiên của họ, bao gồm thead, tbody, tfoot, colgroup và thuộc tính scope cho khả năng truy cập. Cùng năm đó, khuyến nghị W3C HTML 3.2 đã áp dụng mô hình bảng về cơ bản nguyên văn. Cấu trúc phần lớn không thay đổi trong ba thập kỷ. Trước khi CSS được hỗ trợ rộng rãi, các nhà thiết kế đã sử dụng các bảng để định vị các phần tử trang: một bảng bốn ô chứa tiêu đề, điều hướng trái, nội dung và chân trang. Kỹ thuật hoạt động nhưng tạo ra markup không thể đọc được, làm hỏng trình đọc màn hình và làm cho việc thiết kế lại đau đớn. Sự truyền giáo CSS của Eric Meyer (2000-2005) và Designing With Web Standards của Jeffrey Zeldman (2003) đã chấm dứt kỷ nguyên, trả các bảng về mục đích ngữ nghĩa của chúng: dữ liệu dạng bảng. CSS 2.1 đã thêm display: table, table-row và table-cell, vì vậy bạn có thể có hành vi bố cục giống bảng trên các phần tử không phải bảng. Điều này hữu ích cho khoảng thời gian ngắn khi Flexbox và Grid chưa được hỗ trợ (khoảng 2010 đến 2015). Hôm nay, display: grid và display: flex đã thay thế các giá trị bảng CSS này cho bố cục, và các bảng thực được dành riêng cho dữ liệu. WAI-ARIA 1.0 (2014) đã giới thiệu role=grid cho các bảng tương tác và làm rõ cách các trình đọc màn hình nên thông báo các tiêu đề bảng qua thuộc tính scope và mẫu headers/id. Các trình đọc màn hình hiện đại (NVDA, JAWS, VoiceOver) đọc đúng một Khi iPhone làm cho các màn hình nhỏ chiếm ưu thế, các nhà thiết kế phải tìm ra cách hiển thị các bảng rộng trên viewport hẹp. Bài viết về bảng đáp ứng năm 2011 của Filament Group đã khởi đầu một làn sóng các mẫu: cuộn ngang, các hàng xếp chồng trên di động, các cột thu gọn theo ưu tiên. Nhóm Làm việc CSS đã làm việc trên container queries và subgrid để làm cho các mẫu này dễ dàng hơn; hiện tại, cách tiếp cận tiêu chuẩn là bọc bảng trong overflow-x: auto. Ba cột (Free, Pro, Enterprise) với mười hàng tính năng hoặc hơn. Đánh dấu hàng tiêu đề để biến tên gói thành các ô Khi xem xét năm công cụ qua tám tiêu chí, một bảng với các hàng có sọc và các ô có viền đọc rõ ràng hơn so với một danh sách dấu đầu dòng. Đánh dấu có sọc, có viền và hàng tiêu đề; nhập hoặc dán dữ liệu; sao chép. Markup ngữ nghĩa làm cho so sánh có thể đọc được trong các trình đọc feed, các dịch vụ lưu trữ và các trình đọc màn hình. Tài liệu API thường hiển thị tên tham số, kiểu, mặc định và mô tả dưới dạng bảng. Trình tạo cung cấp cho bạn bốn cột với một hàng tiêu đề, bạn điền các tham số, sao chép HTML và dán vào Markdown hỗ trợ HTML thô, hoặc vào framework tài liệu của bạn (Docusaurus, MkDocs, Hugo). Thuộc tính scope làm cho các cột có thể điều hướng trong các trình đọc màn hình. Các ứng dụng email (đặc biệt là Outlook 2007-2019) có hỗ trợ CSS rất không nhất quán, vì vậy HTML bản tin vẫn sử dụng các bảng cho bố cục (một ngoại lệ đối với quy tắc không-bảng-bố-cục). Đối với các bảng dữ liệu bên trong bản tin, đầu ra có kiểu nội tuyến của trình tạo hoạt động trong hầu hết các ứng dụng. Kiểm tra trong Litmus hoặc Email on Acid trước khi gửi đến một danh sách lớn. Khi tạo mẫu bảng điều khiển quản trị nội bộ, một bảng HTML tĩnh với các hàng có sọc trông gần với sản phẩm cuối cùng hơn là văn bản giữ chỗ. Tạo cấu trúc, dán vào thành phần React hoặc Vue, và thay thế dữ liệu tĩnh bằng vòng lặp dữ liệu ràng buộc sau này. Khi tạo PDF từ HTML với các công cụ như Puppeteer, wkhtmltopdf, hoặc in sang PDF của Chrome, các bảng kết xuất đáng tin cậy trên tất cả các engine. Sử dụng trình tạo để xây dựng bảng, dán vào mẫu của bạn, và chạy pipeline PDF. Tùy chọn có viền cung cấp các đường in sắc nét mà không cần CSS bổ sung. Các bảng dành cho dữ liệu dạng bảng, không phải cấu trúc trang. Một Mỗi Các bảng với các tiêu đề cột được nhóm (Q1, Q2 mỗi cái được chia thành Jan, Feb, Mar) cần thuộc tính headers trên mỗi ô dữ liệu chỉ đến id của các tiêu đề liên quan. Scope một mình không đủ cho các tiêu đề hai cấp. Trình tạo không tạo ra các tiêu đề phức tạp; cho những điều này, chỉnh sửa HTML thủ công hoặc sử dụng một plugin CMS hỗ trợ mẫu này. Một bảng sáu cột không thể đọc được trên màn hình điện thoại rộng 375 pixel. Mẫu thân thiện với di động mặc định là bọc bảng trong một div với overflow-x: auto để người dùng có thể cuộn ngang. Đối với các bảng nặng cột, hãy xem xét xếp chồng các hàng thành các thẻ nhỏ trên màn hình nhỏ qua @media (max-width). Đầu ra của trình tạo không được tự động bọc; thêm bộ bao bọc trong CSS của bạn. Một Một bảng HTML tĩnh không thể được sắp xếp hoặc lọc bởi người dùng. Nếu khán giả của bạn cần tương tác, hãy phân lớp trong DataTables, AG Grid, hoặc Tanstack Table. Trình tạo tạo ra bảng ngữ nghĩa cơ bản, trở thành nền tảng cho các thư viện này. Điều hướng bàn phím và các vai trò ARIA đi kèm với thư viện. Mọi thứ chạy trong trình duyệt của bạn. Lưới trực quan, đầu ra HTML và bản xem trước đều sống trong JavaScript phía máy khách. Chúng tôi không gửi dữ liệu của bạn đi đâu cả, không ghi nhật ký đầu vào, hoặc lưu trữ bất cứ thứ gì trong cookie hoặc localStorage. Tải lại trang và bảng trước đó biến mất. Sau khi trang được tải, công cụ hoạt động ngoại tuyến. Bạn có thể ngắt kết nối khỏi mạng và xây dựng các bảng chứa dữ liệu khách hàng, giá nội bộ, hoặc bất kỳ nội dung bí mật nào khác mà không cần chạm vào máy chủ bên thứ ba. Nút Copy HTML sử dụng Clipboard API yêu cầu một cử chỉ người dùng và không thể quan sát được bởi các bên ngoài. Nếu bạn muốn một thanh bên cạnh nội dung chính, một lưới thẻ, hoặc một thanh điều hướng, hãy sử dụng CSS Flexbox (display: flex) hoặc CSS Grid (display: grid). Các bảng cho bố cục tạo ra đầu ra trình đọc màn hình khó hiểu và HTML không linh hoạt không thích ứng với các thay đổi viewport theo cách các nguyên thủy bố cục hiện đại làm. Một bảng HTML tĩnh 10.000 hàng chậm để kết xuất và tiêu thụ bộ nhớ đáng kể. Sử dụng một thư viện lưới ảo hóa (TanStack Virtual, React Window, AG Grid) chỉ kết xuất các hàng hiển thị. HTML tĩnh tốt cho dưới vài trăm hàng. Khi người dùng cần sắp xếp, lọc, chỉnh sửa, nhóm hoặc phân trang, bạn cần một thư viện lưới thực sự. AG Grid, TanStack Table, DataTables, và Bootstrap Table đều tạo ra markup Một biểu đồ cột không phải là một bảng, đó là một trực quan hóa. Sử dụng Chart.js, D3, Recharts, hoặc bất kỳ thư viện biểu đồ dựa trên SVG nào. Nếu bạn cần cả biểu đồ và bảng dữ liệu hỗ trợ cho khả năng truy cập, kết xuất biểu đồ và đặt một Đối với các bảng có hàng tiêu đề, có. tách các hàng tiêu đề khỏi các hàng dữ liệu, cho phép các trình duyệt đóng băng tiêu đề trên các bảng dài và cho phép các trình đọc màn hình thông báo tiêu đề một cách chính xác. Trình tạo bao gồm thead tự động khi tùy chọn hàng tiêu đề được đánh dấu. Đối với các bảng không có tiêu đề, bạn có thể bỏ qua cả hai, nhưng việc bao gồm scope="col" đi trên các ô Sử dụng một thư viện JavaScript thêm nhấp-để-sắp-xếp vào markup Đơn giản nhất và dễ truy cập nhất là overflow-x: auto trên một div bao bọc, bảo tồn ngữ nghĩa của bảng trong khi cho phép người dùng cuộn ngang. Đối với các bảng nặng cột, mẫu hàng xếp chồng (display: block trên td ở chiều rộng hẹp, với nhãn dữ liệu qua các thuộc tính data-label) đọc mỗi hàng như một danh sách có nhãn trên di động. Cả hai đều hợp lệ; chọn dựa trên trường hợp sử dụng đọc-vs-so-sánh của bảng. Hầu hết các bộ xử lý Markdown (GitHub Flavored Markdown, Pandoc, MDX, MkDocs, Hugo) chấp nhận HTML thô cùng với cú pháp Markdown, vì vậy bạn có thể dán đầu ra của trình tạo trực tiếp. Cú pháp bảng gốc của Markdown đơn giản hơn nhưng thiếu colspan, rowspan, scope và kiểu, vì vậy đối với bất cứ điều gì vượt ra ngoài một lưới đơn giản, HTML tốt hơn. Lưu ý: một số bộ phân tích Markdown nghiêm ngặt (CommonMark không có tiện ích mở rộng) bỏ qua HTML theo mặc định. Đánh dấu tùy chọn Hàng có Sọc trong trình tạo. Đầu ra bao gồm các thuộc tính kiểu nội tuyến trên mỗi hàng khác, vì vậy việc tạo sọc tồn tại ngay cả trong các ngữ cảnh mà CSS bị loại bỏ (một số ứng dụng webmail). Nếu môi trường của bạn cho phép CSS bên ngoài, ưu tiên tr:nth-child(even) trong một stylesheet, sạch hơn các kiểu nội tuyến và dễ cập nhật hơn. |
|---|