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
– CSS pricing tables
– Experimental CSS tables
Regular CSS tables
Responsive Table
Sort Table Rows by Table Headers – Ascending and Descending (jQuery)
HTML Table & CSS Table
Use CSS Tables for layouts when you need easy vertical alignment, CSS based fixed footers with dynamic heights, and stack ordering.
Responsive Tables using LI
LI is easier and allows more customization.
<Table> Responsive
This is a “<Table> Responsive” with CSS3 transition, box-shadow, transform properties. Responsive Web Design technology & without JS.
Responsive Table
Table collapses into a “list” on small screens. Headers are pulled from data attributes.
Responsive Table + Detail View
Fixed table header
Fixed table header with a simple jQuery code.
CSS table
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.
Responsive table with flexbox
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.
Pure CSS Table Highlight (vertical & horizontal)
A simple (and nasty) trick to have the vertical and horizontal highlight on hover on tables made with pure CSS.
CSS Responsive Table Layout
Using CSS for responsive table layouts instead of floats. Responsive (everything goes down to one row each), too.
Responsive Table
Responsive Table with RWD-Table-Patterns
Nutrition Facts Table in HTML & CSS
Responsive & Accessible Data Table
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.
CSS pricing tables
Adaptive Pricing Table
Responsive Flip Pricing Table
Responsive Flip Pricing Table to view month or year price.
Pricing table UI design
pricing table ui
Pricing Table
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.
Bootstrap Pricing Table
062 – Price Table
Pricing Tables
Pricing Table
Pricing table comparing 3 different plans for a mystical computing company.
Material pricing tables
Experimental CSS tables
CSS Periodic Table
Period1K – JS1K 2016 Entry
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.
If you enjoyed reading this article on CSS tables, you should check out this one about Bootstrap tables.
We also wrote about a few related subjects like responsive tables with CSS, HTML tables, WordPress pricing table plugins, How to center a table with CSS, table background color and jQuery table plugins.
