<tr>-表格行

<tr> 是 HTML 表格中的核心标签之一，用于定义表格的行。它直接包含表格的单元格（<td> 或 <th>），是构建结构化数据展示的基础。

<tr> 的基本语法

<tr> 标签必须嵌套在 <table> 内，通常与 <td>（标准单元格）或 <th>（表头单元格）配合使用。一个简单的表格行结构如下：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

<tr> 的属性

虽然现代 HTML5 已废弃大多数 <tr> 的旧属性（如 align、bgcolor），但以下属性仍常用：

• 全局属性：如 class、id、style、data-* 等。
• 事件属性：如 onclick、onmouseover。
• hidden：隐藏整行。

示例：通过 class 高亮行

<table>
  <tr class="highlight">
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>
<style>
  .highlight { background-color: yellow; }
</style>

<tr> 的动态操作

通过 JavaScript 可以动态修改或创建 <tr>。例如，添加新行：

<table id="myTable">
  <tr><td>原始数据</td></tr>
</table>
<script>
  const table = document.getElementById("myTable");
  const newRow = table.insertRow(); // 插入新行
  const cell = newRow.insertCell(); // 插入单元格
  cell.textContent = "动态添加";
</script>

嵌套复杂内容

<tr> 内可嵌套其他 HTML 元素，如表单控件或图片：

<table>
  <tr>
    <td><input type="text" placeholder="输入名字"></td>
    <td><button>提交</button></td>
  </tr>
</table>

跨行与跨列

结合 rowspan 和 colspan 可实现复杂布局：

<table>
  <tr>
    <td rowspan="2">跨两行</td>
    <td>正常单元格</td>
  </tr>
  <tr>
    <td>第二行内容</td>
  </tr>
</table>

响应式设计中的 <tr>

在移动端，可通过 CSS 或 JavaScript 将表格行转换为卡片布局：

@media (max-width: 600px) {
  tr { display: block; margin-bottom: 10px; }
  td { display: inline-block; }
}

实际应用场景

1. 数据展示：如后台管理系统中的用户列表。
2. 表单布局：对齐表单标签和输入框。
3. 日历组件：每周日期排列成行。

<!-- 日历示例 -->
<table>
  <tr>
    <td>周一</td><td>周二</td><td>周三</td>
  </tr>
  <tr>
    <td>1</td><td>2</td><td>3</td>
  </tr>
</table>

性能优化

• 避免在单个表格中嵌套过多 <tr>（超过 1000 行可能影响渲染性能）。
• 使用虚拟滚动技术处理大数据量：

// 虚拟滚动简化示例
window.addEventListener("scroll", () => {
  const visibleRows = calculateVisibleRows();
  renderRows(visibleRows);
});

与其他标签的协作

<tr> 常与 <thead>、<tbody>、<tfoot> 结合使用，实现语义化分组：

<table>
  <thead>
    <tr><th>标题</th></tr>
  </thead>
  <tbody>
    <tr><td>内容</td></tr>
  </tbody>
</table>

可访问性实践

• 为屏幕阅读器添加 aria-label：

  <tr aria-label="用户数据行">
    <td>李四</td>
    <td>30</td>
  </tr>
  

• 确保键盘可导航：通过 tabindex 使行可聚焦。

框架中的特殊处理

在 React/Vue 中，动态生成 <tr> 时需注意 key 属性：

// React 示例
function Table({ data }) {
  return (
    <table>
      {data.map(item => (
        <tr key={item.id}>
          <td>{item.name}</td>
        </tr>
      ))}
    </table>
  );
}