Công cụ chuyển đổi bảng HTML sang JSON/CSV

Công Cụ Này Là Gì?

Các trang web thường hiển thị dữ liệu bên trong một phần tử <table> HTML — trang bảng giá, trang thống kê, danh sách được thu thập — nhưng mã đó không thể sử dụng trực tiếp trong lập trình hay bảng tính. Công cụ này phân tích mã <table> được dán vào, đọc hàng tiêu đề (từ <thead>/<th>, hoặc <tr> đầu tiên nếu không có <thead>), ánh xạ các ô của mỗi hàng tiếp theo vào các tiêu đề đó, và xuất ra một mảng đối tượng JSON hoặc một tệp CSV.

Công cụ cũng hoạt động theo chiều ngược lại: dán một mảng đối tượng JSON hoặc văn bản CSV, công cụ sẽ tạo ra một bảng HTML được cấu trúc đúng cách, với <thead> cho tiêu đề cột và <tbody> cho các hàng dữ liệu, sẵn sàng để dán vào một trang web hoặc CMS.

Mọi thứ đều chạy bằng DOMParser tích hợp sẵn của trình duyệt — không có mã HTML nào được gửi đến máy chủ, nên có thể an toàn sử dụng với nội dung dán vào có chứa dữ liệu nội bộ hoặc nhạy cảm.

Nguồn: cấu trúc bảng tuân theo định nghĩa phần tử table của WHATWG HTML Living Standard.

Tại Sao Nên Dùng?

• Chuyển đổi hai chiều — bảng HTML sang JSON, bảng HTML sang CSV, và JSON/CSV trở lại thành mã bảng HTML sạch.
• Tự động nhận diện tiêu đề — hoạt động với mã <thead>/<th> hoặc chỉ một <tr> đầu tiên đơn giản được dùng làm hàng tiêu đề.
• Không cần dán vào bảng tính trước — chuyển thẳng từ mã bảng sang dữ liệu có cấu trúc.
• Tạo ra đầu ra HTML được thoát ký tự đúng cách, nên các ký tự đặc biệt như < và & trong dữ liệu của bạn không làm hỏng bảng.
• 100% xử lý phía client — mã HTML bạn dán vào (có thể đến từ một trang nội bộ hoặc bảng quản trị) không bao giờ rời khỏi trình duyệt của bạn.

Cách Sử Dụng

1. Để chuyển đổi một bảng HTML: dán mã <table>...</table> vào ô đầu tiên, sau đó nhấp "Chuyển sang JSON" hoặc "Chuyển sang CSV".
2. Xem lại kết quả, sao chép hoặc nhấp vào liên kết tải xuống để lưu tệp.
3. Để tạo một bảng HTML: dán mảng JSON hoặc văn bản CSV vào ô thứ hai.
4. Nhấp "Chuyển sang bảng HTML" và sao chép mã được tạo ra vào trang hoặc CMS của bạn.

Ví dụ

Đầu vào

<table><tr><th>name</th><th>age</th></tr><tr><td>Alice</td><td>30</td></tr></table>

Đầu ra

[{"name":"Alice","age":"30"}]

Các ô ở hàng đầu tiên trở thành khóa của đối tượng; mỗi hàng tiếp theo trở thành một phần tử trong mảng với giá trị được đọc dưới dạng văn bản.

Mẹo thực tế

• Trích xuất dữ liệu từ một bảng trên trang web: xem mã nguồn trang hoặc kiểm tra phần tử, sao chép mã <table>...</table> và dán vào đây thay vì gõ lại dữ liệu thủ công.
• Xuất bản một phản hồi API dưới dạng bảng dễ đọc trên trang web hoặc CMS: dán mảng JSON vào ô thứ hai và sao chép mã HTML được tạo ra trực tiếp vào khối văn bản định dạng hoặc HTML của trang.
• Nếu một bảng sử dụng <div> hoặc bố cục lưới CSS thay vì thẻ <table> thật, công cụ này sẽ không thể phân tích được — trang nguồn cần sử dụng các thẻ bảng HTML thực sự.

Vì sao việc nhận diện tiêu đề lại quan trọng

Một bảng không có hàng tiêu đề rõ ràng là mơ hồ — bất kỳ công cụ nào xử lý tiếp theo cũng cần biết hàng nào định nghĩa tên cột trước khi có thể chuyển các hàng còn lại thành bản ghi có cấu trúc. Công cụ này giải quyết sự mơ hồ đó theo cách mà trình duyệt và hầu hết các công cụ thu thập dữ liệu vẫn làm: trước tiên tìm một phần <thead> rõ ràng, và chỉ khi không có <thead> mới chuyển sang coi hàng hiển thị đầu tiên là tiêu đề. Điều này giúp việc chuyển đổi luôn có thể dự đoán được, ngay cả với mã bảng viết tay hoặc thu thập được mà bỏ qua các thẻ mang tính ngữ nghĩa hơn.

Câu Hỏi Thường Gặp