CSS tables and their code that you can use

CSS tables and their code that you can use

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.


Up Next:

Tips for improving JavaScript performance

Tips for improving JavaScript performance