Bảng HTML

Question

Tiết lộ. Hỗ trợ của bạn giúp giữ cho trang web hoạt động. Chúng tôi kiếm được phí giới thiệu cho một số dịch vụ chúng tôi đề xuất trên trang này. Tìm hiểu thêm

Nội dung chính Show

Sử dụng bảng
Bảng mã mẫu. Bảng đơn giản
Bảng mã mẫu. Bảng phức tạp
Giới thiệu về Bố cục dựa trên bảng
Mã HTML cho bảng là gì?
Bảng HTML dùng để làm gì?
Làm thế nào để tạo bảng trong HTML với ví dụ?
Làm thế nào bạn có thể tạo một bảng có 4 hàng và 3 cột trong HTML, hãy cho một ví dụ?

Bảng được sử dụng trong tài liệu HTML (trang web) để trình bày dữ liệu dạng bảng

nội dung

Sử dụng bảng

Một bảng được xác định bằng cách sử dụng phần tử <table> và chứa một số ô của bảng ( <td>, dành cho “dữ liệu bảng” ) được sắp xếp thành các hàng của bảng ( <tr>). Đánh dấu (mã HTML) cho bảng luôn dựa trên hàng, không bao giờ dựa trên cột
Các ô của bảng hoạt động như tiêu đề cột hoặc tiêu đề hàng nên sử dụng phần tử _______________ (tiêu đề bảng)
Các ô của bảng có thể được hợp nhất bằng cách sử dụng các thuộc tính colspan và rowspan

Các bảng có thể được chia thành các phần bằng cách sử dụng các phần tử sau

<thead> — Tiêu đề bảng
<tbody> — Thân bảng

<table>
 <caption>A complex table</caption>
 <thead>
  <tr>
   <th colspan="3">Invoice #123456789</th>
   <th>14 January 2025
  </tr>
  <tr>
   <td colspan="2">
    <strong>Pay to:</strong><br>
    Acme Billing Co.<br>
    123 Main St.<br>
    Cityville, NA 12345
   </td>
   <td colspan="2">
    <strong>Customer:</strong><br>
    John Smith<br>
    321 Willow Way<br>
    Southeast Northwestershire, MA 54321
   </td>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>Name / Description</th>
   <th>Qty.</th>
   <th>@</th>
   <th>Cost</th>
  </tr>
  <tr>
   <td>Paperclips</td>
   <td>1000</td>
   <td>0.01</td>
   <td>10.00</td>
  </tr>
  <tr>
   <td>Staples (box)</td>
   <td>100</td>
   <td>1.00</td>
   <td>100.00</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <th colspan="3">Subtotal</th>
   <td> 110.00</td>
  </tr>
  <tr>
   <th colspan="2">Tax</th>
   <td> 8% </td>
   <td>8.80</td>
  </tr>
  <tr>
   <th colspan="3">Grand Total</th>
   <td>$ 118.80</td>
  </tr>
 </tfoot>
</table>

0 — Chân bảng

Chú thích có thể được thêm vào bảng bằng cách sử dụng phần tử

<table>
 <caption>A complex table</caption>
 <thead>
  <tr>
   <th colspan="3">Invoice #123456789</th>
   <th>14 January 2025
  </tr>
  <tr>
   <td colspan="2">
    <strong>Pay to:</strong><br>
    Acme Billing Co.<br>
    123 Main St.<br>
    Cityville, NA 12345
   </td>
   <td colspan="2">
    <strong>Customer:</strong><br>
    John Smith<br>
    321 Willow Way<br>
    Southeast Northwestershire, MA 54321
   </td>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>Name / Description</th>
   <th>Qty.</th>
   <th>@</th>
   <th>Cost</th>
  </tr>
  <tr>
   <td>Paperclips</td>
   <td>1000</td>
   <td>0.01</td>
   <td>10.00</td>
  </tr>
  <tr>
   <td>Staples (box)</td>
   <td>100</td>
   <td>1.00</td>
   <td>100.00</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <th colspan="3">Subtotal</th>
   <td> 110.00</td>
  </tr>
  <tr>
   <th colspan="2">Tax</th>
   <td> 8% </td>
   <td>8.80</td>
  </tr>
  <tr>
   <th colspan="3">Grand Total</th>
   <td>$ 118.80</td>
  </tr>
 </tfoot>
</table>

1

Bạn có thể sử dụng

<table>
 <caption>A complex table</caption>
 <thead>
  <tr>
   <th colspan="3">Invoice #123456789</th>
   <th>14 January 2025
  </tr>
  <tr>
   <td colspan="2">
    <strong>Pay to:</strong><br>
    Acme Billing Co.<br>
    123 Main St.<br>
    Cityville, NA 12345
   </td>
   <td colspan="2">
    <strong>Customer:</strong><br>
    John Smith<br>
    321 Willow Way<br>
    Southeast Northwestershire, MA 54321
   </td>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>Name / Description</th>
   <th>Qty.</th>
   <th>@</th>
   <th>Cost</th>
  </tr>
  <tr>
   <td>Paperclips</td>
   <td>1000</td>
   <td>0.01</td>
   <td>10.00</td>
  </tr>
  <tr>
   <td>Staples (box)</td>
   <td>100</td>
   <td>1.00</td>
   <td>100.00</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <th colspan="3">Subtotal</th>
   <td> 110.00</td>
  </tr>
  <tr>
   <th colspan="2">Tax</th>
   <td> 8% </td>
   <td>8.80</td>
  </tr>
  <tr>
   <th colspan="3">Grand Total</th>
   <td>$ 118.80</td>
  </tr>
 </tfoot>
</table>

2 và

<table>
 <caption>A complex table</caption>
 <thead>
  <tr>
   <th colspan="3">Invoice #123456789</th>
   <th>14 January 2025
  </tr>
  <tr>
   <td colspan="2">
    <strong>Pay to:</strong><br>
    Acme Billing Co.<br>
    123 Main St.<br>
    Cityville, NA 12345
   </td>
   <td colspan="2">
    <strong>Customer:</strong><br>
    John Smith<br>
    321 Willow Way<br>
    Southeast Northwestershire, MA 54321
   </td>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>Name / Description</th>
   <th>Qty.</th>
   <th>@</th>
   <th>Cost</th>
  </tr>
  <tr>
   <td>Paperclips</td>
   <td>1000</td>
   <td>0.01</td>
   <td>10.00</td>
  </tr>
  <tr>
   <td>Staples (box)</td>
   <td>100</td>
   <td>1.00</td>
   <td>100.00</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <th colspan="3">Subtotal</th>
   <td> 110.00</td>
  </tr>
  <tr>
   <th colspan="2">Tax</th>
   <td> 8% </td>
   <td>8.80</td>
  </tr>
  <tr>
   <th colspan="3">Grand Total</th>
   <td>$ 118.80</td>
  </tr>
 </tfoot>
</table>

3 để xác định các cột của bảng để tạo kiểu. Tuy nhiên, có một số hạn chế với thực hành này

Bảng mã mẫu. Bảng đơn giản

<table>
 <tr>
  <th>Name</th>
  <th>Favorite Color</th>
 </tr>
 <tr>
  <td>Bob</td>
  <td>Yellow</td>
 </tr>
 <tr>
  <td>Michelle</td>
  <td>Purple</td>
 </tr>
</table>

Tên Màu yêu thíchBobVàngMichelleTím

Bảng mã mẫu. Bảng phức tạp

<table>
 <caption>A complex table</caption>
 <thead>
  <tr>
   <th colspan="3">Invoice #123456789</th>
   <th>14 January 2025
  </tr>
  <tr>
   <td colspan="2">
    <strong>Pay to:</strong><br>
    Acme Billing Co.<br>
    123 Main St.<br>
    Cityville, NA 12345
   </td>
   <td colspan="2">
    <strong>Customer:</strong><br>
    John Smith<br>
    321 Willow Way<br>
    Southeast Northwestershire, MA 54321
   </td>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>Name / Description</th>
   <th>Qty.</th>
   <th>@</th>
   <th>Cost</th>
  </tr>
  <tr>
   <td>Paperclips</td>
   <td>1000</td>
   <td>0.01</td>
   <td>10.00</td>
  </tr>
  <tr>
   <td>Staples (box)</td>
   <td>100</td>
   <td>1.00</td>
   <td>100.00</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <th colspan="3">Subtotal</th>
   <td> 110.00</td>
  </tr>
  <tr>
   <th colspan="2">Tax</th>
   <td> 8% </td>
   <td>8.80</td>
  </tr>
  <tr>
   <th colspan="3">Grand Total</th>
   <td>$ 118.80</td>
  </tr>
 </tfoot>
</table>

Bảng phức hợpHóa đơn #12345678914 Tháng 1 năm 2025
Trả cho
Công ty thanh toán Acme
123 phố chính
Cityville, NA 12345Khách hàng
John Smith
321 liễu đạo
Đông Nam Northershire, MA 54321Tên / Mô tảSố lượng. @CostPaperclips10000. 0110. 00Dập ghim (hộp)1001. 00100. 00Tổng phụ110. 00Thuế8%8. 80Tổng cộng$118. 80

Giới thiệu về Bố cục dựa trên bảng

Trong những ngày đầu của web, việc sử dụng bảng làm thiết bị bố cục là điều phổ biến. Trước khi các trình duyệt dựa trên tiêu chuẩn hiện đại ra đời, đây là cách dễ nhất để đảm bảo rằng các thành phần trang được sắp xếp hợp lý trên màn hình

Mẫu thiết kế này hiện được coi là rất xấu. Nó không tốt cho trải nghiệm người dùng, không tốt cho SEO và không tốt cho các nhà phát triển phải duy trì các trang

Bạn không nên sử dụng bố cục dựa trên bảng trong mọi trường hợp. Thay vào đó, hãy xem Hướng dẫn CSS của chúng tôi để bắt đầu tìm hiểu về bố cục trang web hiện đại

Tuy nhiên, điều đó không có nghĩa là bạn nên tránh sử dụng bảng - bảng nên được sử dụng bất cứ khi nào bạn cần trình bày thông tin ở định dạng bảng

Mã HTML cho bảng là gì?

Một bảng HTML bao gồm một phần tử element and one or more ,

, and

elements . Phần tử

Bảng HTML dùng để làm gì?

Mô hình bảng HTML cho phép tác giả sắp xếp dữ liệu -- văn bản, văn bản được định dạng sẵn, hình ảnh, liên kết, biểu mẫu, trường biểu mẫu, các bảng khác, v.v. -- vào hàng và cột của ô . Mỗi bảng có thể có chú thích liên quan (xem phần CAPTION) cung cấp mô tả ngắn về mục đích của bảng.

Làm thế nào để tạo bảng trong HTML với ví dụ?

To create a table in HTML, you will need to define the table with the tag. The

tag is the container of the table that specifies where the table will begin and where it ends. You can add a table row with the tag. ... Common HTML Table Tags..