Bảng trong HTML: hàng, cột, ô tiêu đề và caption

Cách tạo bảng trong HTML

Bảng (table) là một phần tử <table> gồm các hàng (<tr>), và mỗi hàng gồm các ô: <th> cho ô tiêu đề và <td> cho ô dữ liệu.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table</title>
  <style>
    th, td { border: 1px solid #9ca3af; padding: 6px 10px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Language</th>
      <th>Year</th>
    </tr>
    <tr>
      <td>Ada</td>
      <td>Python</td>
      <td>2023</td>
    </tr>
    <tr>
      <td>Linus</td>
      <td>C</td>
      <td>2021</td>
    </tr>
  </table>
</body>
</html>

Bản thân bảng không có viền; quy tắc CSS duy nhất kia thêm viền để bạn nhìn thấy các ô. Các cột hình thành từ các ô: ô đầu tiên của mỗi hàng là cột một, ô thứ hai là cột hai, cứ thế tiếp tục. Mỗi hàng nên có cùng số ô. Xóa một <td> thì hàng đó kết thúc sớm, để lại một khoảng trống.

Ô <th> mặc định in đậm và căn giữa. Đó chỉ là vẻ ngoài; điều quan trọng là chúng là nhãn, và đó là nội dung của phần tiếp theo.

Các phần tử của bảng

Viền được trình bày ở viền bảng trong HTML, còn ô trải qua nhiều cột hoặc nhiều hàng ở colspan và rowspan.

Ô tiêu đề, scope và caption

Một bảng có tiêu đề ở hàng trên cùng và dọc cạnh bên cần cho biết mỗi tiêu đề chỉ về hướng nào. scope="col" gắn nhãn cho cột bên dưới, scope="row" gắn nhãn cho hàng bên cạnh. <caption> cho bảng một tiêu đề hiển thị:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headers and caption</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    caption { font-weight: bold; padding-bottom: 6px; }
    th, td { border: 1px solid #9ca3af; padding: 6px 10px; }
    thead th { background: #e5e7eb; }
    tbody th { text-align: start; }
  </style>
</head>
<body>
  <table>
    <caption>Opening hours</caption>
    <thead>
      <tr>
        <th scope="col">Day</th>
        <th scope="col">Opens</th>
        <th scope="col">Closes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Monday</th>
        <td>9:00</td>
        <td>17:00</td>
      </tr>
      <tr>
        <th scope="row">Saturday</th>
        <td>10:00</td>
        <td>14:00</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Với mã này, trình đọc màn hình khi tới ô 14:00 có thể đọc "Saturday, Closes, 14:00", nên con số không bao giờ bị đọc trơ trọi. Với bảng đơn giản chỉ có một hàng tiêu đề, trình duyệt thường tự suy ra tiêu đề mà không cần scope, nhưng viết thêm chẳng tốn gì và loại bỏ được việc phải đoán.

Caption cũng là thứ trình đọc màn hình đọc lên khi tới bảng. Hãy ưu tiên caption hơn một tiêu đề đặt phía trên bảng, vốn không gắn kết gì với bảng.

thead, tbody và tfoot

Ba nhóm này chia các hàng thành phần đầu, phần thân và phần chân. Phần chân là chỗ đặt hàng tổng:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>thead tbody tfoot</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 6px 12px; border-bottom: 1px solid #e5e7eb; }
    thead th { border-bottom: 2px solid #111827; text-align: start; }
    tfoot td, tfoot th { border-top: 2px solid #111827; font-weight: bold; }
    .num { text-align: end; font-variant-numeric: tabular-nums; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Item</th><th scope="col" class="num">Price</th></tr>
    </thead>
    <tbody>
      <tr><td>Notebook</td><td class="num">4.50</td></tr>
      <tr><td>Pens (10)</td><td class="num">11.20</td></tr>
      <tr><td>Backpack</td><td class="num">39.00</td></tr>
    </tbody>
    <tfoot>
      <tr><th scope="row">Total</th><td class="num">54.70</td></tr>
    </tfoot>
  </table>
</body>
</html>

Hai chi tiết giúp các con số dễ đọc: text-align: end căn thẳng dấu thập phân (mọi giá đều có hai chữ số thập phân), và font-variant-numeric: tabular-nums cho mọi chữ số cùng độ rộng.

Nếu bạn viết <tr> trực tiếp bên trong <table>, như trong ví dụ đầu tiên, trình duyệt vẫn tự thêm <tbody> bao quanh các hàng. Đó là lý do một selector CSS như table > tr không bao giờ khớp với gì: trên trang, các hàng nằm bên trong tbody. Hãy dùng table tr, hoặc tự viết <tbody>.

Định dạng bảng: hàng xen màu, hover và chiều rộng

:nth-child tô màu xen kẽ các hàng, :hover làm nổi hàng đang ở dưới con trỏ chuột, và width: 100% kéo bảng rộng hết khối chứa:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Striped table</title>
  <style>
    table { width: 100%; border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 8px 12px; text-align: start; }
    thead th { background: #2563eb; color: #fff; }
    tbody tr:nth-child(even) { background: #f3f4f6; }
    tbody tr:hover { background: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Course</th><th scope="col">Lessons</th><th scope="col">Level</th></tr>
    </thead>
    <tbody>
      <tr><td>HTML</td><td>40</td><td>Beginner</td></tr>
      <tr><td>CSS</td><td>55</td><td>Beginner</td></tr>
      <tr><td>JavaScript</td><td>120</td><td>Beginner</td></tr>
      <tr><td>React</td><td>60</td><td>Intermediate</td></tr>
    </tbody>
  </table>
</body>
</html>

text-align: start căn chữ tiêu đề thẳng với dữ liệu bên dưới; nếu không, th sẽ căn giữa. Dùng start thay vì left giữ cho cách căn đúng với các ngôn ngữ viết từ phải sang trái.

Bảng responsive cuộn được

Bảng không thể co nhỏ hơn chiều rộng nội dung của nó. Trên điện thoại, một bảng rộng sẽ đẩy cả trang lệch sang ngang. Thay vào đó, hãy bọc bảng trong một khối chứa cuộn được:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scrolling table</title>
  <style>
    .scroll { max-width: 300px; overflow-x: auto; border: 1px solid #e5e7eb; }
    table { border-collapse: collapse; white-space: nowrap; }
    th, td { padding: 6px 12px; border-bottom: 1px solid #e5e7eb; text-align: start; }
  </style>
</head>
<body>
  <div class="scroll" tabindex="0" role="region" aria-label="Plans">
    <table>
      <thead>
        <tr><th scope="col">Plan</th><th scope="col">Price</th><th scope="col">Courses</th><th scope="col">Certificates</th><th scope="col">Support</th></tr>
      </thead>
      <tbody>
        <tr><td>Free</td><td>0</td><td>Some</td><td>No</td><td>Community</td></tr>
        <tr><td>Pro</td><td>12 per month</td><td>All</td><td>Yes</td><td>Email</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Ở đây khối chứa bị giới hạn 300 pixel để đóng vai màn hình điện thoại; hãy cuộn nó sang ngang. tabindex="0" cho người dùng bàn phím focus vào khối chứa và cuộn nó bằng phím mũi tên, còn role="region" cùng aria-label đặt tên cho điểm dừng đó.

Bảng dành cho dữ liệu

Hãy dùng bảng khi nội dung thật sự có hàng và cột: bảng giá, lịch, so sánh, kết quả. Đừng dùng bảng để đặt các thứ cạnh nhau trên trang. Bảng dàn bố cục làm trình đọc màn hình bối rối, vì nó đọc ra những hàng và cột chẳng có nghĩa gì, và không thể thích ứng với màn hình nhỏ. Bố cục là việc của CSS flexbox và grid.

Lỗi thường gặp

• Các hàng có số ô khác nhau. Hàng ngắn kết thúc sớm và các cột không còn thẳng hàng.
• Dùng <td> có chữ đậm làm tiêu đề. Hãy dùng <th> để tiêu đề là nhãn thật sự.
• Các thuộc tính lỗi thời border, cellpadding, cellspacing, bgcolor và align. Hãy dùng CSS.
• Đặt nội dung trực tiếp trong <tr> hoặc <table>, bên ngoài mọi ô. Trình duyệt đưa nội dung đó ra khỏi bảng, thường là lên phía trên.
• Một tiêu đề phía trên bảng thay vì <caption>.
• table > tr trong CSS. Trình duyệt đã chèn thêm <tbody>; hãy viết table tr hoặc tbody tr.