Tables – 10 Free HTML Table & Datatable Templates
Tables is a pack of ten table templates, from a full vanilla-JavaScript datatable to pure-CSS report layouts. Each design is a single self-contained HTML file with the CSS and JavaScript inlined — no jQuery, no DataTables.js, no build step.
The flagship design implements live search, sortable columns, and pagination in about eighty lines of readable vanilla JavaScript, with its data in a plain array you can swap for an API response. The other nine cover the layouts real products need: striped reports, dark admin tables, a responsive card-stack pattern for mobile, sticky headers, row selection with bulk actions, expandable detail rows, comparison matrices, printable invoices, and a minimal hairline table.
The ten designs
- Vanilla JS Datatable — live search, click-to-sort columns, and numbered pagination with zero dependencies.
- Striped Table — zebra rows, hover highlight, dark header, totals footer; pure CSS.
- Dark Admin Table — glowing status dots, CSS load bars, and row actions for monitoring UIs.
- Responsive Stack — restacks into labelled cards below 620px using data-label attributes; CSS only.
- Sticky Header — pinned header over a scrollable body with position: sticky.
- Selectable Rows — select-all with indeterminate state and a bulk-action bar that appears on selection.
- Expandable Rows — click-to-expand detail lines, an accordion inside a table.
- Comparison Table — feature matrix with a highlighted recommended column and per-plan buttons.
- Invoice Table — line items, subtotal/tax/total block, and print styles for clean PDF export.
- Minimal Table — hairline dividers, generous spacing, tabular numerals.
At a glance
- 10 designs, one folder each, single
index.htmlper design - Plain HTML/CSS + vanilla JavaScript — no jQuery, no table plugins
- Responsive patterns included (card-stack + scroll strategies)
- Accessible: proper table semantics, focusable controls, aria labels on actions
- System font stacks, tabular numerals for data columns
- README with a design index and wiring notes
How to use
Copy a design’s markup and top-of-file CSS block into your project. For the datatable, replace the DATA array with your rows — sorting, search, and paging keep working. Preview everything on the live demo index or read the full write-ups on our free table templates page.
FAQ
Can I use these in commercial projects?
Yes — the pack follows the standard uiCookies license. Attribution details are on the license page.
Does the datatable handle large datasets?
It renders the current page only, so a few thousand rows in the array stay fast. For truly large data, keep the same UI and swap the filter/sort functions for server-side queries.
