Tạo bảng HTML trực quan: nhập như bảng tính, xuất ra HTML, Markdown và CSV
Công cụ cho bạn gõ nội dung vào một lưới ô giống bảng tính rồi tự sinh mã bảng ở ba định dạng: HTML kèm sẵn kiểu dáng nội tuyến, bảng Markdown và tệp CSV. Bạn bật tắt hàng tiêu đề, hàng chân bảng, đường viền và nền sọc xen kẽ, xem trước ngay bên cạnh trước khi sao chép.
Tính năng nổi bật
- Lưới nhập liệu tối đa 20 hàng và 10 cột, thêm bớt bằng nút cộng trừ
- Bật tắt hàng tiêu đề để hàng đầu được bọc trong thead và dùng thẻ th
- Bật tắt hàng chân bảng để hàng cuối được bọc trong tfoot
- Bật tắt đường viền, khi bật sẽ thêm border-collapse cho bảng và viền một pixel cho từng ô
- Bật tắt nền sọc xen kẽ, tô nền nhạt cho các hàng chẵn trong phần thân bảng
- Khung xem trước hiển thị bảng thật ngay khi bạn gõ
- Ba thẻ xuất riêng cho HTML, Markdown và CSV, mỗi thẻ có nút sao chép riêng
- Toàn bộ sinh mã chạy trên trình duyệt, nội dung bảng không gửi lên máy chủ
Vì sao gõ bảng HTML bằng tay lại tốn thời gian đến vậy
Một bảng bốn hàng bốn cột đơn giản cũng cần hơn ba mươi thẻ đóng mở lồng nhau, và chỉ cần quên một thẻ đóng là toàn bộ bố cục phía dưới bị đẩy lệch. Chuyện đó khó phát hiện vì trình duyệt tự sửa lỗi HTML theo cách riêng của nó, nên bảng có thể hiển thị gần đúng trên máy bạn nhưng vỡ trên trình đọc thư hoặc trong trình soạn thảo của hệ quản trị nội dung. Thêm nữa, thao tác thêm một cột vào bảng đã viết xong đòi hỏi chèn đúng một thẻ vào mỗi hàng, và với bảng mười lăm hàng thì đó là mười lăm lần chèn thủ công. Nhập vào lưới rồi để công cụ sinh mã bỏ hẳn nhóm lỗi này: cấu trúc luôn cân đối, thêm cột là một cú bấm, và bạn nhìn thấy bảng thật ngay trong lúc gõ nên biết ngay khi nội dung tràn hoặc lệch.
Lợi ích khi sử dụng
- Không phải đếm thẻ đóng mở, cấu trúc bảng luôn cân đối
- Thêm bớt hàng cột bằng một cú bấm thay vì sửa từng dòng mã
- Nhìn thấy bảng thật ngay khi gõ nên phát hiện sớm nội dung tràn hoặc lệch cột
- Một lần nhập dùng được cho cả bài viết web, tài liệu Markdown lẫn tệp CSV
- Mã HTML đã gắn sẵn kiểu dáng nội tuyến nên dán vào đâu cũng giữ được hình thức
Cách tạo một bảng
- 1Dùng cặp nút cộng trừ ở góc trên để đặt số cột và số hàng cho đúng nhu cầu.
- 2Gõ nội dung vào từng ô của lưới, hàng đầu tiên sẽ thành tiêu đề nếu bạn để tùy chọn hàng tiêu đề đang bật.
- 3Bật hoặc tắt bốn tùy chọn hàng tiêu đề, hàng chân bảng, đường viền và nền sọc xen kẽ, rồi quan sát khung xem trước.
- 4Chuyển sang thẻ HTML, Markdown hoặc CSV tùy nơi bạn sắp dán bảng vào.
- 5Bấm nút sao chép của thẻ đang mở rồi dán vào bài viết, tài liệu hoặc trình soạn thảo mã của bạn.
Cấu trúc một bảng HTML đúng chuẩn gồm những gì
Bảng HTML chuẩn có ba khối con: thead chứa hàng tiêu đề, tbody chứa dữ liệu và tfoot chứa hàng tổng kết. Ô trong hàng tiêu đề dùng thẻ th, ô dữ liệu dùng thẻ td — đây không phải chuyện thẩm mỹ mà là chuyện ngữ nghĩa, vì trình đọc màn hình dựa vào thẻ th để đọc tên cột cho người khiếm thị mỗi khi họ di chuyển sang một ô mới. Công cụ sinh sẵn ba khối này theo hai tùy chọn bạn bật. Có hai thứ nên tự thêm sau khi dán mã vào dự án. Thứ nhất là thuộc tính scope cho các ô tiêu đề, viết scope bằng col cho tiêu đề cột và scope bằng row cho tiêu đề hàng; thiếu nó thì với bảng có tiêu đề ở cả hàng lẫn cột, trình đọc màn hình sẽ không ghép đúng ô với tiêu đề tương ứng. Thứ hai là thẻ caption đặt ngay sau thẻ table mở, dùng để đặt tên cho bảng; đây là cách chuẩn để mô tả bảng và nó cũng hiển thị được cho mọi người đọc chứ không chỉ cho công nghệ hỗ trợ.
Ba định dạng xuất ra và nên chọn cái nào
Bản HTML gắn kiểu dáng thẳng vào từng thẻ dưới dạng thuộc tính style, cụ thể là viền một pixel màu xám nhạt và đệm 8 pixel cho mỗi ô, cộng thêm border-collapse trên thẻ table để hai đường viền kề nhau không bị nhân đôi. Kiểu dáng nội tuyến thường bị coi là thói quen xấu trong dự án web, nhưng có đúng hai bối cảnh mà nó là lựa chọn đúng: thư điện tử dạng HTML, vì nhiều trình đọc thư gỡ bỏ toàn bộ khối style trong phần đầu tài liệu; và các trình soạn thảo nội dung không cho bạn động vào tệp CSS. Nếu dán vào một dự án web có sẵn hệ thống kiểu dáng, hãy xóa các thuộc tính style rồi gán lớp CSS của riêng bạn. Bản Markdown hợp cho tệp README trên kho mã, tài liệu nội bộ và các nền tảng viết blog hỗ trợ Markdown. Bản CSV hợp khi bạn cần đưa dữ liệu sang bảng tính hoặc nhập vào một hệ thống khác, vì đây là định dạng dữ liệu thuần chứ không mang định dạng hiển thị.
Bảng Markdown: quy tắc và ký tự cần cẩn thận
Bảng Markdown gồm hàng tiêu đề, một hàng phân cách bằng các dấu gạch ngang và các hàng dữ liệu, mọi ô đều đặt giữa hai dấu gạch đứng. Công cụ sinh hàng phân cách mặc định dạng ba gạch ngang, tương ứng căn lề mặc định của trình hiển thị. Nếu muốn chỉ định căn lề, bạn sửa tay hàng phân cách: thêm dấu hai chấm ở đầu để căn trái, thêm ở cả hai đầu để căn giữa, thêm ở cuối để căn phải. Cột số tiền và số lượng nên căn phải để dễ so sánh độ lớn. Điểm cần cẩn thận nhất là ký tự gạch đứng nằm trong nội dung ô: vì nó cũng là ký tự ngăn cách cột, một ô chứa gạch đứng sẽ bị hiểu thành hai ô và cả bảng lệch từ hàng đó trở xuống. Công cụ không tự thoát ký tự này, nên bạn phải tự thêm dấu gạch chéo ngược phía trước, hoặc thay bằng mã thực thể HTML. Lưu ý thêm là bảng Markdown không hỗ trợ gộp ô và không hỗ trợ xuống dòng bên trong một ô; cần hai thứ đó thì phải dùng bảng HTML.
Xuất CSV và chuyện mở tệp bằng Excel tiếng Việt
Bản CSV mà công cụ sinh ra đặt mọi trường trong dấu ngoặc kép và nhân đôi các dấu ngoặc kép có sẵn trong nội dung, đúng theo cách thoát ký tự của chuẩn CSV, nên ô chứa dấu phẩy hay dấu ngoặc kép đều không làm vỡ cấu trúc. Tuy nhiên có hai điểm khiến việc mở trực tiếp bằng Excel thường không như ý. Thứ nhất là dấu tiếng Việt bị hiển thị sai thành ký tự lạ: nguyên nhân là Excel trên Windows đoán bảng mã theo cài đặt vùng của hệ thống thay vì mặc định dùng UTF-8, và tệp không có dấu hiệu nhận dạng ở đầu. Cách xử lý gọn nhất là dán nội dung vào Google Sheets rồi tải lại về, hoặc dùng chức năng nhập dữ liệu từ văn bản của Excel và chọn thủ công bảng mã UTF-8. Thứ hai là dấu phân cách: bản xuất dùng dấu phẩy, nhưng Excel trên máy đặt vùng Việt Nam thường mong đợi dấu chấm phẩy, khiến cả dòng dồn vào một cột. Trong trường hợp đó hãy dùng chức năng chuyển văn bản thành cột và chọn dấu phẩy làm ký tự ngăn cách.
Bảng trên điện thoại và ranh giới sử dụng bảng
Bảng là thành phần khó xử lý nhất trên màn hình hẹp vì nó không tự xuống dòng theo chiều ngang. Cách đơn giản và hiệu quả nhất là bọc thẻ table trong một thẻ div có thuộc tính cho phép cuộn ngang, để bảng cuộn được bên trong khung của nó thay vì đẩy cả trang trôi sang phải — trang bị trôi ngang là một trong những lỗi hiển thị gây khó chịu nhất trên điện thoại. Với bảng nhiều cột, một cách khác là đổi bố cục ở màn hình hẹp để mỗi hàng hiển thị thành một khối dọc, mỗi dòng gồm tên cột và giá trị. Còn một ranh giới quan trọng: chỉ dùng bảng cho dữ liệu có quan hệ hàng cột thật sự. Dùng bảng để dàn trang là cách làm đã lỗi thời trên web và gây rắc rối cho trình đọc màn hình, vì công nghệ hỗ trợ sẽ thông báo số hàng số cột và cố đọc theo quan hệ dữ liệu vốn không tồn tại. Ngoại lệ duy nhất còn giá trị là thư điện tử dạng HTML, nơi bảng vẫn là cách dàn trang đáng tin nhất, và khi đó nên gắn thuộc tính role bằng presentation cho bảng dàn trang.
Câu hỏi thường gặp (FAQ)
Bảng tạo ra tối đa bao nhiêu hàng và cột?
Tối đa 20 hàng và 10 cột, tối thiểu một hàng một cột. Giới hạn này đủ cho phần lớn bảng nội dung trên web. Nếu cần bảng lớn hơn, hãy dựng dữ liệu trong bảng tính rồi xuất ra CSV và dùng một công cụ chuyển CSV sang HTML, vì bảng quá lớn cũng khó đọc trên trang web.
Khác nhau giữa thẻ th và thẻ td là gì?
Thẻ th đánh dấu ô tiêu đề, thẻ td đánh dấu ô dữ liệu. Khác biệt quan trọng không nằm ở hình thức mà ở ngữ nghĩa: trình đọc màn hình dùng ô th để đọc tên cột cho người khiếm thị mỗi khi họ di chuyển tới một ô mới. Công cụ tự dùng th cho hàng tiêu đề và hàng chân bảng.
Vì sao mã HTML sinh ra dùng kiểu dáng nội tuyến?
Để bảng giữ nguyên hình thức khi dán vào nơi bạn không sửa được tệp CSS, điển hình là thư điện tử dạng HTML và các trình soạn thảo nội dung khép kín. Nếu dán vào dự án web có sẵn hệ thống kiểu dáng, hãy xóa các thuộc tính style và gán lớp CSS của riêng bạn cho gọn.
Mở tệp CSV bằng Excel bị lỗi font tiếng Việt thì làm sao?
Do Excel trên Windows đoán bảng mã theo cài đặt vùng thay vì mặc định dùng UTF-8. Cách nhanh nhất là dán nội dung vào Google Sheets rồi tải lại về dạng bảng tính. Cách khác là dùng chức năng nhập dữ liệu từ văn bản trong Excel và chọn thủ công bảng mã UTF-8 ở bước đầu.
CSV mở ra dồn hết vào một cột thì xử lý thế nào?
Nguyên nhân là Excel trên máy đặt vùng Việt Nam thường mong đợi dấu chấm phẩy làm ký tự ngăn cách, trong khi bản xuất dùng dấu phẩy. Hãy chọn cột đó rồi dùng chức năng chuyển văn bản thành cột và chỉ định dấu phẩy làm ký tự ngăn cách, hoặc thay toàn bộ dấu phẩy thành chấm phẩy trước khi mở.
Ô có chứa dấu gạch đứng thì bảng Markdown có vỡ không?
Có. Dấu gạch đứng cũng là ký tự ngăn cách cột nên một ô chứa nó sẽ bị hiểu thành hai ô và cả bảng lệch từ hàng đó xuống. Công cụ không tự thoát ký tự này, bạn phải thêm dấu gạch chéo ngược phía trước nó hoặc thay bằng mã thực thể HTML sau khi sao chép.
Làm sao căn phải cột số trong bảng Markdown?
Sửa tay hàng phân cách nằm ngay dưới hàng tiêu đề: thêm dấu hai chấm ở cuối chuỗi gạch ngang để căn phải, ở đầu để căn trái, ở cả hai đầu để căn giữa. Công cụ sinh hàng phân cách ở dạng mặc định nên bạn chỉ cần chỉnh đúng những cột cần thiết.
Có gộp ô kiểu colspan hoặc rowspan được không?
Không, công cụ chỉ sinh bảng lưới đều. Nếu cần gộp ô, hãy lấy mã HTML rồi thêm tay thuộc tính colspan hoặc rowspan cho ô cần gộp và xóa bớt các ô thừa trong hàng đó. Bảng Markdown thì hoàn toàn không hỗ trợ gộp ô, buộc phải dùng bảng HTML.
Ô để trống thì kết quả ra sao?
Trong bản HTML, ô trống được điền một ký tự khoảng trắng không ngắt để ô vẫn giữ được viền và chiều cao thay vì bị co lại. Trong bản Markdown, ô trống thành một dấu cách. Trong bản CSV, ô trống là một cặp dấu ngoặc kép rỗng, tương ứng giá trị rỗng khi nhập vào bảng tính.
Bảng hiển thị tràn màn hình trên điện thoại thì khắc phục ra sao?
Bọc thẻ table trong một thẻ div và cho thẻ div đó thuộc tính cho phép cuộn ngang. Khi đó bảng cuộn được bên trong khung của nó thay vì đẩy cả trang trôi sang phải. Với bảng nhiều cột, cách tốt hơn là đổi bố cục ở màn hình hẹp để mỗi hàng hiển thị thành một khối dọc.
Nên thêm gì vào mã để bảng dễ tiếp cận hơn?
Hai thứ. Một là thuộc tính scope cho các ô tiêu đề, đặt giá trị col cho tiêu đề cột và row cho tiêu đề hàng. Hai là thẻ caption đặt ngay sau thẻ table mở để đặt tên cho bảng. Cả hai đều phải thêm tay sau khi dán mã, công cụ chưa sinh sẵn.
Nội dung tôi gõ vào có được lưu lại không?
Không. Toàn bộ việc dựng lưới và sinh mã ở cả ba định dạng đều chạy bằng JavaScript trong trình duyệt, không có bước gửi dữ liệu lên máy chủ. Đóng tab là mọi thứ mất, nên hãy sao chép kết quả ra trước khi rời trang nếu bạn đã nhập nhiều dữ liệu.
Từ khóa liên quan
- tạo bảng html online
- html table generator
- tạo bảng markdown online
- markdown table generator
- xuất csv online
- code bảng html mẫu
- thẻ thead tbody tfoot
- thẻ th và td khác nhau
- border-collapse css
- bảng html cho email
- bảng responsive trên mobile
- csv lỗi font tiếng việt excel
- csv dấu phân cách chấm phẩy
- căn lề cột bảng markdown
- colspan rowspan html
- caption và scope trong bảng html
- tạo bảng cho readme github
- bảng sọc xen kẽ css
- công cụ tạo bảng miễn phí
- chuyển bảng sang html
