Table with Sticky Header
Dark striped data table in pure CSS with a sticky header row and sticky first column inside a scrollable, keyboard-focusable container.
Tables
Data tables with sorting, striping and responsive layouts.
4 component(s)
Table with Search Filter
Bootstrap 5 team directory table with live search, status filter, highlighted matches, result counter and empty state.
Responsive Table with Actions
Responsive Bootstrap 5 invoice table with status badges, a status filter and row action dropdowns to mark as paid, remind or delete.
Sortable Data Table
Tailwind CSS data table with clickable column headers that sort text, dates and numbers, with aria-sort, arrow indicators and a responsive scroll wrapper.
What is a data table?
A data table presents structured information in rows and columns so users can read, compare and act on it. Typical features include header rows, zebra striping, hover highlighting, sorting, filtering, pagination, row selection, inline actions and status badges. Tables are essential in admin panels, dashboards, reports, order lists, pricing comparisons and any interface that handles records.
When to use a table
Use a table when data has a clear tabular structure and users need to compare values across rows or columns. Do not use tables for page layout; for a few loosely related items, a list or cards are easier to read.
Best practices
- Use real table markup:
<table>,<thead>,<tbody>,<th>withscope="col"orscope="row", and a<caption>describing the table. - For sortable columns, put a
<button>inside the header cell and setaria-sorton the active column. - Right-align numbers and use tabular figures so values line up.
- On small screens, wrap the table in a horizontally scrollable container with
overflow-x: auto, or switch to a stacked card layout for each row. - Keep the header visible on long tables with
position: sticky. - Do not rely on colour alone for status; add text or a labelled badge.
- For large datasets, paginate or load data on demand instead of rendering thousands of rows.
Bootstrap, Tailwind CSS and pure CSS versions
The table examples come in Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Bootstrap versions use the table classes for striping, borders, hover and responsive wrappers, and Bootstrap 6 variants use the theme-* colour roles for highlighted rows and status cells. Tailwind CSS versions are built with utilities, and pure CSS versions style the native table elements directly. Interactive features like sorting use a small script where included. Filter by framework to find bootstrap table examples or a responsive table in HTML and CSS, check them in the live preview, then copy or download the code.