HTML - th 标签_HTML 菜鸟教程

HTML <th> 标签指定 HTML 表格的标题单元格。它需要用作 <tr> 的子元素，该子元素本身在 <table> 标签中声明。

<td>标签用于定义标准数据单元。尽管浏览器默认将标题单元格显示为粗体且居中，但您可以使用 CSS 属性修改此行为。

<th> 标签可以包含可以在 HTML 文档正文中使用的任何 HTML 元素，包括文本、图像、表单、链接等。根据其内容的大小，表格的大小会自动修改。

语法


<th> .... </th>

属性

<th> 标签支持 HTML 的全局属性和事件属性。还接受了下面列出的一些特定属性。

属性	值	描述
abbr	text	指定标题单元格中内容的缩写
colspan	number	指定列数。
headers	header_id	指定与单元格相关的一个或多个标题单元格。
rowspan	number	指定单元格应采用的行数。
scope	col colgroup row rowgroup	指定标题单元格是一列、一行还是一组列或行的标题。

<th> 标签的示例

下面的示例将说明 <th> 标签的用法。在哪里、何时以及如何使用 <th> 标签。

创建两个标题单元格

让我们考虑以下示例，我们将在其中使用两个标题单元格创建表格。


<!DOCTYPE html>
<html>
	 <style>
			table,
			th,
			td {
				 border: 2px solid #D2B4DE;
			}
	 </style>
<body>
	 <table>
			<tr>
				 <th>Name</th>
				 <th>Age</th>
			</tr>
			<tr>
				 <td>Maya</td>
				 <td>23</td>
			</tr>
			<tr>
				 <td>Ravi</td>
				 <td>22</td>
			</tr>
			<tr>
				 <td>Ram</td>
				 <td>21</td>
			</tr>
	 </table>
</body>
</html>

在标题单元格上添加背景色

考虑到另一种情况，我们将要将背景色应用于标题单元格。


<!DOCTYPE html>
<html>
	 <style>
			table,
			th,
			td {
				 border: 2px solid #5B2C6F;
			}
	 </style>
<body>
	 <table>
			<tr>
				 <th style="background-color:#D6EAF8 ">Students</th>
				 <th style="background-color:#D5F5E3">Marks</th>
			</tr>
			<tr>
				 <td>Akhil</td>
				 <td>95</td>
			</tr>
			<tr>
				 <td>Ravi</td>
				 <td>96</td>
			</tr>
			<tr>
				 <td>Raju</td>
				 <td>99</td>
			</tr>
	 </table>
</body>
</html>

对齐标题单元格内容

在以下示例中，我们将使用 CSS 将第 <>向右对齐。


<!DOCTYPE html>
<html>
	 <style>
			table,
			th,
			td {
				 border: 1.5px solid #DE3163;
			}
	 </style>
<body>
	 <table style="width:100%">
			<tr>
				 <th style="text-align:right">Car</th>
				 <th style="text-align:right">Model</th>
			</tr>
			<tr>
				 <td>RS7</td>
				 <td>2023</td>
			</tr>
			<tr>
				 <td>AUDI</td>
				 <td>2017</td>
			</tr>
			<tr>
				 <td>BENZ</td>
				 <td>2014</td>
			</tr>
	 </table>
</body>
</html>

设置标题单元格的宽度

以下示例，我们将使用 CSS 设置 <th> 标签的宽度。


<!DOCTYPE html>
<html>
	 <style>
			table,
			th,
			td {
				 border: 2px solid #BB8FCE;
			}
	 </style>
<body>
	 <table style="width:50%">
			<tr>
				 <th style="width:25%">Name</th>
				 <th style="width:25%">Countrty</th>
			</tr>
			<tr>
				 <td>Ram</td>
				 <td>India</td>
			</tr>
			<tr>
				 <td>Maya</td>
				 <td>Greece</td>
			</tr>
			<tr>
				 <td>Mamboo</td>
				 <td>Nigeria</td>
			</tr>
	 </table>
</body>
</html>

支持的浏览器

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

<< HTML - caption 标签 HTML - tr 标签 >>