Table Snippets — Free HTML CSS JS Data Tables & Grids

Tables display structured data — user records, product inventories, pricing feature comparisons, and weekly schedules. A well-designed data table with search, sort, and clear visual hierarchy helps users find what they need in seconds. A poorly designed one forces scrolling, misreads, and frustration. This collection covers the four most common table patterns used in production web products.

Every snippet is plain HTML, CSS, and minimal vanilla JavaScript with no library dependencies.

Data Table gives you a user management table with gradient avatar initials, status badges (Active/Away/Offline with pulsing dots), live full-text search across all columns simultaneously, a select-all checkbox, Edit and Remove row actions, and pagination controls. The filterTable() function uses row.textContent — which returns every visible character in the row as one string — for a single .includes() check that searches all columns at once.

Sortable Table adds click-to-sort on any column header. The sortBy() function reads data-col (column index) and data-type ("string" or "number") from the clicked th, compares cell values using Array.sort(), and re-appends rows in sorted order. The data-val attribute on numeric cells stores the raw number separately from the formatted display value (e.g. data-val="89" on a cell showing "$89.00") so currency symbols and units do not break numeric comparison.

Comparison Table is the standard pricing feature matrix: three plan columns (Starter / Pro / Team) with the featured Pro column highlighted via accent borders applied to every cell in the column, section row dividers that span the full table width to group feature categories, .yes (✓ green) and .no (✗ grey) indicators for included and excluded features, and plan CTA buttons in the table footer. The featured column uses a continuous border achieved by applying .featured to every individual td — not a wrapper overlay.

Schedule / Timetable renders a weekly calendar grid — days as columns (Mon–Fri), hourly time slots as rows — with six colour-coded event types, a today column highlight (class on header and cells), and horizontal scroll for narrow screens. Event blocks fill cell height via height: 100%. Multi-hour events use rowspan. The layout is a plain HTML table — no CSS Grid, no Flexbox — which gives perfectly aligned columns and rows for calendar data.

Combine snippets: add the filterTable() function from Data Table to Sortable Table for a search + sort data grid. Use the Comparison Table above a Pricing Toggle for an interactive pricing page section.