HTML - tr 标签_HTML 菜鸟教程

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

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

语法

<tr> .... </tr>

属性

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

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

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

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

<< HTML - th 标签 HTML - td 标签 >>