12 Useful CSS Table tutorials
- Jan 23, 2012
- 0 Comment
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.