29 Beautiful CSS3 Table Templates & Examples [HTML] 2026
After months of researching free HTML and CSS3 table templates, we decided to go further with our flexible alternatives.
We based these on readability, flexibility, and ease of use. Beginners and pros – you’re welcome.
You will never again lack professional data presentation skills. Our convenient free code snippets organize a wealth of statistics and information.
And. More. Accessible.
Creating a modern table using our templates is very easy and fast. Thanks to the easy to use code and responsive layout, you save yourself heaps of time.
Enjoy!
Best CSS3 Table Templates
Top picks at a glance
Fixed Column Table by ColorlibSticky first column for wide data
Fixed Header Table by ColorlibHeader stays visible on scroll
Responsive Table V1 by ColorlibMobile-first responsive pattern
Table With Vertical & Horizontal Highlight by ColorlibRow + column hover highlight
Responsive Table V2 by ColorlibCard-style mobile collapse
Table V01Minimal clean base to build on
Table of contents — all 29 table templates
- Fixed Column Table by Colorlib
- Fixed Header Table by Colorlib
- Table With Vertical & Horizontal Highlight by Colorlib
- Responsive Table V1 by Colorlib
- Responsive Table V2 by Colorlib
- Table V01
- Table V02
- Table V03
- Table V04
- Table V05
- Table V06
- Table V07
- Table V08
- Table V09
- Table V10
- Table V11
- Table V12
- Table V13
- Table V14
- Table V15
- Table V16
- Table V17
- Table V18
- Table V19
- Table V20
- Bootstrap CSS
- Adaptive Pricing Table
- CSS3 Pricing Table
- Nutrition Facts Table in HTML & CSS
1. Fixed Column Table by Colorlib
FreeBootstrap · Best for: Wide records that scroll sideways
The first column stays pinned while the rest scroll horizontally, so a row never loses the label that identifies it. The demo is an eight-column employee record — position, start date, last activity, contacts, address, card number — the shape of data that normally forces you to hide columns on narrow screens.
2. Fixed Header Table by Colorlib
FreeBootstrap · Best for: Long data sets that scroll past a screenful
The header row stays fixed while the body scrolls, so column names are still readable a hundred rows down. The demo fills it with a class timetable — class name, type, hours, trainer, spots remaining — but the markup takes any long list without changes.
3. Table With Vertical & Horizontal Highlight by Colorlib
FreeBootstrap · Best for: Cross-referencing a cell in a grid
Hovering lights up the row and the column at the same time, which is what you want when a value only means something at an intersection. Six variations ship together — solid and gradient fills, sharp and rounded corners — all laid out over a seven-day grid.
4. Responsive Table V1 by Colorlib
FreeBootstrap · Best for: Order and invoice lists on mobile
Six commerce columns — date, order ID, name, price, quantity, total — that stay readable as the viewport narrows. A plain starting point for order histories and billing screens, with the responsive behavior handled in the stylesheet rather than bolted on later.
5. Responsive Table V2 by Colorlib
FreeBootstrap · Best for: Mobile-first data lists
Built from div rows and cells rather than table elements, which is why it collapses so cleanly on small screens. Row hover is included, and because the structure is not table layout, changing how rows stack is a stylesheet edit rather than a markup rewrite.
6. Table V01
FreeBootstrap · Best for: A plain user list to build on
The most basic entry here: number, first name, last name, email, and a colored header band. Four columns and nothing else, which makes it the natural base to paste your own columns into rather than a finished screen.
7. Table V02
FreeBootstrap · Best for: Lists with a per-row delete control
The same four-column list as V01 with a delete control on every row — and nothing behind it to undo the action. On narrow screens it scrolls sideways instead of restructuring, so column alignment survives the trip to mobile.
8. Table V03
FreeBootstrap · Best for: Domain and hosting price lists
A registrar price grid: TLD, duration, registration, renewal and transfer columns, with a sign-up button on every row. Rows for .com, .net, .org, .biz, .info and .me are already filled in, so it is a text edit away from a working price list.
9. Table V04
FreeBootstrap · Best for: Weekly class and studio timetables
A Monday-to-Sunday schedule grid with images and times in each slot, rather than a row-per-record list. Previous and next month controls are drawn but not wired up, so the date logic is yours to supply.
10. Table V05
FreeBootstrap · Best for: User administration screens
A user list with the admin controls already in place: select checkbox, avatar, email, username, status, and a delete action. The status column is the piece most user tables need and most free snippets leave out.
11. Table V06
FreeBootstrap · Best for: Shopping cart pages
A cart table rather than a data table — product thumbnail, name, price, a quantity control, line total, and a remove button. Row checkboxes let a shopper act on several items at once, which is usually the part left as an exercise.
12. Table V07
FreeBootstrap · Best for: Dark interfaces
The dark counterpart to V01 — same four columns, inverted palette, row hover. Nothing is layered on top of that, which makes it the cleanest dark starting point on this page.
13. Table V08
FreeBootstrap · Best for: Detail on demand without a modal
Rows expand in place: click the arrow and an accordion panel opens underneath with the extra product detail. The visible columns stay at five — product, price, quantity, total — so the table reads cleanly until someone asks for more.
14. Table V09
FreeBootstrap · Best for: Order and invoice status tracking
Status is the point here: color-coded pills for in progress, open, and on hold sit in the final column. Invoice number, customer, shipping and two price columns fill out the rest, matching how a back-office order list is usually read.
15. Table V10
FreeBootstrap · Best for: Colour-coded record lists
Every row carries its own color, so category is legible before you read a word of it. Five rows across six colors with an edit icon at the end — deliberately loud, and the least neutral design in the set.
16. Table V11
FreeBootstrap · Best for: Minimal lists with bulk selection
Stripped to five columns — order, name, occupation, contact, education — with a select-all checkbox in the header. There is no hover or status treatment to unpick, which makes it the easiest one here to restyle into an existing design.
17. Table V12
FreeBootstrap · Best for: Read-only directories and reports
The same five columns as V11 with the checkboxes dropped and a full-row hover highlight in their place. Nothing is selectable, so it suits screens where rows are read rather than acted on.
18. Table V13
FreeBootstrap · Best for: Multi-select workflows
Checked rows keep their highlight after the cursor moves away, so the current selection stays visible while you scroll. Select-all sits in the header, and the columns match V11 and V12 if you want consistent markup across several screens.
19. Table V14
FreeBootstrap · Best for: Contact and student directories
Rounded corners and spacing between rows make it read as a stack of cards rather than a grid. Names are clickable, every row has a checkbox, and the occupation, contact and education columns suit member or student records.
20. Table V15
FreeBootstrap · Best for: Working through a queue of records
Ticking a row dims it, so handled records recede and what is left to do stands out. The design is otherwise identical to V14 — same spacing, same rounded rows — with a background panel added behind the table.
21. Table V16
FreeBootstrap · Best for: Dark dashboards with drill-down
Dark by default, with a hover state that switches row text to white and yellow so the active row is unmistakable. A details link closes each row, ready to point at a record page.
22. Table V17
FreeBootstrap · Best for: Permission and settings tables
Toggle switches, not just checkboxes: each row carries an animated on/off control alongside its selection box. That makes it the right shape for permission grids and feature settings, where every row has a state to flip.
23. Table V18
FreeBootstrap · Best for: Dark interfaces with multi-select
The dark treatment with selection built in — ticking a row keeps it highlighted, and hover previews the same effect. Fourteen rows come populated, enough to see how the highlight behaves in a list long enough to scroll.
24. Table V19
FreeBootstrap · Best for: Sales and support team rosters
Built around people rather than records: avatars lead each row, with order, sales, description and support columns after them. On mobile it scrolls horizontally rather than collapsing, so a full row stays intact if you swipe across it.
25. Table V20
FreeBootstrap · Best for: Enable and disable status lists
Every row has an active or inactive toggle, and one control in the header flips them all at once. Alternating gray and white row backgrounds keep long lists readable while you work down them.
Bonus CSS3 Tables
26. Bootstrap CSS
FreeBootstrap · Best for: Projects already running Bootstrap
Not a template but the framework documentation itself — striped, bordered, hoverable, compact and responsive table variants are all plain class names. Because the styling comes from a front-end framework the project already loads, these examples add no extra CSS and inherit whatever theme you have applied.
27. Adaptive Pricing Table
HTML · Best for: Comparing service or hosting plans
A pricing comparison rather than a data table, with plans across the top and features down the side. It lives on CodePen, so the HTML and CSS sit side by side and copy straight out; for WordPress sites, pricing table plugins cover the same ground without code.
More info / Download28. CSS3 Pricing Table
HTML · Best for: Highlighting a recommended plan
A pricing layout with an outline treatment that marks one tier as the recommended choice. Also a CodePen demo, so the markup and styles are there to copy and adapt; confirm the author license before commercial use.
29. Nutrition Facts Table in HTML & CSS
HTML · Best for: Food, recipe and product data
A faithful reproduction of the regulated nutrition label — rules, indentation and all — in plain HTML and CSS. It solves a layout most sites fake with an image, which makes it worth pointing your product or recipe output at; check the pen for its license first.
Frequently Asked Questions
How do I make an HTML table responsive?
Wrap the table in a container with overflow-x: auto so it scrolls horizontally on small screens, or restructure rows into stacked cards with CSS grid or flexbox at a mobile breakpoint. Several templates above (Responsive Table V1 and V2) ship with this behavior built in.
Can I use these table templates without JavaScript?
Many are pure HTML and CSS. The fixed-header and fixed-column examples here are the exception — they sync the frozen row or column with jQuery and a custom scrollbar script. If you want that behaviour without JavaScript, position: sticky on the th or first cell does the same job in a few lines of modern CSS.
How do I add sorting to an HTML table?
Lightweight options include the sorttable script or List.js; for data-heavy admin interfaces, DataTables remains the standard. All of them work on top of any template on this page, because the markup stays plain table elements.
Are these table templates free for commercial use?
The Colorlib-built tables are free for personal and commercial projects. CodePen-sourced examples follow their authors’ licenses — most are MIT, but check the individual pen before shipping.
Related Posts
Beautiful tables, especially the one with gradient background
I love these tables, simple yet elegant~!
thank you very much. i use one of them in my website. it’s superb
Can someone explain to me how the third table getting blured?
Which one did you mean by third?
The Fade and Blur on Hover Data Table one
You apply 2 different hover effects as text-shadow. First one applies to the entire table once you hover on it that blurs the all text except the line on which you are hovering your mouse. That part comes from the second line of code. It simply applies text-shadow that doesn’t look blurry. Also color plays some role in this. Here is the entire code for that:
tbody:hover td { color: transparent; text-shadow: 0 0 3px #aaa; } tbody:hover tr:hover td { color: #444; text-shadow: 0 1px 0 #fff; }use bootstrap css for table design
Yeah… If you want your table to look the same as any other Bootstrapped website. NOT!!!
Thanks a lot. However I may need a bit more help. I used one of the tables via wordpress. I pasted the html codes into the page text-editor. Also I pasted the css codes to the style.css file. But the table does not seem to have style effects. Only a raw table. What did I do wrong?
I’ll appreciate any help.
Ok, after some time it was fixed, now it works proplerly, thanks again.
Hello,
Very nice Tables… We find this one “Fade and Blur on Hover Data Table” is very perfect for public Stampdata.
Thanxx from Berlin
Thanks a lot, I was looked for these temples, really helpful for me.these templets save my time.
regards
Very nice and basic example which can be easily incorporated into existing code. Many Thanks!!
Simple tables yet gives a catch for the eyes of the visitors. Your examples are great. Thanks for bringing this into your article..
“Fixed Header Table by Colorlib” is not responsive.
It wasn’t supposed to be responsive. Combining responsiveness while having a fixed header layout is a very difficult challenge. Since our templates are open source we would very much appreciate if you could create and share a responsive version of it.
Very nice CSS table list! You solve my problem thank you so much!
Hi – I used this as my table – but I would like to have tab above the table that indicate the years. I don’t want to list all results in one table but broken into several years – I was not able to find an example how to do that.
Which of the templates do you mean?