Trong series này:

HTML Cấu trúc trang HTML Văn bản và định dạng Liên kết và điều hướng Hình ảnh và đa phương tiện Danh sách Bảng dữ liệu Form và input Phần tử Semantic HTML5 Audio, Video và Canvas Meta tags và phần head
Sửa trang này

Bảng dữ liệu

Cấu trúc bảng cơ bản

Một bảng HTML được xây dựng từ các hàng (<tr>) và các ô. Có hai loại ô:

  • <th> — ô tiêu đề (table header), in đậm và căn giữa theo mặc định
  • <td> — ô dữ liệu (table data)
<table>
  <tr>
    <th>Tên</th>
    <th>Tuổi</th>
  </tr>
  <tr>
    <td>An</td>
    <td>20</td>
  </tr>
</table>

Phân nhóm hàng: <thead>, <tbody>, <tfoot>

Phân nhóm giúp code rõ ràng hơn và hỗ trợ in bảng nhiều trang:

Phần tử Vai trò
<thead> Nhóm các hàng tiêu đề
<tbody> Nhóm các hàng dữ liệu chính
<tfoot> Nhóm các hàng tổng kết (tổng, ghi chú)

Tiêu đề bảng — <caption>

Đặt ngay sau thẻ mở <table>, hiển thị phía trên bảng:

<table>
  <caption>Bảng thống kê học sinh</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Thuộc tính scope (Accessibility)

Thuộc tính scope trên <th> giúp trình đọc màn hình hiểu hướng của tiêu đề:

<th scope="col">Tên sản phẩm</th>  <!-- tiêu đề cột -->
<th scope="row">Tổng cộng</th>     <!-- tiêu đề hàng -->

Gộp ô: colspan và rowspan

Thuộc tính Gộp theo Ví dụ
colspan="N" N cột theo chiều ngang <td colspan="2">
rowspan="N" N hàng theo chiều dọc <td rowspan="3"> 
<td colspan="2">Ô này chiếm 2 cột</td>
<td rowspan="3">Ô này chiếm 3 hàng</td>

Ví dụ — Bảng đầy đủ cấu trúc

    Kết quả 
    <table>
  <caption>Bảng điểm học kỳ I</caption>
  <thead>
    <tr>
      <th scope="col">Môn học</th>
      <th scope="col">Điểm giữa kỳ</th>
      <th scope="col">Điểm cuối kỳ</th>
      <th scope="col">Điểm trung bình</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Toán</td>
      <td>8.5</td>
      <td>9.0</td>
      <td>8.8</td>
    </tr>
    <tr>
      <td>Văn</td>
      <td>7.0</td>
      <td>7.5</td>
      <td>7.3</td>
    </tr>
    <tr>
      <td>Tiếng Anh</td>
      <td>9.0</td>
      <td>8.5</td>
      <td>8.7</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Trung bình tổng</th>
      <td>8.2</td>
      <td>8.3</td>
      <td>8.3</td>
    </tr>
  </tfoot>
</table>

    table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}

caption {
  font-weight: bold;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: left;
}

thead {
  background: #f0f0f0;
}

tfoot {
  background: #e8f4e8;
  font-weight: bold;
}

tbody tr:hover {
  background: #fafafa;
}

    Ví dụ — colspan và rowspan

      Kết quả 
      <table>
  <caption>Thời khóa biểu</caption>
  <thead>
    <tr>
      <th scope="col">Tiết</th>
      <th scope="col">Thứ 2</th>
      <th scope="col">Thứ 3</th>
      <th scope="col">Thứ 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Tiết 1</th>
      <td rowspan="2">Toán (2 tiết)</td>
      <td>Văn</td>
      <td>Anh</td>
    </tr>
    <tr>
      <th scope="row">Tiết 2</th>
      <td>Lý</td>
      <td>Hóa</td>
    </tr>
    <tr>
      <th scope="row">Tiết 3</th>
      <td colspan="3">Thể dục (cả lớp — 3 phòng)</td>
    </tr>
  </tbody>
</table>

      table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: center;
}

thead {
  background: #f0f0f0;
}

td[rowspan] {
  background: #fff3cd;
  vertical-align: middle;
}

td[colspan] {
  background: #d4edda;
  font-style: italic;
}

      Bình luận