Every table on this page was designed and coded in-house by uiCookies — our own pack, not a roundup of CodePen embeds. Each design is a single self-contained HTML file with the CSS and vanilla JavaScript inlined. No jQuery, no DataTables.js, no build step: the flagship datatable does live search, sorting, and pagination in about eighty lines of plain JavaScript you can actually read.
The ten designs cover the table work that comes up in real products — a full datatable, striped report tables, dark admin tables, a responsive pattern that restacks into cards on phones, sticky headers, row selection with bulk actions, expandable detail rows, pricing comparison matrices, printable invoices, and a minimal hairline table. Everything coexists happily with Bootstrap, and none of it requires Bootstrap.
Download all 10 (free) Browse live demos
The designs
1. Vanilla JS Datatable
The full datatable, no jQuery required: live search, click-to-sort columns with direction indicators, and pagination with page numbers — about eighty lines of readable vanilla JavaScript. The data lives in a plain array, so wiring it to your API is a one-line swap.
2. Striped Table
The classic zebra-striped report table with hover highlighting, a dark header row, and a totals footer. Pure CSS — the design most admin screens actually need most of the time.
3. Dark Admin Table
A service-status table for dark dashboards: glowing status dots, CSS load bars, tabular latency numbers, and a row-actions button. Reads like a monitoring product out of the box.
4. Responsive Stack Table
The mobile-table problem, solved with CSS alone: below 620px every row restacks into a labelled card using data-label attributes. No horizontal scrolling, no truncated columns.
5. Sticky Header Table
A scrollable table body with a header that stays pinned via position: sticky. Right for long lists inside fixed-height panels — no plugin, no JavaScript.
6. Selectable Rows
Checkbox selection done properly: a select-all with a true indeterminate state, row highlighting, and a bulk-action bar that appears only when something is selected.
7. Expandable Rows
Click a row and its detail line accordions open beneath it. Useful whenever rows carry more context than columns can hold — expenses, orders, tickets.
8. Comparison Table
A pricing and feature matrix with a highlighted “recommended” column, check and dash states, and per-plan buttons in the footer. Ready for any pricing page.
9. Invoice Table
A complete invoice sheet: line items with descriptions, subtotal/tax/total rows, and print styles so it exports cleanly to PDF from the browser.
10. Minimal Table
Hairline dividers, generous spacing, tabular numerals, and nothing else. For financial data and content-heavy pages where the table should disappear.
Using the tables in your project
Copy a design’s markup and its CSS block into your page and it renders identically — each file is self-contained. For the datatable, replace the DATA array with your rows (or the result of a fetch call) and the search, sorting, and paging keep working unchanged. Full notes ship in the pack download.
Frequently asked questions
Are these table templates free?
Yes. The whole pack downloads free from the uiCookies pack page — no signup, no email gate. See the uiCookies license page for attribution details.
Do I need jQuery or DataTables.js?
No. The datatable design implements search, sorting, and pagination in plain vanilla JavaScript with zero dependencies. The other nine designs are pure CSS or use only a few lines of JS.
How do I make a table responsive on mobile?
Use the Responsive Stack design: it adds a data-label attribute to each cell and a media query that restacks rows into labelled cards below 620px. It is a pure CSS technique — no scripts, no plugins.
Do the tables work with Bootstrap?
Yes. They use their own class names, so nothing collides with Bootstrap’s .table styles. You can drop any of them into a Bootstrap grid column as-is.
Building out a full interface? Pair these with our card templates and login forms, or browse the complete catalog of free HTML website templates.
