12 Useful CSS Table tutorials


1. Pimp Your Tables with CSS3


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.

2. Feature Table Design with CSS3


If you love shadows, rounded corners, gradients and all of the marvelous CSS3 features, then you will love this tutorial.

3. Pure CSS Scrollable Table with Fixed Header


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).

4. Table Styling with CSS (Video Tutorial)


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.

5. Adding Style with CSS to get a Beautiful Table


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.

6. Zebra-striping Rows and Columns


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.

7. A Pure Liquid CSS “Tableless” Table


This is a tutorial on how to create a liquid “tableless” table using CSS.

8. Styling Tables with CSS


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.

9. CSS Table Gallery (with Stylesheet Downloads)


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.

10. CSS Styling Tutorial to Get a Specific Table Type


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.

11. Better UI Design of Tables


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.

12. Ultimate Guide to Table UI Patterns


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.




Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>