Bảng trong HTML

1. Phần tử <table>

HTML cung cấp một cách tiện lợi để trình bày dữ liệu dưới dạng có cấu trúc bằng bảng. Bảng giúp tổ chức thông tin thành các hàng và cột, làm cho chúng tiện lợi cho việc đại diện các dữ liệu số, lịch trình, bảng giá và các bộ dữ liệu có cấu trúc khác. Hãy xem qua cách sử dụng các thẻ cơ bản để tạo bảng: <table>, <tr>, <td> và <th>.

Thẻ <table> là thẻ bao chứa toàn bộ bảng. Nó được sử dụng để đánh dấu điểm bắt đầu và kết thúc của bảng và chứa tất cả các thẻ khác liên quan đến bảng.

Ví dụ tạo bảng bằng thẻ <table>:

<table>
  <!-- Đây là nơi đặt các hàng và ô của bảng -->
</table>

Thẻ <table> có thể được tùy chỉnh thêm với thuộc tính border để thêm đường viền cho bảng:

<table border="1">
  <tr>
    <td>Ví dụ ô</td>
  </tr>
</table>

Ở đây thuộc tính border="1" thêm đường viền xung quanh bảng và các ô, làm cho chúng dễ nhìn thấy hơn.

2. Phần tử <tr>

Thẻ <tr> đại diện cho một hàng của bảng (table row). Mỗi hàng của bảng phải nằm trong thẻ <tr>, và thẻ này nằm trong <table>.

Ví dụ:

<table border="1">
  <tr>
    <td>Ô 1</td>
    <td>Ô 2</td>
  </tr>
  <tr>
    <td>Ô 3</td>
    <td>Ô 4</td>
  </tr>
</table>

Trong ví dụ này, bảng có hai hàng. Mỗi hàng chứa hai ô.

3. Phần tử <td>

Thẻ <td> (table data) được sử dụng để tạo các ô chứa dữ liệu trong bảng. Nó đại diện cho ô thông thường của bảng, trong đó có thể chứa văn bản, hình ảnh hoặc nội dung HTML khác.

Ví dụ sử dụng <td>:

<table border="1">
  <tr>
    <td>Ô 1</td>
    <td>Ô 2</td>
  </tr>
</table>

<table border="1">
  <tr>
    <td>Ô 1</td>
    <td>Ô 2</td>
  </tr>
</table>

Các ô <td> tạo nội dung chính của bảng và nằm trong các hàng <tr>.