HTML - td 标签_HTML 菜鸟教程

HTML <td> 标签用于定义表的数据单元格，并用作 <tr> 元素的子元素。<td>标签可能包含文本、表单、图像、表格等。

默认情况下，其中的内容位于左侧。表格中每一行的单元格数量与最长行中的单元格数量完全相同。如果一行中的单元格较少，浏览器将自动填充该行，并在其末尾添加空单元格。

必须将每个数据单元格添加为单独的 <td> 元素，以便在表中显示表格数据。

语法

<table>
 <tr>
 <td>..</td>
 <td>..</td>
 ...
 </tr>
</table>

属性

<td> 标签支持 HTML 的全局属性和事件属性。也接受一些特定的属性，这些属性在下面列出。

属性	值	描述
colspan	number	指定列数。
headers	header_id	指定与单元格相关的一个或多个标题单元格。
rowspan	number	指定单元格应采用的行数。

<td> 标签示例

下面的例子将说明 <td> 标签的用法。在何处、何时以及如何使用 <td> 标签，以及如何设置表格的 <td> 标签部分的样式。

创建简单表

让我们考虑以下示例，我们将在其中使用 <td> 标签。

<!DOCTYPE html>
<html>
	 <style>
			table,
			th,
			td {
				 border: 2px solid #5DADE2;
			}
	 </style>
<body>
	 <table>
			<tr>
				 <td>1</td>
				 <td>2</td>
			</tr>
			<tr>
				 <td>3</td>
				 <td>4</td>
			</tr>
			<tr>
				 <td>5</td>
				 <td>6</td>
			</tr>
	 </table>
</body>
</html>

在表格单元格上设置背景色

考虑到另一种情况，我们将要将 background-color 应用于 <td> 标签。

<!DOCTYPE html>
<html>
	 <style>
			table,
			th,
			td {
				 border: 1.5px solid #A569BD;
			}
	 </style>
<body>
	 <table>
			<tr>
				 <th>Stundent</th>
				 <th>Age</th>
			</tr>
			<tr>
				 <td style="background-color:#BFC9CA">Ram</td>
				 <td style="background-color:#F9E79F ">23</td>
			</tr>
			<tr>
				 <td style="background-color:#BFC9CA ">Raju</td>
				 <td style="background-color:#F9E79F ">22</td>
			</tr>
	 </table>
</body>
</html>

对齐表格单元格

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

<!DOCTYPE html>
<html>
	 <style>
			table,
			th,
			td {
				 border: 1.5px solid #DE3163;
			}
	 </style>
<body>
	 <table style="width:100%">
			<tr>
				 <th>Cars</th>
				 <th>Country</th>
			</tr>
			<tr>
				 <td>Toyota</td>
				 <td style="text-align:center">Japan</td>
			</tr>
			<tr>
				 <td>Nissan</td>
				 <td style="text-align:center">France</td>
			</tr>
			<tr>
				 <td>Kia</td>
				 <td style="text-align:center">South Korea</td>
			</tr>
	 </table>
</body>
</html>

设置表格单元格的宽度

下面是一个示例，我们将使用 CSS 调整表格单元格的宽度。

<!DOCTYPE html>
<html>
	 <style>
			table,
			th,
			td {
				 border: 1.5px solid #8E44AD;
			}
	 </style>
<body>
	 <table style="width:100%">
			<tr>
				 <th>Student</th>
				 <th>Department</th>
			</tr>
			<tr>
				 <td style="width:40%">Ram</td>
				 <td style="width:60%">Information Technology</td>
			</tr>
			<tr>
				 <td>Rahul</td>
				 <td>Voice Process</td>
			</tr>
			<tr>
				 <td>Maya</td>
				 <td>Non-Voice Process</td>
			</tr>
	 </table>
</body>
</html>

支持的浏览器

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

<< HTML - tr 标签 HTML - thead 标签 >>