HTML <td> 标签
例子
一个简单的 HTML 表格，有两行和四个表格单元格：
<table>
<tr>
<td>单元格A</td>
<td>单元格B</td>
</tr>
<tr>
<td>细胞C</td>
<td>单元格D</td>
</tr>
</table>
亲自尝试 »
下面有更多“自己尝试”的示例。
定义和用法
这 <td> 标签定义 HTML 表中的标准数据单元。
HTML 表格有两种单元格：
- 标题单元格 - 包含标题信息（使用 <th> 元素）
- 数据单元格 - 包含数据（使用
<td>元素）
文本 <td> 元素默认是常规且左对齐的。
文本<th>元素默认为粗体且居中。
浏览器支持
| 元素 | |||||
|---|---|---|---|---|---|
| <td> | 是的 | 是的 | 是的 | 是的 | 是的 |
属性
| 属性 | 价值 | 描述 |
|---|---|---|
| 科尔斯潘 | 数字 | 指定单元格应跨越的列数 |
| 标题 | header_id | 规定与单元格相关的一个或多个标题单元格 |
| 行跨度 | 数字 | 设置单元格应跨越的行数 |
全局属性
这 <td> 标签还支持HTML 中的全局属性.
事件属性
这 <td> 标签还支持HTML 中的事件属性.
更多示例
例子
如何对齐内部内容<td> （使用 CSS）：
<table style="width:100%">
<tr>
<th>月</th>
<th>储蓄</th>
</tr>
<tr>
<td>一月</td>
<td style="text-align:right">100美元</td>
</tr>
<tr>
<td>二月</td>
<td style="text-align:right">80美元</td>
</tr>
</table>
亲自尝试 »
例子
如何给表格单元格添加背景颜色（使用 CSS）：
<table>
<tr>
<th>月</th>
<th>储蓄</th>
</tr>
<tr>
<td style="background-color:#FF0000">一月</td>
<td style="background-color:#00FF00">100美元</td>
</tr>
</table>
亲自尝试 »
例子
如何设置表格单元格的高度（使用 CSS）：
<table>
<tr>
<th>月</th>
<th>储蓄</th>
</tr>
<tr>
<td style="height:100px">一月</td>
<td style="height:100px">100美元</td>
</tr>
</table>
亲自尝试 »
例子
如何指定表格单元格不换行（使用 CSS）：
<table>
<tr>
<th>诗</th>
</tr>
<tr>
<td style="white-space:nowrap">永远不要增加解释任何事情所需的实体数量</td>
</tr>
</table>
亲自尝试 »
例子
如何垂直对齐内部内容<td> （使用 CSS）：
<table style="width:50%;">
<tr>
<th>月</th>
<th>储蓄</th>
</tr>
<tr style="height:100px">
<td style="vertical-align:bottom">一月</td>
<td style="vertical-align:bottom">100美元</td>
</tr>
</table>
亲自尝试 »
例子
如何设置表格单元格的宽度（使用 CSS）：
<table style="width:100%">
<tr>
<th>月</th>
<th>储蓄</th>
</tr>
<tr>
<td style="width:70%">一月</td>
<td style="width:30%">100美元</td>
</tr>
</table>
亲自尝试 »
例子
如何创建表头：
<table>
<tr>
<th>姓名</th>
<th>电子邮件</th>
<th>电话</th>
</tr>
<tr>
<td>约翰·多伊</td>
<td>john.doe@example.com</td>
<td>123-45-678</td>
</tr>
</table>
亲自尝试 »
例子
如何创建带有标题的表格：
<table>
<caption>每月储蓄</caption>
<tr>
<th>月</th>
<th>储蓄</th>
</tr>
<tr>
<td>一月</td>
<td>100美元</td>
</tr>
<tr>
<td>二月</td>
<td>80美元</td>
</tr>
</table>
亲自尝试 »
例子
如何定义跨越多行或多列的表格单元格：
<table>
<tr>
<th>姓名</th>
<th>电子邮件</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>约翰·多伊</td>
<td>john.doe@example.com</td>
<td>123-45-678</td>
<td>212-00-546</td>
</tr>
</table>
亲自尝试 »
相关页面
HTML 教程： HTML 表格
HTML DOM 参考： 表数据对象
CSS 教程： 表格样式
默认 CSS 设置
大多数浏览器会显示 <td> 元素具有以下默认值：
运输署 {
显示：表格单元格；
垂直对齐：继承；
}
