Tables continue to be one of the best ways to present a lot of information in a easy-to-read manner. From side-by-side comparisons to big data presentation, tables feed into our human desire of wanting to see things as organized grids. And while tables have been part of HTML practically since it begun, CSS has allows HTML tabular data to progress to be more advanced, usable, and, well, darn good-looking.
In this article you will find a selection of tutorials and resources for styling HTML data tables with only CSS.
CSS Data Table Techniques
A tutorial and reference guide on how to make your tables look really sexy using CSS3. It takes you through the markup, offers sample code that you can copy/paste into your stylesheet (you can also download the source files). Check it out – these are some sweet-lookin’ tables, indeed.
Pimp Your Tables with CSS3 →View the Demo →
If you love shadows, rounded corners, gradients and all of the marvelous CSS3 features, then you will love this tutorial.
Feature Table Design with CSS3 →View the Demo →
This downloadable table gives you a scroll-able single HTML table with a fixed header. What that means is within a page you can have a vertically-long table that’s scrollable and doesn’t take up much vertical space, yet the header stays put so you know what each column is about (since the label is right there above the column).
Pure CSS Scrollable Table with Fixed Header →View the Demo →
This helpful 40-minute video tutorial covers basic table styling with CSS, the markup that creates a nice-looking table, some jQuery bonus stuff to make the table even more functional, and other handy info tidbits.
Table Styling with CSS (Video Tutorial) →View the Demo →
A simple-yet-extensive tutorial that covers how you can use CSS to improve the appearance of your table. It goes over the semantic markup, breaks the markup down, shows what CSS code to include, and also adds some optional jQuery to bring added functionality. Sample code is included with each step, including a download link to get all the code in one file.
Adding Style with CSS to get a Beautiful Table →View the Demo →
A simple tutorial on how to zebra-stripe your table using CSS. Zebra-striping is known for increasing usability in reading tables, since the alternating colors separate and differentiate rows from each other (like zebra stripes, hence the reference). This tutorial gives you code to insert into your stylesheet.
Zebra-striping Rows and Columns →View the Demo →
This is a tutorial on how to create a liquid “tableless” table using CSS. This tutorial provides sample code as well as a demo of how the “tableless” table looks like.
A Pure Liquid CSS “Tableless” Table →View the Demo →
An extensive tutorial that shows how to use CSS to beautify an HTML table. Specifically, it covers how to customize the borders, spacing, padding, background and colors of tables and table cells, how to create alternate-colored table rows (ie. zebra), and how to create hover effects. It shows a before/after table example and offers sample code in each step.
Styling Tables with CSS →View the Demo →
This resource is an oldie but definetly a goodie. It offers over 60 basic table styles for you to download for free. But downloading, sorting, and trying them out on your own is a huge pain in the butt, so this page thankfully includes a live preview of each – just click on a table style to see how it looks like, and if you like it, simply click the download link to get the CSS file for your own use.
CSS Table Gallery (with Stylesheet Downloads) →
Another oldie, but still an excellent resource. You will find five techniques for styling your data table using CSS to get a specifc type. It gives you a preview image and sample code for each table type. Included table types are: Post-it note, services/choices matrix, staff contact, software table with highlights, and statistics/scores.
CSS Styling Tutorial to Get a Specific Table Type →
If you’re having trouble coming up with design ideas for your tables, or you’re just not sure which design to go with, this resource is for you. It showcases 10 different designs. Preview images are included—as well as pros and cons of each design—so you can quickly scan and see what design is best suited for your next table. Included designs are: horizontal minimalist, vertical minimalist, box, horizontal zebra, vertical zebra, one column emphasis, newspaper, rounded corner, table background, and cell background.
Top 10 CSS Table Designs →
CSS Data Table UI Patterns
Tables are meant to be read and used by users after all, and this article will help you maximize usability of your tables. It goes over of the purpose of tables, reminds not to use faux tables and why, explains when to use tables, mentions the need for filtering and sorting when possible, and then gets into how to most effectively style your tables.
Better UI Design of Tables →
This resource showcases different types of patterns you can use in your tables to increase readability, usability, and just plain ol’ sexiness. Included pattern types (with image previews and real website examples) are alternating rows (ie. zebra), full row selection, table sections, sorting, filtering, pagination, continuous scrolling, fixed table header (like the ‘scrollable table with fixed header’ above), headerless table, expandable rows, row actions (like inline, hover, and menu), and actions on multiple rows.
Ultimate Guide to Table UI Patterns →
An extensive guide on creating accessible tables to increase usability. After briefly covering the history of tables, this guide goes offers guidelines and tips on how to make your tables as accessible as possible as well as how to simplify complex tables. It even includes a data table accessibility test to test different ways tables can be marked up to make the accessible to screen reader and Braille device users.
Usability Guide for Accessible Data Tables →
CSS Data Table Inspiration
• 50 Product Comparison Tables in Web Design →
• 40 Fantastic Pricing Tables for Your Inspiration →
• Tables on Pattern Tap →
• Pricing Tables on Ember →