CHR Designer

Olá pessoal… hoje eu vou explicar um pouco sobre Tabela Semântica, esse post vai ajudar muito o meu amigo Alex que trabalha comigo lá na Mundo Click e também espero ajudar muitas pessoas que tem a mesma dúvida que a dele, então chega de papo e vamos começar o que interessa.

Bom primeiro eu vou mostrar como era uma tabela antiga sem semântica:

<table cellpadding=”0″ cellspacing=”0″ border=”1″>
<tr>
<td>TITULO 1</td>
<td>TITULO 3</td>
<td>TITULO 3</td>
</tr>
<tr>
<td>TEXTO 1</td>
<td>TEXTO 2</td>
<td>TEXTO 3</td>
</tr>
<tr>
<td>RODAPÉ 1</td>
<td>RODAPÉ 2</td>
<td>RODAPÉ 3</td>
</tr>
</table>

Como vocês podem ver eu fiz uma tabela muito simples de 3 colunas , só para quem ainda não conhece eu vou explicar para que serve cada TAG.

<table> - A tag TABLE é o corpo da tabela dentro dela que vocês colocam todos os dados, ainda nele tem varias propriedades que podem ser integradas como cellpadding e cellspacing essas duas propriedades servem para tirar o espaçamento padrão que vem na TAG table e ainda tem várias propriedades que podem ser utilizadas.

<tr> - A tag TR ela sempre vem depois da TABLE porque ela é responsável de criar as colulas da tabela.

<td> - A tag TD ela é a celula da tabela é o lugar onde você o conteudos.

Agora é montar uma tabela seguindo as regras de semântica:

<table summary=”Tabela Semântica” cellpadding=”0″ cellspacing=”0″ border=”1″>
<thead>
<tr>
<th>TITULO 1</th>
<th>TITULO 3</th>
<th>TITULO 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>RODAPÉ 1</th>
<th>RODAPÉ 2</th>
<th>RODAPÉ 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>TEXTO 1</td>
<td>TEXTO 2</td>
<td>TEXTO 3</td>
</tr>
</tbody>
</table>

Dá para ver como muda bastante mas estruturamente é a mesma mesma tabela somente o “ROPAPÉ” que mudou de lugar para ficar mais simples de entender eu vou explicar cada uma. As tags TABLE, TR, TD continuam mas agora adicionamos mais 4 tags e uma propriedade na tag TABLE.

SUMMARY - Essa propriedade serve para colocar “nome/titulo” da sua tabela.

<THEAD> -  essa tag é muito importânte porque nela que vai o cabeçalho da sua tabela.

<TFOOT> -  essa tag também é importate mesmo colocando ela abaixo da THEAD ela sempre vai ficar no rodapé da sua tabela.

<TH> -  essa th só funciona dentro da THEAD e TFOOT e o padrão dessa tag é negrito e centralizado.

<TBODY> - como o nome dela já diz ela é o corpo da sua tabela dentro dela podem ser colocadas as tags TR e TD.

Espero ter ajudado mas se vocês tiverem muitas dúvidas é só deixar um comentário ou mandar um email “chrdesigner@chrdesigner.com” que eu respondo até a proxima.

- Visualizar Exemplo

- Download do Arquivo