PPSI I - Tabelas HTML

Tabelas HTML

Utilização de tabelas:

As tabelas foram uma grande conquista para os autores de documentos para a Web. Com elas é possível, por exemplo, termos estas páginas do tutorial organizadas em colunas, sendo uma delas voltada exclusivamente aos links de navegação e observações. Tabelas implementam um conceito importante de design, as "grades", segundo as quais organizamos textos e ilustrações de maneira organizada.

Como já foi possível perceber, as tabelas podem conter textos, listas, parágrafos, imagens, diversas outras formatações - inclusive outras tabelas. Novas versões de HTML e de navegadores populares vêm acrescentando diversos atributos às tabelas, e nosso objetivo aqui é saber lidar com a maioria desses recursos disponíveis.

A formatação de tabelas faz parte da versão 3.0 da linguagem HTML. Manipular tabelas em HTML dá trabalho e necessita de calma.

A tag para criação de uma tabela é <table>, e dentro dela você coloca atributos importantes para a criação correta da sua tabela. Não esqueça de fazer o fechamento da tag com </table>.

Fonte: http://www.linhadecodigo.com.br/artigo/82/html-avancado.aspx#ixzz2OW25

I. td, tr, th

A tag <td>é utilizada para demarcar o conteúdo de uma célula da tabela.

A tag <tr> é utilizada para demarcar o conteúdo de uma linha de tabela.

Ex do código utilizando as tags <td> e <th>:

<table summary="Esta tabela mostra a evolução da cotação do dólar turismo nos últimos 12 

meses, mês a mês.">

<tr>

<td>R$ 1,97</td><td>R$ 2,02</td>

</tr>

</table>

A tag <th> é utilizada para demarcar o conteúdo do cabeçalho de uma coluna.

Ex do código utilizando a tag <th>:

<table summary="Esta tabela mostra a evolução da cotação do dólar turismo nos últimos 12 meses, mês a mês."><tr>
<th id="ex31a_col_jun">Junho</th>
<th id="ex31a_col_jul">Julho</th>
</tr>
<tr>
<td headers="ex31a_col_jun">R$ 1,97</td>
<td headers="ex31a_col_jul">R$ 2,02</td>
</tr>
</table>

II. Caption

As tags <caption> e </caption> são utilizadas para definir uma legenda de uma tabela.

Ex do código usando a tag <caption>:

<table summary="Esta tabela mostra a evolução da cotação do dólar turismo nos últimos 2 meses."><caption>Cotação do dólar turismo</caption>
<tr>
<th id="ex31b_col_jun">Junho</th>
<th id="ex31b_col_jul">Julho</th>
</tr>
<tr>
<td headers="ex31b_col_jun">R$ 2,02</td>
<td headers="ex31b_col_jul">R$ 1,97</td>
</tr>
</table>

fonte:http://warau.nied.unicamp.br/warauv2/?q=node/31

III.thead, tfoot, tbody.

Utilizando as tags <thead>, <tbody> e <tfoot>, podemos dar à nossa tabela, respectivamente, um cabeçalho, definir o "corpo" dos dados e adicionar um rodapé. Observe o exemplo abaixo para entender:

<table width="300">

<thead>

<th>Mês</th>

<th>Vendas</th>

  </thead>

    <tbody>  

         <tr>
         <td>Janeiro</td>
         <td>R$ 1467</td>
</tr>
<td>Fevereiro</td>
         <td>R$ 956</td>
         </tr>
         <tr>
         <td>Março</td>
         <td>R$ 1593</td>
         </tr>
   </tbody>
   <tfoot>
       <th>Total</th>
       <th>R$ 4016</th>
   </tfoot>
</table>

Mês Vendas Janeiro R$ 1467 Fevereiro R$ 956 Março R$ 1593 Total R$ 4016

Note que junto com as tags <thead> e <tfoot> usamos <th> para criar uma célula, em vez de <td>. O texto dessas células será automaticamente centralizado e formatado com negrito.

Com algumas linhas de CSS, podemos estilizar o cabeçalho e o rodapé da nossa tabela, colocando-o em itálico:

thead { font-style: italic; } tfooter { font-style: italic; } Mês Vendas Janeiro R$ 1467 Fevereiro R$ 956 Março R$ 1593 Total R$ 4016

Você pode estar pensando "ok, mas isso eu posso fazer apenas colocando o texto das células do cabeçalho e do rodapé em itálico". Pode, mas como eu disse no começo do artigo, o objetivo dessas três tags é deixar a tabela mais semântica.

Vamos imaginar que a tabela do exemplo está no site de uma empresa que publica dados contábeis. O site tem algumas dezenas de tabelas semelhantes. Hoje todas as tabelas têm o cabeçalho e o rodapé em itálico, mas o layout do site vai ser alterado e todas as tabelas passarão a ter o cabeçalho em vermelho, o rodapé em azul - ambos alinhados à esquerda - e o corpo da tabela em cinza.

Se você deixou o cabeçalho e o rodapé de todas as tabelas em itálico utilizando a tag <i> ou a tag <em>, vai ter um bom trabalho alterando a aparência e alinhamento de cada tabela. Mesmo utilizando um editor visual, lá se vão algumas horas cuidando disso.

Mas se o seu código for semântico (ou seja, no arquivo HTML ficam os dados em tags corretas, e no arquivo CSS fica o estilo da página), basta alterar algumas linhas da sua folha de estilo para alterar todas as tabelas do site. Veja o exemplo:

thead {
text-align:left;
color: #900;
}
tbody {
color: #666
}
tfooter {
text-align: left;
color: #009;
 }

Mês	Vendas
Janeiro	R$ 1467
Fevereiro	R$ 956
Março	R$ 1593
Total	R$ 4016

fonte:  http://www.infowester.com/tagsdesconhecidas2.php