Bảng HTML: Hướng Dẫn Bước Để Bước

Bảng HTML trình bày dữ liệu theo hàng và cột. Sử dụng thẻ <table> kết hợp <tr> (hàng), <td> (ô dữ liệu), <th> (ô tiêu đề).

Bảng giúp so sánh, tra cứu dữ liệu dễ dàng: lịch xe buýt, bảng thành phần dinh dưỡng... HTML dùng bảng để trình bày dữ liệu có cấu trúc.

Hướng dẫn này bao gồm: tạo bảng cơ bản, định dạng (border, collapse, căn lề), gộp ô (colspan, rowspan), cấu trúc thead/tbody/tfoot, và caption.

Tạo Bảng HTML Cơ Bản

Ví dụ bảng giá cà phê:

<table>
  <tr>
    <th>Cà Phê</th>
    <th>Giá</th>
  </tr>
  <tr>
    <td>Espresso</td>
    <td>$2.00</td>
  </tr>
  <tr>
    <td>Cappuccino</td>
    <td>$2.50</td>
  </tr>
  <tr>
    <td>Latte</td>
    <td>$2.75</td>
  </tr>
</table>

Giải thích: <table> khởi tạo bảng. Hàng đầu dùng <th> cho tiêu đề cột. Các hàng sau dùng <td> cho dữ liệu.

Định Dạng Bảng Với CSS

Viền (Borders)

Mặc định bảng không có viền. Thêm CSS:

table, th, td { border: 1px solid black; }

Để gộp viền thành một đường duy nhất:

table { border-collapse: collapse; }

Căn Lề Tiêu Đề (Align Headings)

Mặc định <th> căn giữa. Để căn trái:

th { text-align: left; }

Gộp Ô Nhiều Hàng/Cột (Colspan & Rowspan)

colspan: gộp ngang (nhiều cột).
rowspan: gộp dọc (nhiều hàng).

Ví dụ gộp cột "Giá" thành 2 cột con:

<table>
  <tr>
    <th>Cà Phê</th>
    <th colspan="2">Giá</th>
  </tr>
  <tr>
    <td>Espresso</td>
    <td>$2.00 (mới)</td>
    <td>$2.00 (cũ)</td>
  </tr>
</table>

Ví dụ gộp hàng cho nhãn "Giá":

<table>
  <tr>
    <th>Cà Phê</th>
    <td>Espresso</td>
  </tr>
  <tr>
    <th rowspan="2">Giá</th>
    <td>$2.00 (thường)</td>
  </tr>
  <tr>
    <td>$1.80 (giảm)</td>
  </tr>
</table>

Cấu Trúc: <thead>, <tbody>, <tfoot>

Giúp mã rõ ràng, dễ bảo trì:

<table>
  <thead>
    <tr><th>Cà Phê</th><th>Giá</th></tr>
  </thead>
  <tbody>
    <tr><td>Espresso</td><td>$2.00</td></tr>
    <tr><td>Cappuccino</td><td>$2.50</td></tr>
  </tbody>
  <tfoot>
    <tr><th>Cập nhật</th><td>09/01/2020</td></tr>
  </tfoot>
</table>

Chú Thích Bảng (<caption>)

Thẻ <caption> đặt ngay sau <table> để thêm tiêu đề:

<table>
  <caption>Thực Đơn Cà Phê</caption>
  <tr><th>Cà Phê</th><th>Giá</th></tr>
  ...
</table>

Kết Luận

Bài viết đã bao gồm: tạo bảng, định dạng cơ bản, gộp ô, cấu trúc ngữ nghĩa, và caption. Bạn đã nắm vững kiến thức để làm việc với bảng HTML!