在HTML中，表格是用于展示数据的一种非常常见的方式。表格由<table>元素创建，而单元格则是由<td>元素表示。<td>标签是表格数据（Table Data）的缩写，用于在表格中定义单元格。掌握<td>标签的用法对于创建美观、易读的表格至关重要。本文将详细讲解如何精准控制单元格内容长度与显示效果。
1. 基础用法
首先，我们来了解一下<td>标签的基础用法。一个简单的<td>标签如下所示：
<td>单元格内容</td>
在<td>标签内，你可以放置任何HTML内容，包括文本、图片、链接等。
2. 控制单元格宽度
要控制单元格的宽度，你可以使用CSS样式。以下是一个例子：
<style>
td {
width: 100px; /* 设置单元格宽度为100像素 */
}
</style>
<table>
<tr>
<td>单元格内容1</td>
<td>单元格内容2</td>
</tr>
</table>
在这个例子中，所有单元格的宽度都被设置为100像素。
3. 控制单元格内容长度
要控制单元格内容长度，你可以使用CSS的white-space属性。以下是一些常用的值：
normal：默认值，内容会自动换行。nowrap：内容不会换行，超出部分将被隐藏。pre：保持空白符和换行符，并使用等宽字体。pre-wrap：与pre类似，但会在必要时进行换行。
以下是一个例子：
<style>
td {
white-space: nowrap; /* 设置内容不换行 */
}
</style>
<table>
<tr>
<td>单元格内容1</td>
<td>单元格内容2</td>
</tr>
</table>
在这个例子中，单元格内容不会自动换行，如果内容过长，超出部分将被隐藏。
4. 显示省略号
如果你想让单元格内容在超出时显示省略号，可以使用CSS的text-overflow属性。以下是一些常用的值：
clip：默认值，超出部分将被剪裁。ellipsis：超出部分显示省略号。string：超出部分显示指定的字符串。
以下是一个例子：
<style>
td {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 100px; /* 设置最大宽度 */
}
</style>
<table>
<tr>
<td>单元格内容1</td>
<td>单元格内容2</td>
</tr>
</table>
在这个例子中，单元格内容在超出100像素时将显示省略号。
5. 总结
通过使用<td>标签和CSS样式，你可以轻松控制单元格内容长度与显示效果。掌握这些技巧，可以帮助你创建美观、易读的表格。希望本文对你有所帮助！