Trình tạo bảng HTML

Tạo bảng HTML bằng trình chỉnh sửa trực quan và sao chép code ngay lập tức.

HàngCột Hàng tiêu đề Đường viền Hàng xen kẽKhoảng đệm

Đầu ra HTML

<table border="1" cellpadding="8" style="border-collapse: collapse; width: 100%;">
  <thead>
    <tr>
      <th style="padding: 8px; text-align: left;">Header 1</th>
      <th style="padding: 8px; text-align: left;">Header 2</th>
      <th style="padding: 8px; text-align: left;">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding: 8px;">Cell 1,1</td>
      <td style="padding: 8px;">Cell 1,2</td>
      <td style="padding: 8px;">Cell 1,3</td>
    </tr>
    <tr>
      <td style="padding: 8px;">Cell 2,1</td>
      <td style="padding: 8px;">Cell 2,2</td>
      <td style="padding: 8px;">Cell 2,3</td>
    </tr>
    <tr>
      <td style="padding: 8px;">Cell 3,1</td>
      <td style="padding: 8px;">Cell 3,2</td>
      <td style="padding: 8px;">Cell 3,3</td>
    </tr>
  </tbody>
</table>

Giới thiệu công cụ

Trình tạo bảng HTML cho phép bạn đặt số hàng và cột, chỉnh sửa ô trực tiếp và nhận code HTML bảng sẵn dùng. Bạn có thể cấu hình trực quan hàng tiêu đề, đường viền, hàng xen kẽ và khoảng đệm ô.

HTML được tạo tuân theo đánh dấu ngữ nghĩa với cấu trúc thead và tbody phù hợp, tốt hơn cho khả năng truy cập và trình đọc màn hình. Code cập nhật theo thời gian thực khi bạn chỉnh sửa.

Cách sử dụng

Đặt số hàng và cột.
Bật/tắt hàng tiêu đề, đường viền và hàng xen kẽ bằng hộp kiểm.
Điều chỉnh giá trị khoảng đệm ô.
Nhấp vào bất kỳ ô nào để nhập nội dung trực tiếp.
Sao chép code dưới "Đầu ra HTML" và sử dụng trong dự án của bạn.

Trường hợp sử dụng

Tuyệt vời cho bảng so sánh dữ liệu, bảng giá, lịch trình, bảng thông số kỹ thuật sản phẩm và bất kỳ thông tin nào được hiển thị theo định dạng bảng trên trang web.

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

Tôi có thể tạo style bảng mà không cần CSS không? — Có. HTML được tạo bao gồm thuộc tính border và cellpadding, vì vậy style cơ bản được áp dụng mà không cần CSS.
Có thể thêm colspan hoặc rowspan không? — Công cụ này tạo cấu trúc bảng cơ bản. Chỉnh sửa code được tạo trực tiếp để thêm thuộc tính colspan/rowspan.
Làm thế nào để làm bảng responsive? — Bọc bảng trong div có overflow-x: auto, hoặc sử dụng CSS media queries để cho phép cuộn ngang trên màn hình nhỏ.