Table trong HTML

Table trong HTML cho phép chúng ta sắp xếp dữ liệu trên các hàng và cột một cách dễ dàng.

HTML Tables

Một bảng trong HTML bao gồm các ô bên trong các hàng và cột

Ví dụ

<table style="width:100%">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial</td>
    <td>Francisco</td>
    <td>Mexico</td>
  </tr>
</table>

Xem kết quả

Ô trong bảng

Mỗi ô trong bảng được xác định bởi một cặp thẻ <td></td>. Nội dung của một ô trong được đặt bên trong cặp thẻ này.

Ví dụ

<table style="width:100%">
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

Xem kết quả

Lưu ý

Các phần tử <td> của bảng là vùng chứa dữ liệu. Chúng có thể chứa tất cả các loại phần tử HTML khác như: văn bản, hình ảnh, danh sách, các bảng khác, v.v.

Hàng trong bảng

Mỗi hàng trong bảng được bắt đầu và kết thúc bằng một cặp thẻ <tr></tr>.

Ví dụ

<table style="width:100%">
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

Xem kết quả

Chúng ta có thể thêm bao nhiêu hàng tùy thích trong một bảng, chỉ cần đảm bảo rằng số ô trong mỗi hàng là như nhau.

Lưu ý

Một hàng cũng có thể có ít hơn hoặc nhiều ô hơn một hàng khác, chúng ta sẽ tìm hiểu trong những bài sau.

Table headers

Chúng ta có thể sử dụng thẻ <th> để xác định các ô tiêu đề trong bảng, các văn bản trong ô tiêu đề <th> sẽ được tự động in đậm và căn giữa.

Ví dụ

<table style="width:100%">
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>