这叫啥 UI？
← 返回组件目录

COMPONENT 68 · Data Display

数据表格

Data Table

也叫TableTabular Data数据表NSTableView

用行和列展示结构化数据，便于扫描与比较。

Displays structured data in rows and columns for scanning and comparison.

ANATOMY & USAGE

结构与使用建议

组成部分

  • 表格标题
  • 列标题
  • 数据行与单元格

适合使用

  • 数据具有稳定字段且用户需要跨行跨列比较时。

不建议使用

  • 内容是简单列表或移动端无法保留关键列时。

键盘与无障碍

  • 使用原生 table、caption 和正确 th scope；复杂表头提供清晰关联，容器可横向滚动。

DESCRIBE IT TO AI

这样告诉编程助手

实现数据表格（Data Table）：用行和列展示结构化数据，便于扫描与比较。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY
<div class="demo" tabindex="0" aria-label="数据表格">
  <table>
    <caption>项目状态</caption>
    <thead>
      <tr>
        <th scope="col">项目</th>
        <th scope="col">状态</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">词典</th>
        <td>进行中</td>
      </tr>
    </tbody>
  </table>
</div>