XHTML - Tabelas

Uma tabela tem dois componentes: linhas e colunas. Na interseo desses componentes que os dados ficam armazenados. Essa interseo chamada de clula As tabelas so estruturas poderosas da linguagem XHTML. Praticamente tudo o que possvel ter na Seo body de um hipertexto pode colocar-se nas clulas de uma tabela.

Professores: Andre Augusto Menegassi - andremenegassi@unoeste.br Cristiane Maciel Rizo - cris@unoeste.br Silvio Antonio Carro - silvio@unoeste.br

XHTML - Tabelas
Antes de comear!
Antes de criar uma tabela voc deve ter uma boa ideia de como ela supostamente deve se parecer.

XHTML - Tabelas
Em XHTML, o incio de uma tabela identificado pela tag <table> e o fim por </table>. Cada linha, de uma tabela, identificada pelas tags <tr> e </tr> Em cada linha so definidas clulas com as tags <td> e </td> O procedimento para a criao de uma tabela implica a definio seqencial, da esquerda para a direita e de cima para baixo, do contedo de cada clula.

XHTML - Tabelas
Exemplo: <table> <tr> <td> CSS </td> <td> CSS </td> <td> CSS </td> </tr> <tr> <td> XHTML </td> <td> XHTML</td> <td> XHTML </td> </tr> </table>

XHTML Tabelas
A tag <th> define um cabealho, ou seja, uma clula com destaque da linha da tabela <th>...</th> Exemplo:
<table> <tr> <th> Web</th> <th> Web </th> <th> Web </th> </tr> <tr> <td> CSS </td> <td> CSS </td> <td> CSS </td> </tr> <tr> <td> XHTML </td> <td> XHTML</td> <td> XHTML </td> </tr> </table>

XHTML Tabelas
caption: Legenda (ttulo da tabela), sempre centralizada em relao tabela. Tem a propriedade align com os valores top (acima) ou bottom (abaixo)
<table> <caption>CSS & XHTML</caption> <tr> <th> Web </th> <th> Web </th> <th> Web </th> </tr> <tr> <td> CSS </td> <td> CSS </td> <td> CSS </td> </tr> <tr> <td> XHTML </td> <td> XHTML </td> <td> XHTML </td> </tr> </table>

XHTML Tabelas
Para organizar melhor as linhas das tabelas, podem ser usados outros 3 elementos: <thead> cabealho da tabela <tfoot> rodap da tabela <tbody> corpo da tabela
As tags <thead> e <tfoot> devem aparecer na parte inicial da definio da tabela

Uma tabela s pode ter uma tag <thead> e <tfoot>, mas quantas tags <tbody> forem necessrias. Cada elemento deve conter pelo menos uma linha (usando <tr>)

XHTML Tabelas
Exemplo: <table border = "1"> <caption> Lista de Notas </caption> <thead> <tr> <th> Aluno </th> <th> Nota </th> </tr> </thead> <tfoot> <tr> <td> 1 Bimestre </td> <td> Setembro/2010 </td> </tr> </tfoot> <tbody> <tr> <td> Maria </td> <td> 8.0 </td> </tr> </tbody> </table>

XHTML Tabelas
Atributos para <table>: XHTML cellpadding="espao entre as margens e o contedo das clulas" cellspacing=tamanho das margens interiores" *** A formatao da tabela dever ser estilizada no CSS ***

XHTML Tabelas
As tabelas podem tambm ser flexveis, utilizando um processo conhecido como spanning para melhor apresentao dos dados; O spanning permite que uma nica clula ocupe mais espao do que outra clula na mesma linha ou coluna

XHTML Tabelas
<table border = "1"> <tr> <th> Aposento </th> <th> Dimenses do Aposento </th> </tr> <tr> <th></th> <th> Comprimento </th> <th> Largura </th> </tr> <tr> <td> Sala </td> <td> 6 m </td> <td> 7,6 m </td> </tr> <tr> <td> Quarto </td> <td> 3,6 m </td> <td> 5,8 m </td> </tr> <tr> <td> Cozinha </td> <td> 4,6 m </td> <td> 6 m </td> </tr> </table>

XHTML Tabelas
possvel ajustar a aparncia desta tabela; Observe a clula do cabealho que contm a palavra Aposento, ela poderia ser ajustada para ocupar duas linhas com a utilizao do atributo rowspan. Rowspan=X: transformar X linhas em apenas uma

XHTML Tabelas
<table border = "1"> <tr> <th rowspan=2> Aposento </th> <th> Dimenses do Aposento </th> </tr> <tr> <th></th> <th> Comprimento </th> <th> Largura </th> </tr> <tr> <td> Sala </td> <td> 6 m </td> <td> 7,6 m </td> </tr> <tr> <td> Quarto </td> <td> 3,6 m </td> <td> 5,8 m </td> </tr> <tr> <td> Cozinha </td> <td> 4,6 m </td> <td> 6 m </td> </tr> </table>

XHTML Tabelas
<table border = "1"> <tr> <th rowspan=2> Aposento </th> <th> Dimenses do Aposento </th> </tr> <tr> <th> Comprimento </th> <th> Largura </th> </tr> <tr> <td> Sala </td> <td> 6 m </td> <td> 7,6 m </td> </tr> <tr> <td> Quarto </td> <td> 3,6 m </td> <td> 5,8 m </td> </tr> <tr> <td> Cozinha </td> <td> 4,6 m </td> <td> 6 m </td> </tr> </table>

XHTML Tabelas
Observe a clula do cabealho que contm a palavra Dimenses do Aposento, ela poderia ser ajustada para ocupar duas colunas com a utilizao do atributo colspan. Colspan=X: transformar X colunas em apenas uma

XHTML Tabelas
<table border = "1"> <tr> <th rowspan=2> Aposento </th> <th colspan=2> Dimenses do Aposento </th> </tr> <tr> <th> Comprimento </th> <th> Largura </th> </tr> <tr> <td> Sala </td> <td> 6 m </td> <td> 7,6 m </td> </tr> <tr> <td> Quarto </td> <td> 3,6 m </td> <td> 5,8 m </td> </tr> <tr> <td> Cozinha </td> <td> 4,6 m </td> <td> 6 m </td> </tr> </table>

Tabelas aninhadas