首页  >  文章  >  web前端  >  HTML 标签

HTML 标签

WBOY
WBOY原创
2024-09-04 16:26:35998浏览

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>

如您所见,我们使用 定义了列标题,与

中呈现的数据;元素,我们可以在 中使用以下属性:标签:

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>

上述代码在浏览器窗口中的输出如下,其中第一行的背景颜色已更改为绿色:

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

结论

如上所示,我们可以使用 HTML 表和 tr 元素来定义和表示结构化数据。我们可以自定义同一个表中的不同行来更改行的样式。我们还可以使用 th 和 td 来定义表头和标准表数据。我们可以进一步自定义一行的字体颜色、字体大小、字体家族、字体装饰和背景颜色。

中显示的数据单元格。 … 中) … 中表示的数据相比,它们具有粗体外观。标签,具有标准外观。

上面的示例在浏览器中查看时为我们提供了以下输出:

HTML 标签

HTML tr 标签的属性

为了进一步自定义

以上是HTML 标签的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
上一篇:div Tag in HTML下一篇:HTML abbr Tag