Table
表格
Aliases:表格数据表格数据列表二维表可排序表格后台数据列表订单列表那种表
What is it
A two-dimensional grid aligning data in rows and columns — one record per row, one field per column — built for column-by-column comparison, sorting and high-volume browsing. Rows highlight on hover and support selection; column headers usually carry sort controls.
Interactive playground
Try it. Make an informed choice.Try sorting, selection and row actions; inspect header alignment.
Loading lab…
What to look for
- 01Align comparable numbers and indicate sort direction.
- 02Allow local table scrolling without overflowing the page.
✓ When to use
- Many fields needing column-by-column comparison
- Admin lists (orders, users, logs)
- Dense data with sorting, filtering and batch actions
✕ When not to use
- Narrow mobile screens cannot fit columns — switch to card lists
- Browsing-oriented content — use a card feed
- Few fields with visual emphasis — use cards or lists
Variants
Bordered
带边框
Cell rules, the traditional look
Striped
斑马纹
Alternating row tint eases long scans
Sticky header
固定表头
Header stays put while scrolling
Implementation
border-collapsetext-alignoverflow-x: autoposition: stickyWrap in overflow-x-auto for narrow screens; right-align numbers, left-align text; stripe with an odd-row tint. Sorting: a button inside th with aria-sort, second click reverses. Sticky header via sticky top-0 over a header background. Control density with row padding (~8px compact vs ~16px comfortable).
Platform API
<table><thead><tbody>Compare
Full comparison →Related concepts
A self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsAlternativeA page-numbered control that slices long result sets into discrete pages: users explicitly click a page number or prev / next to fetch that slice, so the current position is always known, shareable and reversible. The controlled counterpart to infinite scrolling's endless drift — the default for search results and admin tables.
ComponentsSimilarA panel concentrating filter controls beside the list (or revealed in a drawer or popover): checkbox groups, radios and sliders compose the current query. It syncs with the list to refresh result counts, echoes selected conditions and offers clear-all.
ComponentsSimilarA summary list on one side with the selected item's full detail on the other; clicking an entry updates the detail pane instantly. It solves the constant back-and-forth between list and detail pages — overview and depth share one screen, so users keep their sense of place and switching or comparing multiple items becomes cheap.
PatternsUsed with