HTML - <tr> 标签

在 HTML 表格中，一行由<tr>标签定义。然后可以使用 <td> 和 <th> 元素的组合来创建行的单元格。

每个 <tr> 标签可以有一个或多个 <th> 标签，用于指定表格的表头单元格，或者有一个或多个 <td> 标签，用于定义表格的标准单元格。<tr> 标签可以是 <thead>、<tbody> 和 <tfoot> 元素的嵌套子元素，也可以是 <table> 元素的直接子元素。

语法

<tr>
   ....
</tr>

属性

HTML tr 标签支持 HTML 的全局和事件属性。以下属性已弃用，因此请使用 CSS 属性而不是这些属性。

属性	值	描述
align	left right center justify	指定文本内容的对齐方式（已弃用）。
bgcolor	color	指定每个列单元格的背景颜色（已弃用）。
char	character	指定每个列单元格内容相对于某个字符的对齐方式（已弃用）。
charoff	number	指定列单元格内容相对于由 char 属性指定的对齐字符的偏移字符数（已弃用）。
valign	baseline bottom middle top	指定每个列单元格的垂直对齐方式（已弃用）。

HTML tr 标签示例

以下示例将说明 tr 标签的使用。在何处、何时以及如何使用 tr 标签来创建表格行。

创建简单的 HTML 表格

让我们考虑以下示例，我们将使用 <tr> 标签创建三行，一行表头行和两行数据行。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.25px solid #DE3163;
      }
   </style>
<body>
   <table>
      <tr>
         <th>University</th>
         <th>Place</th>
      </tr>
      <tr>
         <td>LPU</td>
         <td>Punjab</td>
      </tr>
      <tr>
         <td>Amity</td>
         <td>Noida</td>
      </tr>
      <tr>
      <td>Amrutha</td>
      <td>Coimbatore</td>
      </tr>
   </table>
</body>
</html>

在表格行上添加背景颜色

考虑另一种情况，我们将向 <tr> 标签应用背景颜色。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1px solid black;
      }
   </style>
<body>
   <table>
      <tr>
         <th>Bike</th>
         <th>Owner</th>
      </tr>
      <tr style="background-color:#D5F5E3;">
         <td>RX100</td>
         <td>Ravi</td>
      </tr>
      <tr style="background-color:#D2B4DE ;">
         <td>Continental</td>
         <td>Arjun</td>
      </tr>
   </table>
</body>
</html>

对齐表格行内容

在以下示例中，我们将使用 CSS 将 <tr> 标签对齐到中心。

<!DOCTYPE html>
<html>
   <style>
      table,
         th,
         td {
            border: 1.5px solid #A569BD;
         }
   </style>
<body>
   <table style="width:100%">
      <tr>
         <th>Country</th>
         <th>Capital</th>
      </tr>
      <tr style="text-align:center">
         <td>Afghanistan</td>
         <td>Kabul</td>
      </tr>
      <tr style="text-align:center">
         <td>Albania</td>
         <td>Tirane</td>
      </tr>
   </table>
</body>
</html>

跨越多行和多列

以下是一个示例，我们将使用 tr 标签上的 rowspan 和 colspan 来操作表格行的区域。

<!DOCTYPE html>
<html>
   <style>
      th,
      td {
         border: 1.5px solid #A569BD;
      }
      table {
         border-collapse: collapse;
      }
   </style>
<body>
   <table>
      <tr>
         <th rowspan=2>Name</th>
         <th colspan=2>Contact Details</th>
      </tr>
      <tr>
         <th>Mobile</th>
         <th>Landline</th>
      </tr>
      <tr>
         <td>Suresh</td>
         <td>0987654321</td>
         <td>123456</td>
      </tr>
      <tr>
         <td>Ramesh</td>
         <td>1256789543</td>
         <td>234562</td>
      </tr>
      <tr>
         <td>Kamal</td>
         <td>88976765432</td>
         <td>009875242</td>
      </tr>
   </table>
</body>
</html>

支持的浏览器

标签
tr	是	是	是	是	是

html_tags_reference.htm

打印页面

上一个

下一个