<tr>: Phần tử Hàng Bảng

Try it

<table>
  <caption>
    Alien football stars
  </caption>
  <thead>
    <tr>
      <th scope="col">Player</th>
      <th scope="col">Gloobles</th>
      <th scope="col">Za'taak</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">TR-7</th>
      <td>7</td>
      <td>4,569</td>
    </tr>
    <tr>
      <th scope="row">Khiresh Odo</th>
      <td>7</td>
      <td>7,223</td>
    </tr>
    <tr>
      <th scope="row">Mia Oolong</th>
      <td>9</td>
      <td>6,219</td>
    </tr>
  </tbody>
</table>

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

th[scope="col"] {
  background-color: #505050;
  color: white;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

td {
  text-align: center;
}

tr:nth-of-type(even) {
  background-color: #eeeeee;
}

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;
}

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 Deprecated

Xác định căn chỉnh ngang của mỗi ô hàng. Các giá trị enumerated có thể là left, center, right, justify và char. Khi được hỗ trợ, giá trị char căn chỉnh nội dung văn bản theo ký tự được định nghĩa trong thuộc tính char và độ lệch được định nghĩa bởi thuộc tính charoff. Thay vào đó hãy sử dụng thuộc tính CSS text-align, vì thuộc tính này đã không còn được dùng.

bgcolor Deprecated

Xác định màu nền của mỗi ô hà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.

char Deprecated

Xác định căn chỉnh nội dung theo một ký tự của mỗi ô hàng. Các giá trị điển hình bao gồm dấu chấm (.) khi muốn căn chỉnh số hoặc giá trị tiền tệ. Nếu align không được đặt thành char, thuộc tính này bị bỏ qua.

charoff Deprecated

Xác định số ký tự để bù đầu nội dung ô hàng từ ký tự căn chỉnh được xác định bởi thuộc tính char.

valign Deprecated

Xác định căn chỉnh dọc của mỗi ô hàng. Các giá trị enumerated có thể là baseline, bottom, middle và top. Thay vào đó hãy sử dụng thuộc tính CSS vertical-align, vì thuộc tính này đã không còn được dùng.

Ghi chú sử dụng

• Phần tử <tr> chỉ hợp lệ khi là con của phần tử <thead>, <tbody> hoặc <tfoot>.
• Nếu <tr> được đặt là con trực tiếp của phần tử <table> cha, thì phần tử cha <tbody> được suy ra và trình duyệt sẽ thêm <tbody> vào markup.
• Phần tử cha <tbody> được suy ra chỉ được hỗ trợ nếu <table> không có phần tử con <tbody> nào, và chỉ khi <tr> được bao gồm sau bất kỳ phần tử <caption>, <colgroup> và <thead> nào.
• Các pseudo-class CSS :nth-of-type, :first-of-type và :last-of-type thường hữu ích để chọn tập hợp hàng mong muốn và các ô dữ liệu và tiêu đề của chúng (các phần tử <td> và <th>).
• Khi <tr> được bao gồm là con trực tiếp của <table>, vì trình duyệt thêm <tbody> vào markup, các selector CSS như table > tr có thể không hoạt động như mong đợi hoặc không hoạt động.

Ví dụ

Xem <table> để biết ví dụ bảng đầy đủ giới thiệu các chuẩn và thực hành phổ biến.

Thiết lập hàng cơ bản

Ví dụ này minh họa một bảng với bốn hàng và ba cột, trong đó cột đầu tiên chứa tiêu đề cho các ô dữ liệu hàng.

HTML

Bốn phần tử <tr> được sử dụng để tạo bốn hàng bảng. Mỗi hàng chứa ba ô—một ô tiêu đề (<th>) và hai ô dữ liệu (<td>)—tạo ra ba cột. Thuộc tính scope được đặt trên mỗi ô tiêu đề xác định các ô chúng liên quan đến, trong ví dụ này là tất cả các ô dữ liệu trong row.

<table>
  <tbody>
    <tr>
      <th scope="row">A</th>
      <td>Alfa</td>
      <td>AL fah</td>
    </tr>
    <tr>
      <th scope="row">B</th>
      <td>Bravo</td>
      <td>BRAH voh</td>
    </tr>
    <tr>
      <th scope="row">C</th>
      <td>Charlie</td>
      <td>CHAR lee</td>
    </tr>
    <tr>
      <th scope="row">D</th>
      <td>Delta</td>
      <td>DELL tah</td>
    </tr>
  </tbody>
</table>

CSS

Pseudo-class CSS :nth-of-type được sử dụng để chọn mỗi hàng odd và đặt background-color của những hàng đó thành tông tối hơn một chút, tạo ra hiệu ứng "sọc ngựa vằn". Nền xen kẽ này làm cho các hàng dữ liệu trong bảng dễ phân tích và đọc hơn—hãy tưởng tượng có nhiều hàng và cột và cố gắng tìm một số dữ liệu trong một hàng cụ thể. Ngoài ra, các ô tiêu đề hàng (phần tử <th>) được làm nổi bật với background-color để phân biệt chúng với các ô dữ liệu (phần tử <td>).

tr:nth-of-type(odd) {
  background-color: #eeeeee;
}

tr th[scope="row"] {
  background-color: #d6ecd4;
}

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

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

Kết quả

Hàng tiêu đề

Ví dụ này mở rộng bảng cơ bản từ ví dụ trước bằng cách thêm hàng tiêu đề là hàng đầu tiên của bảng.

HTML

Một hàng bảng bổ sung (<tr>) được thêm vào như hàng đầu tiên của bảng với các ô tiêu đề cột (<th>) cung cấp tiêu đề cho mỗi cột. Chúng ta đặt hàng này trong phần tử nhóm <thead> để chỉ ra đây là tiêu đề của bảng. Thuộc tính scope được thêm vào mỗi ô tiêu đề (<th>) trong hàng đầu này để xác định rõ ràng rằng mỗi ô tiêu đề liên quan đến tất cả các ô trong cột riêng của nó, kể cả những ô trong <tbody>.

<table>
  <thead>
    <tr>
      <th scope="col">Symbol</th>
      <th scope="col">Code word</th>
      <th scope="col">Pronunciation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">A</th>
      <td>Alfa</td>
      <td>AL fah</td>
    </tr>
    <tr>
      <th scope="row">B</th>
      <td>Bravo</td>
      <td>BRAH voh</td>
    </tr>
    <tr>
      <th scope="row">C</th>
      <td>Charlie</td>
      <td>CHAR lee</td>
    </tr>
    <tr>
      <th scope="row">D</th>
      <td>Delta</td>
      <td>DELL tah</td>
    </tr>
  </tbody>
</table>

CSS

CSS gần như không thay đổi so với ví dụ trước, ngoại trừ một số kiểu bổ sung để làm nổi bật "hàng tiêu đề" để tiêu đề cột nổi bật so với các ô khác.

tr:nth-of-type(odd) {
  background-color: #eeeeee;
}

tr th[scope="col"] {
  background-color: #505050;
  color: white;
}

tr th[scope="row"] {
  background-color: #d6ecd4;
}

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

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

Kết quả

Sắp xếp hàng

Không có phương thức gốc để sắp xếp các hàng (phần tử <tr>) của <table>. Nhưng sử dụng Array.prototype.sort(), Node.removeChild và Node.appendChild, một hàm sort() tùy chỉnh có thể được triển khai trong JavaScript để sắp xếp HTMLCollection của các phần tử <tr>.

HTML

Phần tử <tbody> được sử dụng trong bảng cơ bản này để đánh dấu phần thân của bảng và bao gồm ba hàng (<tr> elements) với dữ liệu (phần tử <td>), tạo ra một cột với các số theo thứ tự giảm dần.

<table>
  <tbody>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
  </tbody>
</table>

JavaScript

Trong code JavaScript bên dưới, hàm sort() được tạo ra được gắn vào phần tử <tbody> để nó sắp xếp các ô bảng theo thứ tự giá trị tăng dần và cập nhật màn hình tương ứng.

HTMLTableSectionElement.prototype.sort = function (cb) {
  Array.from(this.rows)
    .sort(cb)
    .forEach((e) => this.appendChild(this.removeChild(e)));
};

document
  .querySelector("table")
  .tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent));

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

td {
  border: 1px solid rgb(160 160 160);
  padding: 4px 8px;
}

Kết quả

Sắp xếp hàng bằng cách nhấp vào ô tiêu đề

Ví dụ này mở rộng bảng cơ bản từ ví dụ trước bằng cách làm cho việc sắp xếp tương tác và độc lập cho nhiều cột.

HTML

Một ô dữ liệu bổ sung (phần tử <td>) được thêm vào mỗi hàng (<tr> element) trong phần thân bảng (<tbody> element) để tạo ra cột thứ hai với các chữ cái theo thứ tự tăng dần. Sử dụng phần tử <thead>, một phần đầu được thêm trước phần thân để giới thiệu hàng đầu với các ô tiêu đề bảng (phần tử <th>). Các ô tiêu đề này được sử dụng trong code JavaScript bên dưới để làm cho chúng có thể nhấp được và sau đó thực hiện sắp xếp tương ứng khi được kích hoạt qua nhấp chuột.

<table>
  <thead>
    <tr>
      <th>Numbers</th>
      <th>Letters</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3</td>
      <td>A</td>
    </tr>
    <tr>
      <td>2</td>
      <td>B</td>
    </tr>
    <tr>
      <td>1</td>
      <td>C</td>
    </tr>
  </tbody>
</table>

JavaScript

Một trình xử lý sự kiện click được thêm vào mỗi tiêu đề bảng (phần tử <th>) của mỗi <table> trong document; nó sắp xếp tất cả các hàng (<tr> elements) của <tbody> dựa trên nội dung của các ô dữ liệu (phần tử <td>) chứa trong các hàng.

const allTables = document.querySelectorAll("table");

for (const table of allTables) {
  const tBody = table.tBodies[0];
  const rows = Array.from(tBody.rows);
  const headerCells = table.tHead.rows[0].cells;

  for (const th of headerCells) {
    const cellIndex = th.cellIndex;

    th.addEventListener("click", () => {
      rows.sort((tr1, tr2) => {
        const tr1Text = tr1.cells[cellIndex].textContent;
        const tr2Text = tr2.cells[cellIndex].textContent;
        return tr1Text.localeCompare(tr2Text);
      });

      tBody.append(...rows);
    });
  }
}

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

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

th {
  background-color: #505050;
  color: white;
  cursor: pointer;
}

Kết quả

Tóm tắt kỹ thuật

Đặc tả

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

Xem thêm

• Học: Kiến thức cơ bản về bảng HTML
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>: Các phần tử liên quan đến bảng khác
• background-color: Thuộc tính CSS để đặt màu nền của mỗi ô hàng
• border: Thuộc tính CSS để kiểm soát đường viền của các ô hàng
• text-align: Thuộc tính CSS để căn chỉnh ngang nội dung mỗi ô hàng
• vertical-align: Thuộc tính CSS để căn chỉnh dọc nội dung mỗi ô hàng
• :nth-of-type, :first-of-type, :last-of-type: Các pseudo-class CSS để chọn các ô hàng mong muốn