Home arrow Style Sheets arrow Styling HTML Tables with CSS
STYLE SHEETS

Styling HTML Tables with CSS


In this easy to digest web design tutorial, you will learn how to style HTML tables with CSS (cascading style sheets).

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
July 05, 2011
TABLE OF CONTENTS:
  1. · Styling HTML Tables with CSS
  2. · Implementing CSS in HTML Tables

print this article
SEARCH DEVARTICLES

Styling HTML Tables with CSS
(Page 1 of 2 )

While the history of HTML tables over time isn’t catchy enough to make a movie out of, (the box office would be one of the most desolated places around), it’s fair to admit that it has a few interesting and funny twists. To make a quick recap, in the 90’s the web was a pushing - yet primitive - creature plagued with ugly <font> tags and inline JavaScript handlers; tables were a sort of wildcard that fitted in every possible scenario, ranging from displaying some scarce and dull paragraphs, to the construction of complex web page layouts. They were a designer's best friend.

Then, many people started to realize that using tables for creating layouts was wrong, and as a result, they were replaced (at a pretty slow pace) by the venerable and often abused divs. In increments, a new state of “consciousness” took over, and as a consequence, tables were delegated to a dark corner, only visited by the brave souls who dared to confront the enemy face to face. End of the story? Well, not really.

In fact, from the very beginning tables were created for displaying tabular data, regardless of the use or misuse that they’ve suffered over the years. And to be honest, they’re unbeatable when employed for the purpose for which they were conceived in the first place. Naturally, it’s probable that at this moment you’re thinking to yourself that you’re effectively using your tables the right way. So, what’s the big deal with them? In reality, dropping a table on a web page is a dead simple process; however, doing this semantically and make the table look pleasing to the eyes is quite different.

Does this mean that it’s impossible to code semantic tables that look good as well? Of course not. What’s more, with a little bit of willpower and the use of a few straightforward CSS styles, it’s feasible to achieve this balance without suffering premature hair loss. And best of all, the experience can be really instructive, and also fun.

With that said, in the lines to come I’ll be showing you in a step-by-step fashion how to give your HTML tables the appearance that they truly deserve, while keeping their semantic meaning pristine and clean.

Getting started: creating a sample HTML table

As the powers-that-be claim, HTML tables should be used for showing tabular data. While sticking to this principle is fairly simple, the subtle details that surround the implementation process can sometimes be a bit tricky, as it’s mandatory to represent (in a semantic way) the presence of these elements within the markup.

Naturally, the best way to face this challenge is by example. Given that, in this particular case I’m going to recreate a hypothetical scenario, where it’s necessary to create an online buying guide containing hardware components of a few different models of desktop computers offered by a fictional company.

To build this typical guide, the best ally is - yes, a plain table! Thus, take a peek at the one coded below, which is quite easy to grasp: 

<table summary="Desktop Computer Buying Guide">
    <caption>Desktop Computer Buying Guide</caption>
    <thead>
        <tr>
            <td class="first-col"></td>
            <th scope="col" abbr="Computer Model 1">Computer Model 1</th>
            <th scope="col" abbr="Computer Model 2">Computer Model 2</th>
            <th scope="col" abbr="Computer Model 3">Computer Model 3</th>   
        </tr>
    </thead>   
    <tfoot>
        <tr>
            <td class="first-col"></td>   
            <th scope="col" abbr="Price">Price<br />u$s 750</th>
            <th scope="col" abbr="Price">Price<br />u$s 600</th>
            <th scope="col" abbr="Price">Price<br />u$s 450</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th scope="row">Motherboard</th>
            <td>Asus</td>
            <td>Intel</td>
            <td>Biostar</td>
        </tr>
        <tr class="odd">
            <th scope="row">Processor</th>
            <td>Intel Core i7</td>
            <td>AMD Phenom II</td>
            <td>Intel Core i5</td>
        </tr>
        <tr>
            <th scope="row">Memory</th>
            <td>8 MB</td>
            <td>6 MB</td>
            <td>4 MB</td>
        </tr>
        <tr class="odd">
            <th scope="row">Hard Drive</th>
            <td>Seagate Barracuda 1 TB</td>
            <td>Western Digital 500 GB</td>
            <td>Seagate Barracuda 320 GB</td>
        </tr>
        <tr>
            <th scope="row">Video Card</th>
            <td>GeForce</td>
            <td>ATI Radeon HD</td>
            <td>FirePro</td>
        </tr>
        <tr class="odd">
            <th scope="row">Monitor</th>
            <td>Samsung LCD 23"</td>
            <td>Acer LCD 20"</td>
            <td>Asus LCD 19"</td>
        </tr>
        <tr>
            <th scope="row">Operating System</th>
            <td>Windows 7 64 Bits</td>
            <td>Windows 7 64 Bits</td>
            <td>Windows 7 32 Bits</td>
        </tr>
    </tbody>
</table>
     
While the skeleton of this table is self-explanatory, it contains a few additional elements that deserve a brief explanation. First off, a decent table should be broken down in well-differentiated sections, right? Well, that’s why the above one uses the “<thead>”, “<tfoot>” and “<tbody”> elements, which make it clearer to see the relevance of each item within this sample buying guide.

Next, it’s worth noting the use of the <caption> and <summary> tags, which allow you to represent the table’s primary heading element, especially when using screen readers. And last, but not least, you should pay attention to the usage of the “scope” attribute with the corresponding rows, something that comes in handy for semantically reflecting a specific item spans either a row or a column in the table.

So far, so good. Now that I managed to build a simple - yet semantic - table that permits users to pick out a computer model from the few available, it’s time to move on and start spicing up the table’s visual presentation with CSS. As you may have noticed, the table contains a couple of CSS classes already, like “first-col” and “odd”, which will be used for providing it, among other things, with the classic “zebra” look.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials