<tbody>-表体部分

<tbody> 标签的基本概念

<tbody> 是 HTML 表格中用于定义表格主体内容的标签。它必须作为 <table> 的直接子元素出现，通常位于 <thead> 和 <tfoot> 之后。一个表格可以包含多个 <tbody> 元素，这在实际开发中常用于对大型表格数据进行分组。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

<tbody> 的语法特性

<tbody> 标签具有以下语法特征：

• 必须包含一个或多个 <tr> 元素
• 可以包含全局属性如 class、id、style 等
• 支持事件处理属性如 onclick、onmouseover 等
• 在 DOM 中对应 HTMLTableSectionElement 接口

<tbody id="userData" class="highlight" onclick="handleClick(event)">
  <!-- 表格行内容 -->
</tbody>

多 <tbody> 分组的应用

当表格数据需要逻辑分组时，可以使用多个 <tbody> 元素。这种结构不仅有助于语义化，还能方便地通过 CSS 或 JavaScript 对不同的数据组进行操作。

<table>
  <thead>
    <tr><th>产品</th><th>销量</th></tr>
  </thead>
  <tbody>
    <tr><td>手机</td><td>1200</td></tr>
    <tr><td>平板</td><td>800</td></tr>
  </tbody>
  <tbody>
    <tr><td>笔记本</td><td>1500</td></tr>
    <tr><td>台式机</td><td>600</td></tr>
  </tbody>
</table>

样式控制与交互

<tbody> 元素可以单独设置样式，这为表格的视觉呈现提供了更多可能性。通过 CSS 可以轻松实现斑马纹效果或分组高亮。

/* 基础斑马纹效果 */
tbody tr:nth-child(odd) {
  background-color: #f2f2f2;
}

/* 分组间隔样式 */
tbody {
  border-bottom: 2px solid #ddd;
}

/* 悬停效果 */
tbody tr:hover {
  background-color: #e6f7ff;
}

JavaScript 操作 <tbody>

通过 JavaScript 可以动态操作 <tbody> 内容，这在数据驱动的现代 Web 应用中非常常见。以下是几个典型操作示例：

// 获取表格主体
const tbody = document.querySelector('tbody');

// 添加新行
function addRow(data) {
  const row = tbody.insertRow();
  row.innerHTML = `<td>${data.name}</td><td>${data.age}</td>`;
}

// 删除所有行
function clearTable() {
  tbody.innerHTML = '';
}

// 对行进行排序
function sortTable(columnIndex) {
  const rows = Array.from(tbody.rows);
  rows.sort((a, b) => 
    a.cells[columnIndex].textContent.localeCompare(b.cells[columnIndex].textContent)
  );
  tbody.append(...rows);
}

响应式设计中的 <tbody>

在移动设备上处理大型表格时，<tbody> 可以配合 CSS 实现响应式布局。常见技术包括水平滚动、行列转换等。

/* 响应式表格容器 */
.table-container {
  overflow-x: auto;
}

/* 小屏幕下的特殊样式 */
@media (max-width: 600px) {
  tbody tr {
    display: block;
    margin-bottom: 1em;
    border: 1px solid #ddd;
  }
  
  tbody td {
    display: block;
    text-align: right;
  }
  
  tbody td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

可访问性考虑

确保 <tbody> 内容的可访问性对残障用户至关重要。ARIA 属性和正确的键盘导航是实现这一目标的关键。

<table aria-label="用户数据表">
  <thead>
    <tr><th scope="col">姓名</th><th scope="col">邮箱</th></tr>
  </thead>
  <tbody aria-live="polite">
    <tr><td tabindex="0">王五</td><td tabindex="0">wang@example.com</td></tr>
  </tbody>
</table>

性能优化技巧

处理大型数据集时，<tbody> 的性能优化尤为重要。虚拟滚动和分页加载是两种常用技术。

// 虚拟滚动示例
function renderVisibleRows() {
  const scrollTop = tableContainer.scrollTop;
  const startIdx = Math.floor(scrollTop / rowHeight);
  const endIdx = startIdx + visibleRowCount;
  
  tbody.style.height = `${data.length * rowHeight}px`;
  tbody.style.transform = `translateY(${startIdx * rowHeight}px)`;
  
  const fragment = document.createDocumentFragment();
  for (let i = startIdx; i <= endIdx; i++) {
    if (data[i]) {
      const row = createRow(data[i]);
      fragment.appendChild(row);
    }
  }
  
  tbody.innerHTML = '';
  tbody.appendChild(fragment);
}

与其他表格元素的配合

<tbody> 需要与 <thead>、<tfoot>、<caption> 等表格元素协同工作，形成完整的表格结构。

<table>
  <caption>2023年销售报告</caption>
  <thead>
    <tr><th>季度</th><th>销售额</th></tr>
  </thead>
  <tfoot>
    <tr><td>总计</td><td>$1,200,000</td></tr>
  </tfoot>
  <tbody>
    <tr><td>Q1</td><td>$250,000</td></tr>
    <tr><td>Q2</td><td>$300,000</td></tr>
  </tbody>
  <tbody>
    <tr><td>Q3</td><td>$350,000</td></tr>
    <tr><td>Q4</td><td>$300,000</td></tr>
  </tbody>
</table>

现代框架中的使用

在 React、Vue 等现代前端框架中，<tbody> 的使用方式略有不同，通常与数据绑定和组件化结合。

// React 示例
function DataTable({ data }) {
  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
        </tr>
      </thead>
      <tbody>
        {data.map(item => (
          <tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.name}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

浏览器渲染差异

不同浏览器对 <tbody> 的渲染存在细微差异，特别是在处理边框、背景色和动态内容时需要注意。

/* 解决浏览器兼容性问题 */
tbody {
  /* 确保 Firefox 中的背景色渲染一致 */
  background-color: inherit;
  
  /* 解决 IE 中的边框问题 */
  border-collapse: separate;
  border-spacing: 0;
}

打印样式优化

针对打印场景，<tbody> 可能需要特殊的样式处理，确保表格在纸质媒介上的可读性。

@media print {
  tbody tr {
    page-break-inside: avoid;
  }
  
  tbody tr:nth-child(odd) {
    background-color: #fff !important;
    -webkit-print-color-adjust: exact;
  }
  
  table {
    border-top: 2pt solid black;
  }
}