HTML <tr> 标签介绍

<tr> 标签是HTML中用于定义表格行的标签，它必须包含在 <table> 标签内，用于组织表格中的单元格。

基本语法

<table>
  <tr>
    <td>单元格内容</td>
    <td>单元格内容</td>
  </tr>
</table>

标签特性

使用实例

1. 基本表格行

2. 包含表头单元格的行

3. 混合使用 td 和 th

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

在表格分组中的使用

使用 thead, tbody, tfoot

行合并和列合并配合使用

使用 rowspan 和 colspan

复杂表格结构实例

tr 标签的可访问性属性

可访问性示例

动态生成表格行的JavaScript示例

// 添加新行到表格
function addTableRow() {
  var table = document.getElementById("myTable");
  var newRow = table.insertRow();
  
  var cell1 = newRow.insertCell(0);
  var cell2 = newRow.insertCell(1);
  var cell3 = newRow.insertCell(2);
  
  cell1.innerHTML = "新数据1";
  cell2.innerHTML = "新数据2";
  cell3.innerHTML = "新数据3";
}

常见错误用法

最佳实践

• 始终在tr标签内使用td或th标签
• 使用thead、tbody、tfoot对表格进行逻辑分组
• 为复杂的表格使用scope属性提高可访问性
• 避免使用表现性属性，使用CSS进行样式控制
• 确保每行的单元格数量一致（考虑colspan和rowspan）

与CSS配合使用

/* 交替行颜色 */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* 鼠标悬停效果 */
tr:hover {
  background-color: #e6f3ff;
}

/* 表头行样式 */
thead tr {
  background-color: #4CAF50;
  color: white;
}

响应式表格中的tr

/* 在小屏幕上将表格行转换为块级元素 */
@media screen and (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  
  tr {
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }
}

<tr> 标签是构建HTML表格的基础元素，正确使用可以创建出结构清晰、可访问性良好的数据表格。