HTML 提供了多种选项来表示结构化和非结构化数据。它允许我们在段落、有序列表、无序列表、表格等中呈现数据。在本主题中，我们将学习 HTML tr 标签。
创建 HTML 表格，在表格标签
中定义表格行和单元格。 。表中的行由表示为 的 tr 标记定义。 ……
。 HTML 中的行包含 中显示的数据单元格。 … | 标签（如果它是标准数据单元格或在
中） … | 如果它是标题单元格，则标记。
HTML tr 标签的语法
表格、表格行和表格单元格层次结构的语法如下：
语法：
<table>
<tr>
<th> … </th>
<td> …. </td>
</tr>
</table>
登录后复制
让我们回顾一下下面的例子：
示例：
<!DOCTYPE html>
<html>
<head>
<title>This is a table example</title>
<style>
th, td {
padding : 10px;
border : 1px solid #666;
}
</style>
</head>
<body>
<table style=" width:80%; margin : 30px auto; border-collapse : collapse;">
<tr>
<th> Sr. No. </th>
<th> Popular programming languages </th>
<th> Description </th>
</tr>
<tr>
<td> 1 </td>
<td> Java </td>
<td> Java has been holding position 1 or 2 for the world’s most popular languages since it’s inception. It was created in mid 90s and since then many large and small companies have adopted it for developing desktop and web applications</td>
</tr>
<tr>
<td> 2</td>
<td> C </td>
<td>C is a popular language for cars, sensors and embedded systems. It has been one of the top most popular languages mainly due to its universal compatibility</td>
</tr>
<tr>
<td>3</td>
<td>Python</td>
<td>Python is very popular in today’s era specially since it support quick development of application based on machine learning, big data and AI.</td>
</tr>
</table>
</body>
</html>登录后复制
如您所见，我们使用 定义了列标题，与 | 中表示的数据相比，它们具有粗体外观。标签，具有标准外观。
上面的示例在浏览器中查看时为我们提供了以下输出：
HTML tr 标签的属性
为了进一步自定义
|
中呈现的数据；元素，我们可以在
中使用以下属性：标签：
1.对齐
使用align属性，我们可以自定义
中的文本对齐方式。标签。它可以使用以下值。
但是，HTML 5 不支持此属性。
2.背景
我们可以使用 style 标签中的 background 属性来设置行的背景。让我们看一下下面的示例。
代码：
<!DOCTYPE html>
<html>
<head>
<title>This is a table example</title>
<style>
th, td {
padding : 10px;
border : 1px solid #666;
}
</style>
</head>
<body>
<table style=" width:80%; margin : 30px auto; border-collapse : collapse;">
<tr>
<th> Sr. No. </th>
<th> Popular programming languages </th>
<th> Description </th>
</tr>
<tr style="background : #00ff3787"> // here we are setting the back ground color to #00ff3787
<td> 1 </td>
<td> Java </td>
<td> Java has been holding position 1 or 2 for the world’s most popular languages since it’s inception. It was created in mid 90s and since then many large and small companies have adopted it for developing desktop and web applications</td>
</tr>
<tr>
<td> 2</td>
<td> C </td>
<td>C is a popular language for cars, sensors and embedded systems. It has been one of the top most popular languages mainly due to its universal compatibility</td>
</tr>
<tr>
<td>3</td>
<td>Python</td>
<td>Python is very popular in today’s era specially since it support quick development of application based on machine learning, big data and AI.</td>
</tr>
</table>
</body>
</html>登录后复制
上述代码在浏览器窗口中的输出如下，其中第一行的背景颜色已更改为绿色：
3.颜色
我们可以通过使用 tr 标签中的 color 属性来操作箭头中文本的颜色。让我们将其中一行的字体颜色更改为灰色。
代码：
<!DOCTYPE html>
<html>
<head>
<title>This is an example of HTML table</title>
<style>
th, td {
padding : 10px;
border : 1px solid #666;
}
</style>
</head>
<body>
<table style=" width:80%; margin : 30px auto; border-collapse : collapse;">
<tr>
<th> Sr. No. </th>
<th> Popular programming languages in 2019 </th>
<th> Description </th>
</tr>
<tr style="color : grey"> // here we are setting the font color to grey
<td> 1 </td>
<td> Java </td>
<td> Java has been holding position 1 or 2 for the world’s most popular languages since it’s inception. It was created in mid 90s and since then many large and small companies have adopted it for developing desktop and web applications</td>
</tr>
<tr>
<td> 2</td>
<td> C </td>
<td>C is a popular language for cars, sensors and embedded systems. It has been one of the top most popular languages mainly due to its universal compatibility</td>
</tr>
<tr>
<td>3</td>
<td>Python</td>
<td>Python is very popular in today’s era specially since it support quick development of application based on machine learning, big data and AI.</td>
</tr>
</table>
</body>
</html>登录后复制
上述代码在浏览器窗口中的输出如下所示，我们可以发现应用于表格第一行的字体颜色：
结论
如上所示，我们可以使用 HTML 表和 tr 元素来定义和表示结构化数据。我们可以自定义同一个表中的不同行来更改行的样式。我们还可以使用 th 和 td 来定义表头和标准表数据。我们可以进一步自定义一行的字体颜色、字体大小、字体家族、字体装饰和背景颜色。
以上是HTML 标签的详细内容。更多信息请关注PHP中文网其他相关文章！
