It might not seem like it but styling tabular data can be a lot of fun. From a semantic point of view, there are plenty of elements to tie some style into. You have cells, rows, row groups and, of course, the table element itself. Adding CSS to a paragraph just isn’t as exciting. Where do I start? First, if you have some tabular data (you know, like a spreadsheet with rows and columns) that you’d like to spiffy up, pop it into a table — it’s rightful place! To add more semantics to your table — and coincidentally to add more hooks for CSS — break up your table into row groups. There are three types of row groups: the header (

thead

), the body (

tbody

) and the footer (

foot

). You can only have one header and one footer but you can have as many table bodies as is appropriate. Table Striping To improve scanning information within a table, a common technique is to style alternating rows. Also known as zebra tables. Whether you apply it using a class on every other row or turn to JavaScript to accomplish the task, a handy-dandy trick is to use a semi-transparent PNG as your background image. This is especially useful over patterned backgrounds.

tbody tr.odd td
 {
     background:transparent url(background.png) repeat top left;
 }

 * html tbody tr.odd td
 {
     background:#C00;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
          src=‘background.png’, sizingMethod=‘scale’);
 }

We turn off the default background and apply our PNG hack to have this work in Internet Explorer. Styling Columns Did you know you could style a column? That’s right. You can add special column (col) or column group (colgroup) elements. With that you can add border or background styles to the column.

Demo: http://24ways.org/examples/tables-with-style/table_default.html

Source: http://24ways.org/2005/tables-with-style

Related Listings:

1. Tables with Style CSS It might not seem like it but styling tabular data...
2. Tablecloth : Style your Tables Tablecloth is lightweight, easy to use, unobtrusive way to add...
3. New Sort Table Rows with Ajax Simple sort script using Stuart Langridge’s sortabe.js Some days ago...
4. Improving Extra Wide Tables Grid View The codebase for the web application I am currently working...
5. Scrollable Table – JQuery Plugin This JavaScript code can be used to convert tables in...

Do you like this post?

Email: