1. Web
  2. HTML
  3. Reference
  4. Elements
  5. <table>

<table>: Phần tử Bảng

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Phần tử <table> trong HTML biểu diễn dữ liệu dạng bảng—tức là thông tin được trình bày trong một bảng hai chiều gồm các hàng và cột chứa dữ liệu.

Try it

<table>
  <caption>
    Front-end web developer course 2021
  </caption>
  <thead>
    <tr>
      <th scope="col">Person</th>
      <th scope="col">Most interest in</th>
      <th scope="col">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Chris</th>
      <td>HTML tables</td>
      <td>22</td>
    </tr>
    <tr>
      <th scope="row">Dennis</th>
      <td>Web accessibility</td>
      <td>45</td>
    </tr>
    <tr>
      <th scope="row">Sarah</th>
      <td>JavaScript frameworks</td>
      <td>29</td>
    </tr>
    <tr>
      <th scope="row">Karen</th>
      <td>Web performance</td>
      <td>36</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Average age</th>
      <td>33</td>
    </tr>
  </tfoot>
</table>

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

thead,
tfoot {
  background-color: rgb(228 240 245);
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td:last-of-type {
  text-align: center;
}

tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}

tfoot th {
  text-align: right;
}

tfoot td {
  font-weight: bold;
}

Thuộc tính

Phần tử này bao gồm các thuộc tính toàn cục.

Thuộc tính không còn dùng

Các thuộc tính sau đây đã không còn được dùng và không nên sử dụng. Chúng được ghi lại dưới đây để tham khảo khi cập nhật code hiện có và chỉ vì lý do lịch sử.

align

Xác định căn chỉnh ngang của bảng trong phần tử cha của nó. Các giá trị enumerated có thể là left, center và right. Thay vào đó hãy sử dụng thuộc tính CSS margin-inline-start và margin-inline-end, vì thuộc tính này đã không còn được dùng.

bgcolor

Xác định màu nền của bảng. Giá trị là màu HTML; có thể là mã RGB thập lục phân 6 chữ số, có tiền tố #, hoặc một từ khóa màu. Các giá trị CSS <color> khác không được hỗ trợ. Thay vào đó hãy sử dụng thuộc tính CSS background-color, vì thuộc tính này đã không còn được dùng.

border

Xác định, dưới dạng giá trị số nguyên không âm (tính bằng pixel), kích thước của khung xung quanh bảng. Nếu đặt thành 0, thuộc tính frame được đặt thành void. Thay vào đó hãy sử dụng thuộc tính CSS border, vì thuộc tính này đã không còn được dùng.

cellpadding

Xác định khoảng cách giữa nội dung của ô và đường viền của nó. Thuộc tính này đã lỗi thời: thay vào đó hãy áp dụng thuộc tính CSS padding cho các phần tử <th> và <td>.

cellspacing

Xác định kích thước khoảng cách giữa hai ô. Thuộc tính này đã lỗi thời: thay vào đó hãy đặt thuộc tính CSS border-spacing trên phần tử <table>. Lưu ý rằng điều này không có tác dụng nếu thuộc tính CSS border-collapse của phần tử <table> được đặt thành collapse.

frame

Xác định phía nào của khung xung quanh bảng phải được hiển thị. Các giá trị enumerated có thể là void, above, below, hsides, vsides, lhs, rhs, box và border. Thay vào đó hãy sử dụng thuộc tính CSS border-style và border-width, vì thuộc tính này đã không còn được dùng.

rules

Xác định nơi hiển thị các quy tắc (đường viền) trong bảng. Các giá trị enumerated có thể là none (giá trị mặc định), groups (các phần tử <thead>, <tbody> và <tfoot>), rows (đường ngang), cols (đường dọc) và all (đường viền quanh mỗi ô). Thay vào đó hãy sử dụng thuộc tính CSS border trên các phần tử liên quan đến bảng phù hợp, cũng như trên chính <table>, vì thuộc tính này đã không còn được dùng.

summary

Xác định văn bản thay thế tóm tắt nội dung của bảng. Thay vào đó hãy sử dụng phần tử <caption>, vì thuộc tính này đã không còn được dùng.

width

Xác định chiều rộng của bảng. Thay vào đó hãy sử dụng thuộc tính CSS width, vì thuộc tính này đã không còn được dùng.

Note: Mặc dù không có đặc tả HTML nào bao gồm height là thuộc tính của <table>, một số trình duyệt hỗ trợ cách diễn giải phi tiêu chuẩn của height. Giá trị không có đơn vị đặt chiều cao tuyệt đối tối thiểu tính bằng pixel. Nếu được đặt dưới dạng giá trị phần trăm, chiều cao bảng tối thiểu sẽ tương đối với chiều cao của container cha. Thay vào đó hãy sử dụng thuộc tính CSS min-height, vì thuộc tính này đã không còn được dùng.

Bố cục trực quan của nội dung bảng

Các phần tử sau là một phần của cấu trúc bảng:

Hộp <table> thiết lập ngữ cảnh định dạng bảng. Các phần tử bên trong <table> tạo ra các hộp hình chữ nhật. Mỗi hộp chiếm một số ô bảng theo các quy tắc sau:

  1. Các hộp hàng lấp đầy bảng theo thứ tự mã nguồn từ trên xuống dưới. Mỗi hộp hàng chiếm một hàng ô.
  2. Một hộp nhóm hàng chiếm một hoặc nhiều hộp hàng.
  3. Các hộp cột được đặt cạnh nhau theo thứ tự mã nguồn. Tùy thuộc vào giá trị của thuộc tính dir, các cột được bố trí theo hướng trái sang phải hoặc phải sang trái. Một hộp cột chiếm một hoặc nhiều cột ô bảng.
  4. Một hộp nhóm cột chiếm một hoặc nhiều hộp cột.
  5. Một hộp ô có thể trải rộng nhiều hàng và cột. Tác nhân người dùng cắt ô để phù hợp với số hàng và cột có sẵn.

Các ô bảng có phần đệm. Các hộp tạo nên bảng không có lề.

Các lớp bảng và độ trong suốt

Để tạo kiểu, các phần tử bảng có thể được coi như đang được đặt trên sáu lớp chồng lên nhau:

Table element layers

Nền được đặt trên một phần tử trong một lớp sẽ chỉ hiển thị nếu các lớp phía trên nó có nền trong suốt. Một ô bị thiếu được hiển thị như thể một hộp ô bảng ẩn danh chiếm vị trí đó.

Khả năng tiếp cận

Chú thích

Bằng cách cung cấp phần tử <caption> có giá trị mô tả rõ ràng và ngắn gọn mục đích của bảng, nó giúp mọi người quyết định xem họ có cần kiểm tra phần còn lại của nội dung bảng hay bỏ qua không.

Điều này giúp ích cho những người điều hướng bằng công nghệ hỗ trợ như trình đọc màn hình, những người bị khiếm thị và những người có vấn đề về nhận thức.

Xác định phạm vi hàng và cột

Thuộc tính scope trên các ô tiêu đề (phần tử <th>) là dư thừa trong các ngữ cảnh đơn giản, vì phạm vi được suy ra. Tuy nhiên, một số công nghệ hỗ trợ có thể không suy ra chính xác, vì vậy việc chỉ định phạm vi tiêu đề có thể cải thiện trải nghiệm người dùng. Trong các bảng phức tạp, scope có thể được chỉ định để cung cấp thông tin cần thiết về các ô liên quan đến tiêu đề.

Bảng phức tạp

Công nghệ hỗ trợ như trình đọc màn hình có thể gặp khó khăn khi phân tích các bảng quá phức tạp đến mức các ô tiêu đề không thể liên kết theo hướng ngang hoặc dọc nghiêm ngặt. Điều này thường được biểu hiện qua sự hiện diện của các thuộc tính colspan và rowspan.

Nếu có thể, hãy xem xét các cách trình bày nội dung bảng thay thế, bao gồm chia nó thành một tập hợp các bảng nhỏ hơn có liên quan mà không cần dựa vào các thuộc tính colspan và rowspan. Ngoài việc giúp những người sử dụng công nghệ hỗ trợ hiểu nội dung bảng, điều này cũng có thể có lợi cho những người có vấn đề về nhận thức có thể gặp khó khăn khi hiểu các liên kết mà bố cục bảng đang mô tả.

Nếu bảng không thể chia nhỏ, hãy sử dụng kết hợp thuộc tính id và headers để liên kết theo chương trình mỗi ô bảng với tiêu đề (các phần tử <th>) mà ô đó liên kết với.

Ví dụ

Các ví dụ dưới đây bao gồm các bảng với độ phức tạp tăng dần. Xem thêm hướng dẫn dành cho người mới bắt đầu Tạo kiểu bảng để biết thông tin về tạo kiểu bảng bao gồm các kỹ thuật phổ biến, hữu ích.

Vì cấu trúc của <table> liên quan đến việc sử dụng nhiều phần tử HTML liên quan đến bảng cùng với các thuộc tính liên quan, các ví dụ sau đây nhằm cung cấp giải thích đơn giản bao gồm những điều cơ bản và tiêu chuẩn phổ biến. Thông tin bổ sung và chi tiết hơn có thể được tìm thấy trên các trang được liên kết tương ứng.

Các ví dụ bảng này minh họa cách tạo bảng dễ tiếp cận được cấu trúc bằng HTML và tạo kiểu bằng CSS.

Vì cách cấu trúc bảng HTML, markup có thể nhanh chóng phát triển. Vì lý do này, điều quan trọng là phải xác định rõ ràng mục đích và giao diện cuối cùng của bảng để tạo ra cấu trúc phù hợp. Cấu trúc logic được phát triển với markup ngữ nghĩa không chỉ dễ tạo kiểu hơn mà còn cho phép tạo các bảng hữu ích và dễ tiếp cận mà mọi người đều có thể hiểu và điều hướng, bao gồm cả công cụ tìm kiếm và người dùng công nghệ hỗ trợ.

Ví dụ đầu tiên là cơ bản, với các ví dụ tiếp theo tăng dần độ phức tạp. Đầu tiên, chúng ta sẽ phát triển một cấu trúc bảng HTML rất cơ bản. Hai ví dụ đầu tiên không chứa nhóm phần bảng như đầu, thân hoặc chân được xác định, và không có ô trải rộng hoặc mối quan hệ ô được xác định rõ ràng. Không có chú thích nào được cung cấp. Khi chúng ta làm việc qua các ví dụ, chúng sẽ được cải thiện dần để bao gồm tất cả các tính năng bảng mà một bảng dữ liệu phức tạp nên có.

Bảng cơ bản

Ví dụ này bao gồm một bảng rất cơ bản với ba hàng và hai cột. Để minh họa kiểu bảng trình duyệt mặc định, không có CSS nào được bao gồm trong ví dụ này.

HTML

Các hàng bảng được xác định bằng các phần tử <tr>, và các cột được xác định bằng các ô tiêu đề và dữ liệu bảng trong đó. Hàng đầu tiên chứa các ô tiêu đề (phần tử <th>) đóng vai trò là tiêu đề cột cho các ô dữ liệu (phần tử <td>). Mỗi phần tử (<th> hoặc <td>) trên mỗi hàng ở trong cột tương ứng của nó—tức là phần tử đầu tiên của một hàng ở trong cột đầu tiên, và phần tử thứ hai của hàng đó ở trong cột thứ hai.

html
<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Maria Sanchez</td>
    <td>28</td>
  </tr>
  <tr>
    <td>Michael Johnson</td>
    <td>34</td>
  </tr>
</table>

Kết quả

Không có CSS tùy chỉnh hay stylesheet người dùng nào được áp dụng cho bảng này. Kết quả tạo kiểu hoàn toàn đến từ stylesheet của tác nhân người dùng.

Bảng mở rộng với các ô tiêu đề

Ví dụ này mở rộng bảng cơ bản, mở rộng nội dung và thêm các kiểu CSS cơ bản.

HTML

Bảng bây giờ gồm bốn hàng (phần tử <tr>), mỗi hàng có bốn cột. Hàng đầu tiên là hàng các ô tiêu đề (hàng đầu tiên chỉ chứa các phần tử <th>). Các hàng tiếp theo bao gồm một cột tiêu đề (phần tử <th> là phần tử con đầu tiên của mỗi hàng) và ba cột dữ liệu (phần tử <td>). Vì các phần tử phân mục bảng không được sử dụng, trình duyệt tự động xác định cấu trúc nhóm nội dung, tức là tất cả các hàng được bọc trong phần thân bảng của một phần tử <tbody> ngầm định.

html
<table>
  <tr>
    <th>Name</th>
    <th>ID</th>
    <th>Member Since</th>
    <th>Balance</th>
  </tr>
  <tr>
    <th>Margaret Nguyen</th>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <th>Edvard Galinski</th>
    <td>533175</td>
    <td><time datetime="2011-01-13">January 13, 2011</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th>Hoshi Nakamura</th>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>15.00</td>
  </tr>
</table>

CSS

Với CSS, chúng ta cung cấp kiểu cơ bản để tạo đường kẻ xung quanh các thành phần của bảng để làm rõ hơn cấu trúc dữ liệu. CSS thêm đường viền đặc xung quanh <table> và quanh mỗi ô bảng, bao gồm cả những ô được chỉ định bằng các phần tử <th> và <td>, phân định mỗi ô tiêu đề và dữ liệu.

css
table {
  border: 2px solid rgb(140 140 140);
}

th,
td {
  border: 1px solid rgb(160 160 160);
}

Kết quả

Xác định mối quan hệ ô bảng

Trước khi tiến đến mở rộng bảng theo những cách nâng cao hơn, nên cải thiện khả năng tiếp cận bằng cách xác định mối quan hệ giữa các ô tiêu đề và dữ liệu (phần tử <th> và <td>).

HTML

Điều này được thực hiện bằng cách giới thiệu thuộc tính scope trên các phần tử <th> và đặt giá trị tương ứng là col (cột) hoặc row (hàng).

html
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">ID</th>
    <th scope="col">Member Since</th>
    <th scope="col">Balance</th>
  </tr>
  <tr>
    <th scope="row">Margaret Nguyen</th>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <th scope="row">Edvard Galinski</th>
    <td>533175</td>
    <td><time datetime="2011-01-13">January 13, 2011</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th scope="row">Hoshi Nakamura</th>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>15.00</td>
  </tr>
</table>

CSS và kết quả trực quan không thay đổi—sự điều chỉnh cung cấp thông tin ngữ cảnh có giá trị cho công nghệ hỗ trợ như trình đọc màn hình để giúp xác định các ô liên quan đến tiêu đề.

Note: Nếu cấu trúc bảng thậm chí còn phức tạp hơn, việc (bổ sung) sử dụng thuộc tính headers trên các phần tử <th> và <td> có thể cải thiện khả năng tiếp cận và giúp công nghệ hỗ trợ xác định mối quan hệ giữa các ô; xem Bảng phức tạp.

Chỉ định rõ ràng nhóm phần bảng

Ngoài việc cải thiện khả năng tiếp cận bằng cách xác định mối quan hệ ô, ngữ nghĩa của bảng có thể được cải thiện bằng cách giới thiệu các nhóm phần bảng.

HTML

Vì hàng đầu tiên (phần tử <tr>) chỉ chứa các ô tiêu đề cột và cung cấp tiêu đề cho phần còn lại của nội dung bảng, nó có thể được bọc trong phần tử <thead> để chỉ định rõ ràng hàng đó là phần đầu của bảng. Hơn nữa, những gì trình duyệt tự động thực hiện cũng có thể được xác định rõ ràng—phần thân của bảng, chứa dữ liệu chính của bảng, được xác định bằng cách bọc các hàng tương ứng trong phần tử <tbody>. Việc sử dụng rõ ràng phần tử <tbody> giúp trình duyệt tạo ra cấu trúc bảng đúng như ý định, tránh các kết quả không mong muốn.

html
<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">ID</th>
      <th scope="col">Member Since</th>
      <th scope="col">Balance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>

Một lần nữa, CSS và kết quả trực quan không thay đổi—việc chỉ định các nhóm phần bảng như vậy cung cấp thông tin ngữ cảnh có giá trị cho công nghệ hỗ trợ, bao gồm trình đọc màn hình và công cụ tìm kiếm, cũng như để tạo kiểu trong CSS, sẽ được trình bày trong ví dụ sau.

Trải rộng cột và hàng

Trong ví dụ này, chúng ta mở rộng bảng hơn nữa bằng cách thêm một cột và giới thiệu phần đầu nhiều hàng.

HTML

Dựa trên bảng được tạo cho đến nay, một cột mới cho "Ngày kết thúc Thành viên" được thêm vào mỗi hàng thân bằng phần tử <td>. Một hàng bổ sung (phần tử <tr>) cũng được thêm vào trong phần đầu (phần tử <thead>) để giới thiệu tiêu đề "Ngày Thành viên" như một tiêu đề cho các cột "Tham gia" và "Hủy".

Việc tạo hàng tiêu đề thứ hai liên quan đến việc thêm thuộc tính colspan và rowspan vào các phần tử <th> để phân bổ các ô tiêu đề vào đúng cột và hàng.

html
<table>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Name</th>
      <th scope="col" rowspan="2">ID</th>
      <th scope="col" colspan="2">Membership Dates</th>
      <th scope="col" rowspan="2">Balance</th>
    </tr>
    <tr>
      <th scope="col">Joined</th>
      <th scope="col">Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td><time datetime="2017-04-08">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>

Kết quả

Phần đầu bây giờ có hai hàng, một hàng với các tiêu đề (phần tử <th>) "Name", "ID", "Membership Dates" và "Balance", và một tiêu đề "Membership Dates" với hai tiêu đề con trong hàng thứ hai: "Joined" và "Canceled". Điều này được thực hiện bằng:

  • Các ô tiêu đề "Name", "ID" và "Balance" của hàng đầu tiên trải rộng cả hai hàng tiêu đề bảng bằng cách sử dụng thuộc tính rowspan, làm cho mỗi ô cao hai hàng.
  • Ô tiêu đề "Membership Dates" của hàng đầu tiên trải rộng hai cột bằng cách sử dụng thuộc tính colspan, khiến nó rộng hai cột.
  • Hàng thứ hai chỉ chứa hai ô tiêu đề "Joined" và "Canceled" vì ba cột còn lại được hợp nhất với các ô ở hàng đầu tiên trải rộng hai hàng. Hai ô tiêu đề được định vị đúng dưới tiêu đề "Membership Dates".

Chú thích bảng và tóm tắt cột

Đây là thực hành phổ biến và đáng khuyến khích khi cung cấp tóm tắt cho nội dung bảng, cho phép người dùng nhanh chóng xác định mức độ liên quan của bảng. Hơn nữa, cột "Balance" được tóm tắt bằng cách hiển thị tổng số dư của từng thành viên.

HTML

Tóm tắt bảng được thêm bằng cách sử dụng chú thích bảng (phần tử <caption>) làm phần tử con đầu tiên của <table>. Chú thích cung cấp accessible name hoặc accessible description cho bảng.

Cuối cùng, phần chân bảng (phần tử <tfoot>) được thêm vào bên dưới phần thân, với một hàng tóm tắt cột "Balance" bằng cách hiển thị tổng. Các phần tử và thuộc tính được giới thiệu trước đó được áp dụng.

html
<table>
  <caption>
    Status of the club members 2021
  </caption>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Name</th>
      <th scope="col" rowspan="2">ID</th>
      <th scope="col" colspan="2">Membership Dates</th>
      <th scope="col" rowspan="2">Balance</th>
    </tr>
    <tr>
      <th scope="col">Joined</th>
      <th scope="col">Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td><time datetime="2017-04-08">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="4">Total balance</th>
      <td>52.00</td>
    </tr>
  </tfoot>
</table>

Kết quả

Tạo kiểu bảng cơ bản

Hãy áp dụng kiểu cơ bản cho bảng để điều chỉnh font chữ và thêm background-color cho các hàng đầu và chân. HTML lần này không thay đổi, vì vậy hãy đi thẳng vào CSS.

CSS

Trong khi thuộc tính font được thêm vào phần tử <table> ở đây để đặt font chữ hấp dẫn hơn, phần thú vị là kiểu thứ hai, trong đó các phần tử <tr> nằm trong <thead> và <tfoot> được tạo kiểu thêm màu nền xanh nhạt background-color. Đây là cách nhanh chóng để áp dụng màu nền cho tất cả các ô trong các phần cụ thể cùng một lúc.

css
table {
  border: 2px solid rgb(140 140 140);
  font:
    16px "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
}

thead > tr,
tfoot > tr {
  background-color: rgb(228 240 245);
}

th,
td {
  border: 1px solid rgb(160 160 160);
}

Kết quả

Tạo kiểu bảng nâng cao

Bây giờ chúng ta sẽ đi hết, với kiểu trên các hàng trong vùng đầu và thân, bao gồm màu hàng xen kẽ, các ô có màu khác nhau tùy thuộc vào vị trí trong hàng, v.v. Hãy xem kết quả trước lần này.

Kết quả

Đây là giao diện bảng cuối cùng sẽ trông như thế nào:

Không có thay đổi nào đối với HTML. Hãy xem những gì chuẩn bị HTML cấu trúc đúng có thể làm?

CSS

CSS lần này phức tạp hơn nhiều. Không phức tạp, nhưng có nhiều thứ đang xảy ra. Hãy phân tích nó.

Ở đây các thuộc tính border-collapse và border-spacing được thêm vào để loại bỏ khoảng cách giữa các ô và thu gọn các đường viền tiếp xúc với nhau thành một đường viền duy nhất thay vì kết thúc với đường viền đôi. Ngoài ra, <caption> được đặt ở bottom của bảng bằng thuộc tính caption-side:

css
table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 2px solid rgb(140 140 140);
  font:
    16px "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
}

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

Tiếp theo, thuộc tính padding được sử dụng để cung cấp cho tất cả các ô bảng khoảng trống xung quanh nội dung của chúng. Thuộc tính vertical-align căn chỉnh nội dung của các ô tiêu đề xuống bottom của ô, có thể thấy ở các ô trong đầu trải rộng hai hàng:

css
th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 4px 6px;
}

th {
  vertical-align: bottom;
}

Quy tắc CSS tiếp theo đặt background-color của tất cả các phần tử <tr> trong đầu bảng (được chỉ định bằng <thead>). Sau đó đường viền dưới cùng của đầu được đặt là một đường rộng hai pixel. Tuy nhiên, lưu ý rằng chúng ta đang sử dụng selector :nth-of-type để áp dụng thuộc tính border-bottom cho hàng thứ hai trong đầu. Tại sao? Vì đầu được tạo từ hai hàng mà một số ô trải rộng. Điều đó có nghĩa là thực sự có hai hàng ở đó; áp dụng kiểu cho hàng đầu tiên sẽ không cho chúng ta kết quả như mong đợi:

css
thead > tr {
  background-color: rgb(228 240 245);
}

thead > tr:nth-of-type(2) {
  border-bottom: 2px solid rgb(140 140 140);
}

Hãy tạo kiểu hai ô tiêu đề "Joined" và "Canceled" với màu xanh lá cây và đỏ để biểu thị "tốt" của thành viên mới và "đáng tiếc" của thành viên hủy. Ở đây chúng ta đào vào hàng cuối cùng của phần đầu bảng bằng selector :last-of-type và cho ô tiêu đề đầu tiên trong đó (tiêu đề "Joined") màu xanh lá cây, và ô tiêu đề thứ hai trong đó (tiêu đề "Canceled") màu đỏ:

css
thead > tr:last-of-type > th:nth-of-type(1) {
  background-color: rgb(225 255 225);
}

thead > tr:last-of-type > th:nth-of-type(2) {
  background-color: rgb(255 225 225);
}

Vì cột đầu tiên cũng cần nổi bật, một số kiểu tùy chỉnh cũng được thêm vào đây. Quy tắc CSS này tạo kiểu ô tiêu đề đầu tiên trong mỗi hàng của phần thân bảng bằng thuộc tính text-align để căn trái tên thành viên, và bằng background-color hơi khác:

css
tbody > tr > th:first-of-type {
  text-align: left;
  background-color: rgb(225 229 244);
}

Thường thường, người ta cải thiện khả năng đọc của dữ liệu bảng bằng cách xen kẽ màu hàng—đôi khi được gọi là "sọc ngựa vằn". Hãy thêm một chút background-color cho mỗi hàng chẵn:

css
tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}

Vì là thực hành tiêu chuẩn khi căn phải các giá trị tiền tệ trong bảng, hãy làm điều đó ở đây. Điều này chỉ đặt thuộc tính text-align cho <td> cuối cùng trong mỗi hàng thân thành right:

css
tbody > tr > td:last-of-type {
  text-align: right;
}

Cuối cùng, một số kiểu tương tự như đầu được áp dụng cho phần chân bảng để làm nó nổi bật:

css
tfoot > tr {
  border-top: 2px dashed rgb(140 140 140);
  background-color: rgb(228 240 245);
}

tfoot th,
tfoot td {
  text-align: right;
  font-weight: bold;
}

Hiển thị bảng lớn trong không gian nhỏ

Một vấn đề phổ biến với bảng trên web là chúng không hoạt động tốt trên màn hình nhỏ khi lượng nội dung lớn, và cách làm cho chúng có thể cuộn không rõ ràng, đặc biệt khi markup có thể đến từ CMS và không thể sửa đổi để có wrapper.

Ví dụ này cung cấp một cách hiển thị bảng trong không gian nhỏ. Chúng ta đã ẩn nội dung HTML vì nó rất lớn và không có gì đáng chú ý về nó. CSS hữu ích hơn để kiểm tra trong ví dụ này.

CSS

Khi nhìn vào các kiểu này, bạn sẽ nhận thấy thuộc tính display của bảng đã được đặt thành block. Mặc dù điều này cho phép cuộn, bảng mất đi một phần tính toàn vẹn, và các ô bảng cố gắng trở nên nhỏ nhất có thể. Để giảm thiểu vấn đề này, chúng ta đã đặt white-space thành nowrap trên <tbody>. Tuy nhiên, chúng ta không làm điều này cho <thead> để tránh các tiêu đề dài buộc các cột rộng hơn cần thiết để hiển thị dữ liệu.

Để giữ các tiêu đề bảng trên trang trong khi cuộn xuống, chúng ta đã đặt position thành sticky trên các phần tử <th>. Lưu ý rằng chúng ta không đặt border-collapse thành collapse, vì nếu làm vậy, tiêu đề không thể được tách đúng cách khỏi phần còn lại của bảng.

Vì <table> có kích thước cố định, overflow đặt thành auto là phần quan trọng ở đây, vì nó làm cho bảng có thể cuộn.

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

table {
  overflow: auto;
  width: 100%;
  max-width: 400px;
  height: 240px;
  display: block;
  margin: 0 auto;
  border-spacing: 0;
}

tbody {
  white-space: nowrap;
}

th,
td {
  padding: 5px 10px;
  border-top-width: 0;
  border-left-width: 0;
}

th {
  position: sticky;
  top: 0;
  background: white;
  vertical-align: bottom;
}

th:last-child,
td:last-child {
  border-right-width: 0;
}

tr:last-child td {
  border-bottom-width: 0;
}

Kết quả

Tóm tắt kỹ thuật

Danh mục nội dung Nội dung luồng
Nội dung được phép Theo thứ tự này:
  1. phần tử <caption> tùy chọn,
  2. không hoặc nhiều phần tử <colgroup>,
  3. phần tử <thead> tùy chọn,
  4. một trong những thứ sau:
    • không hoặc nhiều phần tử <tbody>
    • một hoặc nhiều phần tử <tr>
  5. phần tử <tfoot> tùy chọn
Bỏ qua thẻ Không được bỏ qua, cả thẻ mở và thẻ đóng đều bắt buộc.
Phần tử cha được phép Bất kỳ phần tử nào chấp nhận nội dung luồng
Vai trò ARIA ngầm định table
Vai trò ARIA được phép Bất kỳ
Giao diện DOM HTMLTableElement

Đặc tả

Specification
HTML
# the-table-element

Tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content