HTML <tr> nhãn

Định nghĩa và cách sử dụng

<tr> thẻ định nghĩa dòng trong bảng HTML.

<tr> Đối tượng chứa một hoặc nhiều <th> hoặc <td> Đối tượng.

Xin xem thêm:

Giáo trình HTML:Bảng HTML

Tài liệu tham khảo HTML DOM:Đối tượng TableRow

Giáo trình CSS:Cài đặt phong cách bảng

Mô hình

Ví dụ 1

Một bảng HTML ba dòng đơn giản; một dòng tiêu đề và hai dòng dữ liệu:

<table>
  <tr>
    <th>Tháng</th>
    <th>Lưu trữ</th>
  </tr>
  <tr>
    <td>Tháng Một</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Tháng Hai</td>
    <td>￥4500</td>
  </tr>
</table>

Thử nghiệm trực tiếp

Ví dụ 2

Làm thế nào để canh: <tr> Nội dung trong đó (sử dụng CSS):

<table style="width:100%">
  <tr>
    <th>Tháng</th>
    <th>Lưu trữ</th>
  </tr>
  <tr style="text-align:right">
    <td>Tháng Một</td>
    <td>￥3400</td>
  </tr>
</table>

Thử nghiệm trực tiếp

Ví dụ 3

Làm thế nào để thêm màu nền cho dòng bảng (sử dụng CSS):

<table>
  <tr style="background-color:#FF0000">
    <th>Tháng</th>
    <th>Lưu trữ</th>
  </tr>
  <tr>
    <td>Tháng Một</td>
    <td>￥3400</td>
  </tr>
 </table>

Thử nghiệm trực tiếp

Ví dụ 4

Làm thế nào để canh ngang dọc: <tr> Nội dung trong đó (sử dụng CSS):

<table style="height:200px">
  <tr  style="vertical-align:top">
    <th>Tháng</th>
    <th>Lưu trữ</th>
  </tr>
  <tr style="vertical-align:bottom">
    <td>Tháng Một</td>
    <td>￥3400</td>
  </tr>
</table>

Thử nghiệm trực tiếp

Ví dụ 5

Làm thế nào để tạo tiêu đề bảng:

<table>
  <tr>
    <th>Tên</th>
    <th>Điện tử</th>
    <th>Điện thoại</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Thử nghiệm trực tiếp

Ví dụ 6

Làm thế nào để tạo bảng có tiêu đề:

<table>
  <caption>Lưu trữ hàng tháng</caption>
  <tr>
    <th>Tháng</th>
    <th>Lưu trữ</th>
  </tr>
  <tr>
    <td>Tháng Một</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Tháng Hai</td>
    <td>￥4500</td>
  </tr>
</table>

Thử nghiệm trực tiếp

Ví dụ 7

Làm thế nào để định nghĩa ô bảng vượt qua nhiều dòng hoặc cột:

<table>
  <tr>
    <th>Tên</th>
    <th>Điện tử</th>
    <th colspan="2">Điện thoại</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Thử nghiệm trực tiếp

Thuộc tính toàn cục

<tr> Nhãn còn hỗ trợ Thuộc tính toàn cục trong HTML.

Thuộc tính sự kiện

<tr> Nhãn còn hỗ trợ Thuộc tính sự kiện trong HTML.

Cài đặt CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị các giá trị mặc định sau <tr> Thực thể:

tr {
  display: hàng bảng;
  vertical-align: di truyền;
  border-color: di truyền;
}

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ