HTML <td> 标签介绍

标签是HTML中用于定义表格数据单元格的标签，它必须包含在  标签内，用于存储表格中的实际数据内容。

基本语法

      数据内容    数据内容  

标签特性

使用实例

1. 基本数据单元格

2. 包含不同类型内容的单元格

加粗文本	斜体文本	链接
	按钮

td 标签属性（HTML4，现在建议使用CSS）

行列合并实例

列合并（colspan）

行合并（rowspan）

行列同时合并

可访问性属性

复杂表格实例

数据分组表格

td 与 th 的区别

JavaScript操作td示例

// 获取所有td元素var cells = document.querySelectorAll("td");// 为每个td添加点击事件cells.forEach(function(cell) {  cell.addEventListener("click", function() {    this.style.backgroundColor = "#ffffcc";  });});// 动态修改td内容function updateCell(row, col, newValue) {  var table = document.getElementById("myTable");  table.rows[row].cells[col].innerHTML = newValue;}

常见错误用法

CSS样式示例（仅作展示）

/* 基本单元格样式 */td {  padding: 8px;  border: 1px solid #ddd;  text-align: left;}/* 斑马纹效果 */tr:nth-child(even) td {  background-color: #f2f2f2;}/* 悬停效果 */td:hover {  background-color: #e6f3ff;}/* 响应式表格 */@media screen and (max-width: 600px) {  td {    display: block;    width: 100%;  }}

最佳实践

• 保持单元格内容简洁明了
• 为空的td单元格添加 或适当的描述
• 使用语义化的属性如headers和scope
• 避免使用表现性属性，使用CSS控制样式
• 确保表格在移动设备上的可读性
• 为复杂表格提供适当的说明或摘要

标签是构建HTML表格的基础元素，正确使用可以创建出结构清晰、可访问性良好的数据表格。与配合使用，可以构建出语义完整的数据展示表格。