Feed

17 julho 2008

Estilizando tabelas no XHTML <table>



imagem

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.



;)

7 comentários:

  1. Ótimo artigo, parabéns!
    Engraçado que ainda me bato com pessoas que não sabem o valor de um thead, tfoot, th e tbody.

    Coisa minha agora: eu tiraria o border="0" cellpadding="0" cellspacing="0" da table e gostei muito de ver o summary alí ;)

    bjo.

    ResponderExcluir
  2. Sou um odiador - se é que essa palavra existe - de tabelas, mas isso ajuda muito a fazer do layout um pouco mais confiavel. Tabelas tem suas qualidade e problemas como qualquer coisa mas quando bem usada ajuda mais que atrapalha.

    Belo post.

    ResponderExcluir
  3. Com certeza pablo.. eu também odeio usar tabelas, mas tem horas que não tem jeito mesmo! E muito obrigada! ;)

    ResponderExcluir
  4. Cara você já teve problemas ao adicionar uma imagem que repete em Y de background em uma tr? Aqui comigo só funciona no Firefox, webkit e IE repete os bgs como se fossem das td, dai perde completamente o efeito da imagem... =(
    Se souber de algum macete ou alguma dica, compartilhe aew ;)

    Valew

    ResponderExcluir
  5. Ei Bruno,
    Eu ja tive problemas com BG no IE e era por causa da sequência de comandos. Não sei se resolve, mas tenta ai. Eu faço assim:
    background:cor img repetição posicao1 posicao2;

    Antes eu colocava a repetição por ultimo, e quanto troquei essa ordem, resolveu.
    Espero que dê certo, qualquer coisa me manda o link pra dar uma olhada.

    Abs.

    ResponderExcluir
  6. 'Dia Cleo,

    Esse seu exemplo "calçou" certeiramente num relatório que eu estou trabalhando, principalmente nas cores.

    Obrigado pelas informações.

    []'s

    ResponderExcluir
  7. Eu fiz o comentário do "calçou" :P. Não foi meu nome...

    ResponderExcluir