If you are on this website, it’s no secret to you that the <table> element in HTML is used for displaying tabular data. It is a way to describe and display data that would make sense in spreadsheet software. So, at wpDataTables, we deal pretty much with columns and rows.
As simple as it sounds, tables have got to be one of the most difficult objects to style in the Web, thanks to the cryptic markup and the amount of detail we have to take care of. A lot of time could be wasted on a single table although it’s just a simple one.
Luckily, there are already made examples of CSS tables that you can download and use in your projects.
In this article, we’ll look at CSS tables that are neatly coded, organized and ready to be downloaded.
I’ll take this chance to let you know that if you need to create tables and charts in WordPress, wpDataTables is the best option you can use.
Now let’s get back to our CSS tables.
Examples of CSS tables
Table of contents
Regular CSS tables
Use CSS Tables for layouts when you need easy vertical alignment, CSS based fixed footers with dynamic heights, and stack ordering.
LI is easier and allows more customization.
This is a “<Table> Responsive” with CSS3 transition, box-shadow, transform properties. Responsive Web Design technology & without JS.
Table collapses into a “list” on small screens. Headers are pulled from data attributes.
Fixed table header with a simple jQuery code.
Using CSS to fade-in a row, fade-out a row and show data in the table updating on a live basis. Also hovering over a row expands to show more information.
The idea was to create a nice working table which is working on smaller screens also. I think this is a nice solution. Works even with a width of 405px.
A simple (and nasty) trick to have the vertical and horizontal highlight on hover on tables made with pure CSS.
Using CSS for responsive table layouts instead of floats. Responsive (everything goes down to one row each), too.
Mobile-first responsive and accessible data table. At narrower viewports the thread is hidden, rows are turned into cards with labels shown using a data-* attribute.
Responsive comparison table created for a customer but decided not to use it. Works great, downsizing to mobile and then moving the information inside the boxes using before/after.
CSS pricing tables
Responsive Flip Pricing Table to view month or year price.
All design credit to Focus Lab, LLC. They shared a shot on Dribbble with something similar to this and I just wanted to create it for practice.
Pricing table comparing 3 different plans for a mystical computing company.
Experimental CSS tables
Ending thoughts on using CSS tables
So, why would you use CSS tables instead of a regular jQuery based one? Well, for one thing, you won’t have any dependencies.
A CSS table like the ones in this article will load blazing fast and won’t add any extra weight to the page.