Softonic

Chuyển bảng từ CSV sang HTML

Bước 1 / 2
Chuyển sang bảng HTML

Việc đưa một bảng dữ liệu vào bài viết blog, trang wiki nội bộ hoặc bản tin email thường đòi hỏi phải xử lý phức tạp thông qua công cụ chỉnh sửa bảng trong hệ thống quản trị nội dung (CMS). Hãy dán tệp CSV vào đây thay vì sử dụng bảng trực tiếp: dòng đầu tiên sẽ được mã hóa thành các ô <th>, mỗi dòng tiếp theo sẽ là <td>, và toàn bộ bảng sẽ được bao bọc bởi phần tử <table> đơn giản không có bất kỳ kiểu nội tuyến nào – đây là định dạng chuẩn gọn gàng, phù hợp với mọi quy ước CSS mà trang web của bạn áp dụng.

Quy trình chuyển đổi diễn ra như thế nào

  1. 1

    Dán tệp CSV

    Ký tự xuống dòng dùng để tách các hàng; `str_getcsv` phân tích từng dòng để xử lý chính xác các dấu phẩy nằm trong dấu ngoặc kép và các dấu ngoặc kép được thoát (escape).

  2. 2

    Chuyển đổi chế độ tiêu đề

    Khi bật, hàng đầu tiên hiển thị các ô `<th>`; khi tắt, mọi hàng đều hiển thị các ô `<td>` thông thường.

  3. 3

    Các giá trị được thoát (escape) cho HTML

    Bộ chuyển đổi gọi hàm trợ giúp e() của Laravel, nhờ đó các ký tự `<`, `>` và `&` được thoát an toàn trong kết quả đầu ra.

  4. 4

    Sao chép thẻ đánh dấu

    HTML được thụt lề hai khoảng trắng để dễ đọc hơn; bạn có thể dán trực tiếp vào tệp Blade, bài viết Markdown hoặc giao diện xem mã nguồn kiểu WYSIWYG.

Thiết kế và tính khả dụng của kết quả đầu ra

Bộ chuyển đổi tạo ra mã HTML có cấu trúc đơn giản, không sử dụng lớp nào, không có kiểu nội tuyến, cũng không có các lớp bao bọc <thead> hay <tbody>. Điều này giúp kết quả đầu ra có tính di động cao; tuy nhiên, bạn có thể muốn trang trí thêm cho nó.

Bảng kiểu tối thiểu

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 12px; border-bottom: 1px solid #e5e7eb; text-align: left; }
th { background: #f9fafb; font-weight: 600; }
tr:nth-child(even) td { background: #fafafa; }

Những cải thiện nhanh về khả năng truy cập

  • Bao hàng đầu tiên trong một <thead> nếu bạn có các bảng dài; khi đó trình đọc màn hình sẽ đọc tên các cột tiêu đề khi người dùng di chuyển qua các hàng. Bộ chuyển đổi không tự động làm việc này nhằm giữ cho kết quả đầu ra tối giản.
  • Thêm phần tử <caption> phía trên bảng, kèm mô tả bằng ngôn ngữ dễ hiểu về ý nghĩa của dữ liệu.
  • Dùng scope="col" trên các ô <th> nếu hàng tiêu đề mô tả các cột, và scope="row" nếu cột đầu tiên xác định các hàng.

Khi HTML không phải là định dạng phù hợp

Nếu đích đến là Markdown, hãy dùng Công cụ Chuyển đổi từ CSV sang Markdown. Nếu đích đến là cơ sở dữ liệu, Công cụ Chuyển đổi từ CSV sang SQL sẽ tạo ra các câu lệnh INSERT có thể thực thi trực tiếp. Bảng HTML rất phù hợp để hiển thị trên trang web, nhưng chỉ ở mức trung bình đối với những trường hợp cần truy vấn hoặc sắp xếp lại dữ liệu.

Câu hỏi thường gặp

Có. Các giá trị được thoát bằng hàm trợ giúp e() của Laravel; do đó, < sẽ trở thành &lt;, và nội dung do người dùng cung cấp không thể chèn các thẻ script hay đóng bảng quá sớm.

Không, theo mặc định, kết quả đầu ra là một <table> duy nhất với các phần tử con <tr> trực tiếp. Hãy bọc <tr> tiêu đề vào bên trong <thead> và phần còn lại vào bên trong <tbody> nếu CSS mục tiêu của bạn yêu cầu.

Các ô chứa ký tự xuống dòng bên trong sẽ được hiển thị nguyên trạng. Nếu bạn muốn các dấu xuống dòng hiển thị trong trình duyệt, hãy thay chúng bằng <br> trước khi chuyển đổi hoặc thiết lập white-space: pre-wrap; trong CSS của <td>.

Có. Tệp CSV được gửi đến máy chủ của chúng tôi để bộ chuyển đổi có thể dựng bảng. Tệp không được lưu trữ và không được thêm vào liên kết của trang.

Công cụ liên quan

Công cụ chuyển Word sang Markdown

Chuyển tệp Word DOCX thành Markdown gọn gàng ngay trong trình duyệt. Giữ tiêu đề, danh sách, liên kết và bảng đơn giản, sau đó sao chép hoặc tải tệp .md có thể chỉnh sửa.

Công cụ chuyển Excel sang CSV

Chuyển trang tính XLSX hoặc XLS thành CSV hay TSV ngay trong trình duyệt. Chọn trang tính, dấu phân cách, bảng mã và dữ liệu ẩn mà không cần tải tệp lên.

Trình giải nén tệp

Kiểm tra các gói ZIP, JAR, XPI, DOCX, XLSX, PPTX và ODT ngay trong trình duyệt, rồi tải từng tệp bên trong mà không tải tệp nguồn lên máy chủ.

Trình chuyển đổi phụ đề

Chuyển phụ đề SRT sang WebVTT hoặc VTT sang SRT ngay trên máy. Kiểm tra thời gian, giữ nguyên văn bản nhiều dòng rồi sao chép hoặc tải kết quả.

Công cụ tách trang tính Excel

Tách sổ làm việc XLSX hoặc XLS theo tab trang tính, nhóm hàng dữ liệu hoặc giá trị cột ngay trong trình duyệt. Tải một XLSX hoặc ZIP cục bộ mà không cần tải tệp lên.

Trình chuyển đổi M4A sang MP3

Chuyển đổi âm thanh M4A sang MP3 để được hỗ trợ phát rộng hơn. Tải lên tệp .m4a và tải xuống bản .mp3 tương thích.

Công cụ này có phiên bản bằng các ngôn ngữ khác