Hướng dẫn what is tr and td in html? - tr và td trong html là gì?

element contains one or more

Phần tử

table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
6 HTML xác định một hàng ô trong bảng. Các ô của hàng sau đó có thể được thiết lập bằng cách sử dụng hỗn hợp các phần tử
table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
7 (tế bào dữ liệu) và
table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
8 (ô tiêu đề).
table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
6
HTML element defines a row of cells in a table. The row's cells can then be established using a mix of
table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
7 (data cell) and
table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
8 (header cell) elements.

Show

Thử nó

Để cung cấp quyền kiểm soát bổ sung về cách các tế bào phù hợp với (hoặc trải dài trên) các cột, cả

table {
  border: 1px solid black;
}

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

th,
td {
  border: 1px solid black;
}
7 đều hỗ trợ thuộc tính
<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
1, cho phép bạn chỉ định bao nhiêu cột của tế bào, với mặc định là 1. tương tự, bạn có thể sử dụng
<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
2 thuộc tính trên các ô để cho biết chúng nên trải dài hơn một hàng bảng.

Điều này có thể mất một chút thực hành để có được ngay khi xây dựng bàn của bạn. Chúng tôi có một số ví dụ dưới đây, nhưng để biết thêm các ví dụ và hướng dẫn chuyên sâu, hãy xem chuỗi bảng HTML trong khu vực phát triển web tìm hiểu của chúng tôi, nơi bạn sẽ học cách sử dụng các yếu tố bảng và các thuộc tính của chúng để có được bố cục đúng và Định dạng cho dữ liệu bảng của bạn.

Thuộc tính

Yếu tố này bao gồm các thuộc tính toàn cầu. Ngoài ra còn có một số thuộc tính không dùng nữa, mà bạn nên tránh nhưng có thể cần biết khi đọc mã cũ hơn.

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

Các thuộc tính sau đây vẫn có thể được thực hiện trong các trình duyệt nhưng không còn là một phần của đặc tả HTML và có thể bị thiếu hoặc không hoạt động như mong đợi. Họ nên tránh.

<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
3Deprecated
Deprecated

Một chuỗi chỉ định cách thức bối cảnh của ô phải được căn chỉnh theo chiều ngang trong các ô trong hàng; Đây là tốc ký cho việc sử dụng

<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
3 trên mỗi ô trong hàng riêng lẻ. Các giá trị có thể là:

<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
5

Căn chỉnh nội dung của mỗi ô ở cạnh trái của nó.

<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
6

Giữa nội dung của mỗi ô giữa các cạnh trái và phải của chúng.

<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
7

Căn chỉnh nội dung của mỗi ô ở cạnh phải của nó.

<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
8

Mở rộng không gian trắng trong văn bản của mỗi ô để văn bản lấp đầy toàn bộ chiều rộng của mỗi ô (biện minh đầy đủ).

<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
9

Căn chỉnh từng ô theo hàng trên một ký tự cụ thể (sao cho mỗi hàng trong cột được cấu hình theo cách này sẽ căn chỉnh theo chiều ngang của các ô trên ký tự đó). Điều này sử dụng

<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
9 và
table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
1 để thiết lập ký tự căn chỉnh (thường là "." Hoặc "", khi căn chỉnh dữ liệu số) và số lượng ký tự nên tuân theo ký tự căn chỉnh. Loại căn chỉnh này không bao giờ được hỗ trợ rộng rãi.

Nếu không có giá trị nào được đặt rõ ràng cho

<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
3, giá trị của nút cha được kế thừa.

Lưu ý: Thay vì sử dụng thuộc tính

<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
3 lỗi thời, thay vào đó, bạn nên sử dụng thuộc tính CSS ____34 để thiết lập căn chỉnh
<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
5,
<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
6,
<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
7 hoặc
<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
8 cho các ô của hàng. Để áp dụng căn chỉnh dựa trên ký tự, đặt thuộc tính CSS
table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
4 cho ký tự căn chỉnh (chẳng hạn như
<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
0 hoặc
<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
1).
Instead of using the obsolete
<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
3 attribute, you should instead use the CSS
table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
4 property to establish
<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
5,
<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
6,
<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
7, or
<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
8 alignment for the row's cells. To apply character-based alignment, set the CSS
table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
4 property to the alignment character (such as
<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
0 or
<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
1).

<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
2Deprecated
Deprecated

Một chuỗi chỉ định một màu để áp dụng cho nền của mỗi ô của hàng. Đây có thể là giá trị thập lục phân

<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
3 hoặc
<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
4 hoặc từ khóa màu. Bỏ qua thuộc tính hoặc đặt nó thành
<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
5 trong JavaScript khiến các ô của hàng kế thừa màu nền của phần tử cha mẹ của hàng.

Lưu ý: Phần tử

table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
6 nên được tạo kiểu bằng CSS. Để tạo hiệu ứng tương tự như thuộc tính
<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
2, hãy sử dụng thuộc tính CSS
<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
8.
The
table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
6 element should be styled using CSS. To give a similar effect as the
<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
2 attribute, use the CSS property
<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
8.

<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
9Deprecated
Deprecated

Một chuỗi đặt ký tự để căn chỉnh các ô trong mỗi cột của hàng trên (mỗi hàng của mỗi hàng sử dụng cùng một ký tự được căn chỉnh với các cột khác bằng cùng một ký tự. Khi cố gắng sắp xếp các số hoặc giá trị tiền tệ. Nếu

<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
3 không được đặt thành
<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
9, thuộc tính này sẽ bị bỏ qua.

Lưu ý: Thuộc tính này không chỉ lỗi thời mà còn hiếm khi được thực hiện. Để đạt được hiệu ứng tương tự như thuộc tính

<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
9, đặt thuộc tính CSS
table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
4 thành cùng một chuỗi bạn sẽ chỉ định cho thuộc tính
<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
9, chẳng hạn như
table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
7.
This attribute is not only obsolete, but was rarely implemented anyway. To achieve the same effect as the
<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
9 attribute, set the CSS
table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
4 property to the same string you would specify for the
<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
9 property, such as
table {
  border: 1px solid black;
}

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

table {
  border: 1px solid black;
}

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

Một chuỗi chỉ ra số lượng ký tự ở đầu đuôi của dữ liệu của cột phải được hiển thị sau khi ký tự căn chỉnh được chỉ định bởi thuộc tính

<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
9. Ví dụ: khi hiển thị các giá trị tiền cho các loại tiền tệ sử dụng một phần trăm của một đơn vị (chẳng hạn như đồng đô la, được chia thành 100 xu), bạn thường chỉ định giá trị là 2, do đó song song với
<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>
9 được đặt thành
<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
0, Các giá trị trong một cột sẽ được căn chỉnh rõ ràng trên các điểm thập phân, với số lượng xu được hiển thị đúng ở bên phải của điểm thập phân.

Lưu ý: Thuộc tính này đã lỗi thời và dù sao cũng không bao giờ được hỗ trợ rộng rãi. This attribute is obsolete, and was never widely supported anyway.

<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
2Deprecated
Deprecated

Một chuỗi chỉ định sự liên kết dọc của văn bản trong mỗi ô trong hàng. Các giá trị có thể cho thuộc tính này là:

<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
3

Căn chỉnh văn bản nội dung của mỗi ô càng gần càng tốt với đáy ô, xử lý sự liên kết của các phông chữ và kích thước phông chữ khác nhau bằng cách căn chỉnh các ký tự dọc theo đường cơ sở của phông chữ được sử dụng trong hàng. Nếu tất cả các ký tự trong hàng có cùng kích thước, hiệu ứng này giống như

<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
4.

<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
4,

Vẽ văn bản trong mỗi ô của hàng càng gần với cạnh dưới của các ô đó.

<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
6

Văn bản của mỗi ô được tập trung theo chiều dọc.

<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
7

Văn bản của mỗi ô được vẽ gần nhất có thể đến cạnh trên của ô chứa.

Lưu ý: Không sử dụng thuộc tính

<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
2 lỗi thời. Thay vào đó, hãy thêm thuộc tính CSS
<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
9 vào hàng.
Don't use the obsolete
<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
2 attribute. Instead, add the CSS
<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
9 property to the row.

Ví dụ

Xem

table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

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

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}
0 để biết ví dụ về
table {
  border: 1px solid black;
}

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

Ví dụ cơ bản

Ví dụ đơn giản này cho thấy một bảng liệt kê tên của mọi người cùng với nhiều thông tin khác nhau về tư cách thành viên trong một câu lạc bộ hoặc dịch vụ.

HTML

HTML này thể hiện cấu trúc cơ bản nhất của bảng. Không có nhóm, không có ô nào trải rộng trên nhiều hàng hoặc cột, không có chú thích và chỉ có kiểu dáng cơ bản nhất để tạo ra các dòng xung quanh các thành phần của bảng cho một cái gì đó giống như sự rõ ràng.

Chỉ có bốn hàng (bao gồm một hàng tiêu đề), mỗi hàng có bốn cột (bao gồm một cột tiêu đề). Ngay cả các phần tử phần bảng không được sử dụng; Thay vào đó, trình duyệt được phép xác định điều này tự động. Chúng tôi sẽ thêm

table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

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

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}
2,
table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

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

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}
3 và
table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

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

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}
4 trong ví dụ tiếp theo.

<table>
  <tr>
    <th>Nameth>
    <th>IDth>
    <th>Member Sinceth>
    <th>Balanceth>
  tr>
  <tr>
    <td>Margaret Nguyentd>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>0.00td>
  tr>
  <tr>
    <td>Edvard Galinskitd>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td>37.00td>
  tr>
  <tr>
    <td>Hoshi Nakamuratd>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>15.00td>
  tr>
table>

CSS

CSS đơn giản này chỉ thêm một đường viền màu đen rắn xung quanh bảng và xung quanh mỗi ô của nó, bao gồm cả các ô được chỉ định bằng cả

table {
  border: 1px solid black;
}

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

th,
td {
  border: 1px solid black;
}
7. Bằng cách đó, cả tiêu đề và ô dữ liệu đều dễ dàng phân định.

table {
  border: 1px solid black;
}

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

Kết quả

Hàng và cột kéo dài

Bây giờ, chúng ta hãy giới thiệu một cột khác hiển thị ngày thành viên của người dùng kết thúc, cùng với một siêu tiêu đề phía trên ngày "đã tham gia" và "bị hủy" được gọi là "ngày thành viên". Điều này liên quan đến việc thêm cả nhịp và cột vào bảng, để các ô tiêu đề có thể kết thúc ở đúng nơi.

Kết quả

Hàng và cột kéo dài

Bây giờ, chúng ta hãy giới thiệu một cột khác hiển thị ngày thành viên của người dùng kết thúc, cùng với một siêu tiêu đề phía trên ngày "đã tham gia" và "bị hủy" được gọi là "ngày thành viên". Điều này liên quan đến việc thêm cả nhịp và cột vào bảng, để các ô tiêu đề có thể kết thúc ở đúng nơi.

  • Chúng ta thực sự nhìn vào đầu ra đầu tiên lần này:
  • Lưu ý cách khu vực tiêu đề ở đây thực sự là hai hàng, một hàng có "Tên", "ID", "Ngày thành viên" và các tiêu đề "Cân bằng" và hàng kia có "tham gia" và "bị hủy", là tiêu đề phụ " Ngày". Điều này được thực hiện bởi:
  • Có hàng "tên", "ID" và các ô tiêu đề "Cân bằng" kéo dài hai hàng bằng cách sử dụng thuộc tính
    <table>
      <tr>
        <th rowspan="2">Nameth>
        <th rowspan="2">IDth>
        <th colspan="2">Membership Datesth>
        <th rowspan="2">Balanceth>
      tr>
      <tr>
        <th>Joinedth>
        <th>Canceledth>
      tr>
      <tr>
        <th>Margaret Nguyenth>
        <td>427311td>
        <td><time datetime="2010-06-03">June 3, 2010time>td>
        <td>n/atd>
        <td>0.00td>
      tr>
      <tr>
        <th>Edvard Galinskith>
        <td>533175td>
        <td><time datetime="2011-01-13">January 13, 2011time>td>
        <td><time datetime="2017-04-08">April 8, 2017time>td>
        <td>37.00td>
      tr>
      <tr>
        <th>Hoshi Nakamurath>
        <td>601942td>
        <td><time datetime="2012-07-23">July 23, 2012time>td>
        <td>n/atd>
        <td>15.00td>
      tr>
    table>
    
    2, làm cho chúng có hai hàng cao hai hàng.

HTML

HTML này thể hiện cấu trúc cơ bản nhất của bảng. Không có nhóm, không có ô nào trải rộng trên nhiều hàng hoặc cột, không có chú thích và chỉ có kiểu dáng cơ bản nhất để tạo ra các dòng xung quanh các thành phần của bảng cho một cái gì đó giống như sự rõ ràng.

<table>
  <tr>
    <th rowspan="2">Nameth>
    <th rowspan="2">IDth>
    <th colspan="2">Membership Datesth>
    <th rowspan="2">Balanceth>
  tr>
  <tr>
    <th>Joinedth>
    <th>Canceledth>
  tr>
  <tr>
    <th>Margaret Nguyenth>
    <td>427311td>
    <td><time datetime="2010-06-03">June 3, 2010time>td>
    <td>n/atd>
    <td>0.00td>
  tr>
  <tr>
    <th>Edvard Galinskith>
    <td>533175td>
    <td><time datetime="2011-01-13">January 13, 2011time>td>
    <td><time datetime="2017-04-08">April 8, 2017time>td>
    <td>37.00td>
  tr>
  <tr>
    <th>Hoshi Nakamurath>
    <td>601942td>
    <td><time datetime="2012-07-23">July 23, 2012time>td>
    <td>n/atd>
    <td>15.00td>
  tr>
table>

Chỉ có bốn hàng (bao gồm một hàng tiêu đề), mỗi hàng có bốn cột (bao gồm một cột tiêu đề). Ngay cả các phần tử phần bảng không được sử dụng; Thay vào đó, trình duyệt được phép xác định điều này tự động. Chúng tôi sẽ thêm

table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

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

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}
2,
table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

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

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}
3 và
table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

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

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}
4 trong ví dụ tiếp theo.

CSS

table {
  border: 1px solid black;
}

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

CSS đơn giản này chỉ thêm một đường viền màu đen rắn xung quanh bảng và xung quanh mỗi ô của nó, bao gồm cả các ô được chỉ định bằng cả table { border: 1px solid black; } th, td { border: 1px solid black; } 8 và table { border: 1px solid black; } th, td { border: 1px solid black; } 7. Bằng cách đó, cả tiêu đề và ô dữ liệu đều dễ dàng phân định.

Kết quả

HTML

HTML này thể hiện cấu trúc cơ bản nhất của bảng. Không có nhóm, không có ô nào trải rộng trên nhiều hàng hoặc cột, không có chú thích và chỉ có kiểu dáng cơ bản nhất để tạo ra các dòng xung quanh các thành phần của bảng cho một cái gì đó giống như sự rõ ràng.

<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>

Chỉ có bốn hàng (bao gồm một hàng tiêu đề), mỗi hàng có bốn cột (bao gồm một cột tiêu đề). Ngay cả các phần tử phần bảng không được sử dụng; Thay vào đó, trình duyệt được phép xác định điều này tự động. Chúng tôi sẽ thêm

table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

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

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}
2,
table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

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

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}
3 và
table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

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

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}
4 trong ví dụ tiếp theo.

CSS

table {
  border: 1px solid black;
}

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

Kết quả

Hàng và cột kéo dài

Bây giờ, chúng ta hãy giới thiệu một cột khác hiển thị ngày thành viên của người dùng kết thúc, cùng với một siêu tiêu đề phía trên ngày "đã tham gia" và "bị hủy" được gọi là "ngày thành viên". Điều này liên quan đến việc thêm cả nhịp và cột vào bảng, để các ô tiêu đề có thể kết thúc ở đúng nơi.

Chúng ta thực sự nhìn vào đầu ra đầu tiên lần này:

Lưu ý cách khu vực tiêu đề ở đây thực sự là hai hàng, một hàng có "Tên", "ID", "Ngày thành viên" và các tiêu đề "Cân bằng" và hàng kia có "tham gia" và "bị hủy", là tiêu đề phụ " Ngày". Điều này được thực hiện bởi:

Kết quả

Một lần nữa, chúng ta hãy xem kết quả trước.

<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>

CSS

Lần này, HTML không thay đổi, vì vậy hãy đi sâu vào CSS.

table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

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

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}

Mặc dù chúng tôi thêm thuộc tính

<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
5 vào phần tử
table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

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

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}
0 ở đây để đặt kiểu chữ hấp dẫn trực quan hơn (hoặc kiểu chữ Sans-serif ghê tởm, tùy thuộc vào ý kiến ​​cá nhân của bạn), phần thú vị là kiểu thứ hai ở đây, nơi chúng tôi tạo kiểu
table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
6 các yếu tố nằm Trong
table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

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

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}
2 để chúng có màu nền màu xanh nhạt. Đây là một cách để nhanh chóng áp dụng màu nền cho tất cả các ô trong khu vực tiêu đề cùng một lúc.

Điều này không ảnh hưởng đến phong cách của các yếu tố

table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
8 trong cột đầu tiên, nơi chúng tôi coi các tên thành viên là một tiêu đề hàng.

Phong cách nâng cao

Bây giờ chúng ta sẽ đi tất cả, với các kiểu trên các hàng trong các khu vực tiêu đề và cơ thể, bao gồm các màu hàng xen kẽ, các ô có màu sắc khác nhau tùy thuộc vào vị trí trong một hàng, v.v.

Kết quả

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

Không có thay đổi đối với HTML một lần nữa. Xem những gì chuẩn bị đúng của HTML của bạn có thể làm cho bạn?

<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>

CSS

Lần này, HTML không thay đổi, vì vậy hãy đi sâu vào CSS.

Mặc dù chúng tôi thêm thuộc tính
<table>
  <thead>
    <tr>
      <th rowspan="2">Nameth>
      <th rowspan="2">IDth>
      <th colspan="2">Membership Datesth>
      <th rowspan="2">Balanceth>
    tr>
    <tr>
      <th>Joinedth>
      <th>Canceledth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyenth>
      <td>427311td>
      <td><time datetime="2010-06-03">June 3, 2010time>td>
      <td>n/atd>
      <td>0.00td>
    tr>
    <tr>
      <th scope="row">Edvard Galinskith>
      <td>533175td>
      <td><time datetime="2011-01-13">January 13, 2011time>td>
      <td><time datetime="2017-04-08">April 8, 2017time>td>
      <td>37.00td>
    tr>
    <tr>
      <th scope="row">Hoshi Nakamurath>
      <td>601942td>
      <td><time datetime="2012-07-23">July 23, 2012time>td>
      <td>n/atd>
      <td>15.00td>
    tr>
  tbody>
table>
5 vào phần tử
table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

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

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}
0 ở đây để đặt kiểu chữ hấp dẫn trực quan hơn (hoặc kiểu chữ Sans-serif ghê tởm, tùy thuộc vào ý kiến ​​cá nhân của bạn), phần thú vị là kiểu thứ hai ở đây, nơi chúng tôi tạo kiểu
table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
6 các yếu tố nằm Trong
table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

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

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}
2 để chúng có màu nền màu xanh nhạt. Đây là một cách để nhanh chóng áp dụng màu nền cho tất cả các ô trong khu vực tiêu đề cùng một lúc.

Điều này không ảnh hưởng đến phong cách của các yếu tố

table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
8 trong cột đầu tiên, nơi chúng tôi coi các tên thành viên là một tiêu đề hàng.

Phong cách nâng cao

table {
  border: 1px solid black;
}

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

Bây giờ chúng ta sẽ đi tất cả, với các kiểu trên các hàng trong các khu vực tiêu đề và cơ thể, bao gồm các màu hàng xen kẽ, các ô có màu sắc khác nhau tùy thuộc vào vị trí trong một hàng, v.v.

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

table {
  border: 1px solid black;
}

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

Không có thay đổi đối với HTML một lần nữa. Xem những gì chuẩn bị đúng của HTML của bạn có thể làm cho bạn?

CSS có liên quan nhiều hơn lần này. Nó không phức tạp, nhưng có rất nhiều điều đang diễn ra. Hãy phá vỡ nó.

Các kiểu bàn và cơ sở

table {
  border: 1px solid black;
}

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

table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
  border-spacing: 0;
  border-collapse: collapse;
}

Ở đây, chúng tôi đã thêm các thuộc tính
table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
  border-spacing: 0;
  border-collapse: collapse;
}
0 và
table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
  border-spacing: 0;
  border-collapse: collapse;
}
1 để loại bỏ khoảng cách giữa các ô và các đường viền sụp đổ chạm vào nhau là một đường viền thay vì cuộn lên với đường viền đôi.

Và đây là các kiểu mặc định cho tất cả các ô bảng. Bây giờ hãy tùy chỉnh!

table {
  border: 1px solid black;
}

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

Chúng ta sẽ xem xét tiêu đề hàng đầu trong hai mảnh. Đầu tiên, kiểu dáng tổng thể của tiêu đề:

table {
  border: 1px solid black;
}

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

Điều này đặt màu nền của tất cả các phần tử

table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
6 trong tiêu đề của bảng (như được chỉ định bằng cách sử dụng
table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

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

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}
2). Sau đó, chúng tôi đặt đường viền dưới cùng của tiêu đề trên cùng thành một đường rộng hai pixel. Tuy nhiên, lưu ý rằng chúng tôi đang sử dụng bộ chọn
table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
  border-spacing: 0;
  border-collapse: collapse;
}
4 để áp dụng
table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
  border-spacing: 0;
  border-collapse: collapse;
}
5 cho hàng thứ hai trong tiêu đề. Tại sao? Bởi vì tiêu đề được làm từ hai hàng được kéo dài bởi một số tế bào. Điều đó có nghĩa là thực sự có hai hàng ở đó; Áp dụng phong cách cho hàng đầu tiên sẽ không cho chúng ta kết quả dự kiến.

Các tiêu đề "đã tham gia" và "bị hủy"

Hãy tạo kiểu cho hai ô tiêu đề này với màu xanh lá cây và màu đỏ để thể hiện "tốt" của một thành viên mới và "người lập dị" của một thành viên bị hủy bỏ.

table {
  border: 1px solid black;
}

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

Ở đây, chúng tôi đào vào hàng cuối cùng của khối tiêu đề của bàn và đưa ra ô tiêu đề đầu tiên trong đó (tiêu đề "tham gia") một màu xanh lá cây và ô tiêu đề thứ hai trong đó (tiêu đề "bị hủy") màu đỏ.

Màu sắc mọi thân xe khác khác nhau

Thông thường giúp cải thiện khả năng đọc dữ liệu bảng bằng cách xen kẽ các màu hàng. Hãy thêm một chút màu sắc cho mọi hàng thậm chí:Vì chúng tôi cũng muốn cột đầu tiên nổi bật, chúng tôi cũng sẽ thêm một số kiểu dáng tùy chỉnh ở đây.
Điều này tạo kiểu cho ô tiêu đề đầu tiên trong mỗi hàng của thân bàn với
table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
4 để làm mờ tên thành viên và với màu nền hơi khác nhau.
Biện minh cho số dư
Cuối cùng, vì đó là thông lệ tiêu chuẩn đối với các giá trị tiền tệ cũng đúng trong các bảng, hãy làm điều đó ở đây.Điều này chỉ đặt thuộc tính CSS
table {
  border: 1px solid black;
}

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

th,
td {
  border: 1px solid black;
}
7 cuối cùng trong mỗi hàng cơ thể thành
table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
  border-spacing: 0;
  border-collapse: collapse;
}
9.
Tóm tắt kỹ thuậtDanh mục nội dung
Không cóNội dung cho phép
Số các yếu tố
table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
7 và/hoặc
table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
8; Các yếu tố hỗ trợ kịch bản (
table {
  border: 1px solid black;
}

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

th,
td {
  border: 1px solid black;
}
03) cũng được phép
Thiếu Thẻ
Thẻ bắt đầu là bắt buộc. Thẻ kết thúc có thể bị bỏ qua nếu phần tử
table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
6 ngay lập tức được theo sau bởi phần tử
table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
6 hoặc nếu hàng là phần tử cuối cùng trong nhóm bảng cha mẹ của nó (
table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

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

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}
2,
table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

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

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}
3 hoặc
table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

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

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}
4)
Cha mẹ được phép

table { border: 1px solid black; font: 16px "Open Sans", Helvetica, Arial, sans-serif; } thead > tr { background-color: rgb(228, 240, 245); } th, td { border: 1px solid black; padding: 4px 6px; } 0 (chỉ khi bảng không có phần tử table { border: 1px solid black; font: 16px "Open Sans", Helvetica, Arial, sans-serif; } thead > tr { background-color: rgb(228, 240, 245); } th, td { border: 1px solid black; padding: 4px 6px; } 3 trẻ em và thậm chí chỉ sau bất kỳ phần tử table { border: 1px solid black; } th, td { border: 1px solid black; } 11, table { border: 1px solid black; } th, td { border: 1px solid black; } 12 và table { border: 1px solid black; font: 16px "Open Sans", Helvetica, Arial, sans-serif; } thead > tr { background-color: rgb(228, 240, 245); } th, td { border: 1px solid black; padding: 4px 6px; } 2); Nếu không, cha mẹ phải là table { border: 1px solid black; font: 16px "Open Sans", Helvetica, Arial, sans-serif; } thead > tr { background-color: rgb(228, 240, 245); } th, td { border: 1px solid black; padding: 4px 6px; } 2, table { border: 1px solid black; font: 16px "Open Sans", Helvetica, Arial, sans-serif; } thead > tr { background-color: rgb(228, 240, 245); } th, td { border: 1px solid black; padding: 4px 6px; } 3 hoặc table { border: 1px solid black; font: 16px "Open Sans", Helvetica, Arial, sans-serif; } thead > tr { background-color: rgb(228, 240, 245); } th, td { border: 1px solid black; padding: 4px 6px; } 4

Vai trò aria ngầm
table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
17
# the-tr-element

Vai trò ARIA cho phép

Không tí nào

Giao diện DOM

  • table {
      border: 1px solid black;
    }
    
    th,
    td {
      border: 1px solid black;
    }
    
    18
  • Thông số kỹ thuật
  • Sự chỉ rõ
    • Tiêu chuẩn HTML # phần tử

Việc sử dụng TD và TR là gì?

Thẻ bảng HTML.

TD trong HTML là gì?

: Phần tử tế bào dữ liệu bảng.Phần tử HTML xác định một ô của bảng chứa dữ liệu.Nó tham gia vào mô hình bảng.The Table Data Cell element. The
HTML element defines a cell of a table that contains data. It participates in the table model.

Thẻ TR TD là gì?

Một hàng có mặt trong một thẻ, là viết tắt của 'hàng bảng'.Và mỗi ô sau đó được viết bên trong phần tử hàng bằng cách sử dụng một thẻ, viết tắt của 'dữ liệu bảng'.Mỗi ô phải có một hoặc một thẻ để hiển thị chính xác.Một ví dụ được hiển thị.

TR được sử dụng cho trong HTML là gì?

Thẻ xác định một hàng trong bảng HTML.Một phần tử chứa một hoặc nhiều hoặc các phần tử.defines a row in an HTML table. A
or elements.