Estilizando tabelas no XHTML <table>

Quem me conhece sabe que odeio trabalhar com tabelas, sou completamente viciada em tableless, mas dependendo do desenvolvimento, não é muito funcional deixar de lado as tabelinhas.

Eu acho o uso de tableless essencial e muito mais fácil para sites que não exibirão dados tabulares. Com o uso das tags certas e CSS, é possível colocar os elementos de um site em qualquer posição. Mas não é a mesma coisa quando vamos carregar dados de um banco de dados, por exemplo.

O artigo de hoje é para mostrar uma maneira mais fácil de exibir esses dados com o uso de tabelas e estilização via CSS, sem a necessidade de inventar um tanto de classes e id's. Começando pelas principais tags:

1. <table>: delimita a tabela. É a primeira tag;


2. <caption>: título da tabela;


3. <thead>: cabeçalho;


4. <tfoot>: última linha da tabela;


5. <tbody>: para delimitar o meio da tabela;


6. <tr>: linhas;


7. <td>/<th>: células.

ps.: Visite o tópico de tabelas da W3 para ler mais sobre outras tags e aplicações.

O código da nossa tabela:

<table border="0" cellpadding="0" cellspacing="0" summary="Essa tabela é para apresentar alguns dos sites que vocês podem me encontrar.">
    <caption>Onde encontrar a Cléo</caption>

    <thead>
        <tr>
            <th>Ícone</th>
            <th>Nome do site</th>
            <th>Link</th>
            <th>Descrição</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th colspan="4">by Cléo Morgause</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td><img src="http://imgSRC/googlereader.png" title="Google Reader" alt="icone" /></td>
            <td>Google Reader</td>
            <td>http://www.google.com/reader/shared/13446221401570394803</td>
            <td>Artigos compartilhados de alguns dos blogs que eu acompanho.</td>
        </tr>
        <tr class="par">
            <td><img src="http://imgSRC/twitter.png" title="twitter" alt="icone" /></td>
            <td>twitter</td>
            <td>http://twitter.com/cleomorgause/</td>
            <td>Rede social que permite o envio de mensagens de até 140 caracteres. Útil para divulgação de conteúdo e links.</td>
        </tr>
        <tr>
            <td><img src="http://imgSRC/delicious.png" title="del.icio.us" alt="icone" /></td>
            <td>del.icio.us</td>
            <td>http://del.icio.us/cleomorgause/</td>
            <td>Coleção dos meus links favoritos e também aqueles que acho mais úteis. É ótimo, pois não me preocupo em ficar salvando bookmarks em HTML.</td>
        </tr>
        <tr class="par">
            <td><img src="http://imgSRC/internal.png" title="friendfeed" alt="icone" /></td>
            <td>friendfeed</td>
            <td>http://friendfeed.com/cleomorgause</td>
            <td>Junta todos os meus updates em um só lugar.</td>
        </tr>
        <tr>
            <td><img src="http://imgSRC/plurk.png" title="PLURK" alt="icone" /></td>
            <td>PLURK</td>
            <td>http://www.plurk.com/user/cleomorgause</td>
            <td>Funciona como o twitter, mas acho mais interativo e mais viciante.. hehe.</td>
        </tr>
    </tbody>
</table>

Agora que usamos as tags certas, fica muito mais fácil colocar estilo na tabela. Note que a única classe usada foi para diferenciar uma linha da outra, e mesmo assim só muda o background e o :hover da linha.

Abaixo o CSS que eu fiz:

* {
    margin:0;
    padding:0;
}

body {
    font:11px Verdana, Arial, Helvetica, sans-serif normal;
    color:#333;
}


/*TABELA*/
table {
    background:#D1DCDF;
    border:1px solid;
    border-collapse:collapse;
}

table, caption {
    margin:auto;
    width:748px;
}

caption {
    color:#003D5F;
    font:700 18px Georgia, "Times New Roman", Times, serif;
    padding:6px 4px 8px 0px;
    text-transform:uppercase;
}

    caption, thead th, tfoot th {
        text-align:center;
    }

    thead th, tfoot th {
        background:#305761;
        font-weight:700;
        padding-top:3px;
    }

    tbody th, tbody td {
        text-align:left;
        vertical-align:top;
    }

        tbody tr:hover {
            background:#88839E;
        }

    tfoot th {
        font:9px Georgia, "Times New Roman", Times, serif;
        text-align:right;
    }

        td, th {
            border:1px dotted;
            padding:5px;
        }

        .par {
            background-color:#90A8A8;
        }

            tbody tr.par:hover {
                background:#585370;
            }


/*CORES*/
table, thead th, tfoot th, tbody tr:hover, td, th {
    border-color:#003D5F;
}

thead th, tfoot th, tbody tr:hover, tbody tr.par:hover {
    color:#FFF;
}

No final a tabela deverá ficar assim.

Qualquer dúvida postem nos comentários.
Se preferirem, baixem o arquivo XHTML.

Links interessantes

No site CSS TABLE GALLERY tem uma lista com quase 100 CSS de estilização de tabelas disponíveis para download, além de poder enviar seu próprio estilo para outras pessoas baixarem. Vale a pena dar uma conferida.

;)