A tabela um elemento para insero de material que requer uma estrutura tabular (dados dispostos em linhas e colunas).

. Podem ser usadas para organizar calendrio, cronogramas, estatsticas ou outros tipos de informaes. x x x Podem conter quaisquer tipos de dados: nmeros, elementos textuais, imagens e objetos multimdia. Eram usadas para criar layouts e controlar alinhamentos e espaos em branco Acessibilidade: leitores de tela ou dispositivos de sada em Braile podem ser usados na leitura de tabelas do site. Exemplo de uma tabela simples:

Estrutura mnima de uma tabela:

Tabelas so compostas de linhas que contm clulas. As clulas so os containers para o contedo.

Traduzindo para o HTML:

(elementos que compem a estrutura mnima de uma tabela) Tabela (table), linhas (tr, table row ou linha de tabela) e clulas (th, para table headers ou cabealhos e td, table data ou dados de tabela)

Exerccio: Tente escrever a marcao para a tabela mostrada.

Marcao:
<table> <tr> <th>Item do cardpio</th> <th>Calorias</th> <td>Gordura(g)</td> </tr> <tr> <td>Sopa de galinha</td> <td>120</td> <td>2</td> </tr> <tr> <td>Salada Caesar</td> <td>400</td> <td>26</td> </tr> </table>

Todo contedo de uma tabela deve estar inserido em clulas (dentro de td e tr).

A extenso (spanning) de clulas um recurso fundamental da estrutura de tabelas. A extenso de uma clula pode cobrir vrias linhas ou colunas permitindo criar estruturas complexas de tabelas adicionando os atributos
colspan ou rowspan respectivamente.

As extenses de colunas so criadas com o atributo colspan nos elementos td ou th esticando uma clula para direita a fim de abranger as colunas subseqentes. Exemplo:

Gordura
Gordura saturada (g) Gordura insaturada (g)

Exerccio: Tente escrever a marcao para a tabela mostrada.

Marcao:
<table> <tr> <th colspan=2>Gordura</th> </tr> <tr> <td>Gordura saturada (g)</td> <td>Gordura insaturada (g)</td> </tr> </table>

Dever haver um cuidado especial quanto aos valores de colspan em no especificar um nmero que exceda o nmero de colunas da tabela. Os navegadores podero adicionar colunas mesma modificando totalmente o resultado.

As extenses de linhas so criadas com o atributo rowspan e funcionam como extenses de colunas, exceto que elas fazem com que as clulas se estendam para baixo por vrias linhas.

Pequena (200g)

Poro

Mdia (350g) Grande (500g)

Exerccio: Tente escrever a marcao para a tabela mostrada. Marcao:

<table> <tr> <th rowspan=3>Poro</th> <td>Pequena (200g)</td> </tr> <tr> <td> Mdia (350g)</td> </tr> <tr> <td> Grande (500g)</td> </tr> </table>

cellpadding e cellspacing (usados somente com o elemento table) cellppading: se aplica a todas as clulas da tabela Para aplicao individual usa-se o padding (CSS) cellspacing: espaamento entre clulas (padro do navegador 2px)