Bảng HTML

Khám phá những điều cơ bản về cách làm việc với bảng HTML

Trong những ngày đầu tiên, bảng web là một phần rất quan trọng trong việc xây dựng bố cục.

Sau đó, chúng được thay thế bằng CSS và khả năng bố cục của nó, và ngày nay chúng ta có các công cụ mạnh mẽ như CSS Flexbox và CSS Grid để xây dựng bố cục. Bảng hiện chỉ được sử dụng để, đoán xem, xây dựng bảng!

Cáctablenhãn

Bạn xác định một bảng bằng cách sử dụngtablenhãn:

<table>

</table>

Bên trong bảng, chúng tôi sẽ xác định dữ liệu. Chúng tôi lý luận theo hàng, có nghĩa là chúng tôi thêm hàng vào một bảng (không phải cột). Chúng tôi sẽ xác định các cột bên trong một hàng.

Hàng

Một hàng được thêm vào bằng cách sử dụngtrvà đó là thứ duy nhất chúng tôi có thể thêm vàotablethành phần:

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

Đây là một bảng có 3 hàng.

Dòng đầu tiêncó thểgiữ vai trò của tiêu đề.

Tiêu đề cột

Tiêu đề bảng chứa tên của một cột, thường được viết bằng phông chữ đậm.

Hãy nghĩ về một tài liệu Excel / Google Trang tính. ĐỉnhA-B-C-D...đầu trang.

Column headers

Chúng tôi xác định tiêu đề bằng cách sử dụngthnhãn:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr></tr>
  <tr></tr>
</table>

Nội dung bảng

Nội dung của bảng được xác định bằng cách sử dụngtdthẻ, bên trong cái kiatrcác yếu tố:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Row 1 Column 1</td>
    <td>Row 1 Column 2</td>
    <td>Row 1 Column 3</td>
  </tr>
  <tr>
    <td>Row 2 Column 1</td>
    <td>Row 2 Column 2</td>
    <td>Row 2 Column 3</td>
  </tr>
</table>

Đây là cách trình duyệt hiển thị nó, nếu bạn không thêm bất kỳ kiểu CSS nào:

No styling

Thêm CSS này:

th, td {
  padding: 10px;
  border: 1px solid #333;
}

làm cho bảng trông giống như một bảng thích hợp:

A proper table

Kéo dài các cột và hàng

Một hàng có thể quyết định kéo dài trên 2 hoặc nhiều cột, bằng cách sử dụngcolspanthuộc tính:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td colspan="2">Row 1 Columns 1-2</td>
    <td>Row 1 Column 3</td>
  </tr>
  <tr>
    <td colspan="3">Row 2 Columns 1-3</td>
  </tr>
</table>

A colspan example

Hoặc nó có thể kéo dài hơn 2 hoặc nhiều hàng, bằng cách sử dụngrowspanthuộc tính:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">Rows 1-2 Columns 1-2</td>
    <td>Row 1 Column 3</td>
  </tr>
  <tr>
    <td>Row 2 Column 3</td>
  </tr>
</table>

A rowspan example

Tiêu đề hàng

Trước khi tôi giải thích cách bạn có thể có các tiêu đề cột, bằng cách sử dụngththẻ bên trong đầu tiêntrthẻ của bảng.

Bạn có thể thêm mộtththẻ làm phần tử đầu tiên bên trongtrđó không phải là lần đầu tiêntrcủa bảng, để có tiêu đề hàng:

<table>
  <tr>
    <th></th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <th>Row 1</th>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
  <tr>
    <th>Row 2</th>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>

Row headings

Các thẻ khác để sắp xếp bảng

Bạn có thể thêm 3 thẻ khác vào bảng để có tổ chức hơn.

Điều này là tốt nhất khi sử dụng các bảng lớn. Và để xác định đúng đầu trang và chân trang.

Những thẻ đó là

  • thead
  • tbody
  • tfoot

Họ quấntrđể xác định rõ ràng các phần khác nhau của bảng. Đây là một ví dụ sử dụng:

<table>
  <thead>
    <tr>
      <th></th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Row 1</th>
      <td>Col 2</td>
      <td>Col 3</td>
    </tr>
    <tr>
      <th>Row 2</th>
      <td>Col 2</td>
      <td>Col 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td>Footer of Col 1</td>
      <td>Footer of Col 2</td>
    </tr>
  </tfoot>
</table>

thead and tfoot

Bảng chú thích

Một cái bàn nên cócaptionthẻ mô tả nội dung của nó. Thẻ đó nên được đặt ngay sau phần mở đầutablenhãn:

<table>
  <caption>Dogs age</caption>
  <tr>
    <th>Dog</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Roger</td>
    <td>7</td>
  </tr>
</table>

Tải xuống miễn phí của tôiSổ tay HTML


Các hướng dẫn html khác: