Tabelas HTML 5
- sitedesignbr
- 26 de set.
- 3 min de leitura
Tabelas
O uso de tabelas era muito comum há alguns anos para a definição de áreas do site.
Seu uso para essa finalidade acabou se tornando prejudicial pela complexidade da
marcação, o que dificulta bastante a manutenção das páginas. Além disso havia uma
implicação direta na definição de relevância do conteúdo das tabelas para os
indexadores de conteúdo por mecanismos de busca. Entretanto, ainda hoje, quando
é necessário exibir uma série de dados tabulares, é indicado o uso da tag de tabela.
A estrutura e o conteúdo da tabela devem ficar dentro das TAGs <table></table>.
2.8.1 Título da tabela (elemento caption)
A TAG <caption> especifica o título de uma tabela. Por exemplo:
2.8.2 Table row (elemento tr)
A TAG <tr> indica o início de uma linha na tabela. Cada linha da tabela pode conter
várias células, e, portanto, é necessário que se faça uso de uma marcação que indique
exatamente o ponto de quebra de uma linha e início de outra. Toda linha deve terminar
com um </tr>.
2.8.3 Table headings (elemento th)
A TAG <th> é usada para especificar as células de cabeçalho da tabela. Essas células
são diferentes das outras, pois seu conteúdo aparece geralmente em negrito.
O
elemento “th” pode ser apresentado sem conteúdo algum: isso corresponde a uma
<a href="mailto:exemplo@exemplo.com?subject=Assunto do e-mail&body=Exemplo de
texto">Enviar e-mail</a>
<caption>Título da tabela</caption>
15
célula em branco. As tabelas podem ainda conter mais de um “th” para uma dada
coluna, ou linha, ou simplesmente não conter nenhum elemento “th”, isto é, não conter
em nenhuma célula em destaque.
2.8.4 Table data (elemento td)
A TAG <td> especifica a células de dados de uma tabela. Por se tratar de dados
comuns (e não cabeçalhos), essas células possuem seu conteúdo escrito em fonte
normal, sem nenhum destaque e alinhamento à esquerda. Assim como o “th”, pode-
se construir células em branco, usando o elemento “td”.
Exemplo de tabela com os elementos citados acima:
2.8.5 Border
O “border” é um atributo opcional para ser usado com “table”, que quanto está
presente, a tabela é formatada com linhas de borda.
Esse atributo recebe um valor que vai estabelecer qual a espessura (além da
existência) da linha de borda da tabela (border="valor"). Se o valor atribuído for 0
(zero), o “border” funciona exatamente como o caso padrão, sem o “border”. Dessa
maneira, é possível colocar tabelas em maior destaque, atribuindo um valor maior que
1.
<table>
<tr>
<th>Título da primeira coluna</th>
<th>Título da segunda coluna</th>
</tr>
<tr>
<td>Linha 1, coluna 1.</td>
<td>Linha 1, coluna 2.</td>
</tr>
<tr>
<td>Linha 2, coluna 1.</td>
<td>Linha 2, coluna 2.</td>
</tr>
</table>
16
Exemplo:
2.8.6 Align
Este atributo pode ser aplicado a “th”, “td” ou “tr”, e faz controle do alinhamento do
texto dentro de uma célula, com relação as bordas laterais. Quando aplicado a “tr”, ele
define o alinhamento de toda uma linha da tabela.
O exemplo abaixo mostra como o “align” aceita os valores left, center ou right, para
alinhar à esquerda, centralizar ou alinhar à direita, respectivamente.
2.8.7 Valign
Pode ser aplicado a “th” e “td” e define o alinhamento do texto em relação às bordas
superior e inferior.
Aceita os valores top, middle, e bottom para alinhar na parte de cima, no meio e na
parte de baixo, respectivamente.
Exemplo:
<table border="1">
<tr>
<td>Linha 1, coluna 1.</td>
<td>Linha 1, coluna 2.</td>
</tr>
</table>
<table border="1">
<tr>
<td align="center">Centro</td>
<td align="left">Esquerda</td>
<td align="right">Direita</td>
</tr>
</table>
<table border="1">
<tr>
<td valign="top">top</td>
<td valign="middle">middle</td>
<td valign="bottom">bottom</td>
</tr>
</table>
Rowspan e colspan
O “rownpan” define quantas linhas uma mesma célula pode abranger. Por padrão, na
maioria dos navegadores, cada célula adicionada em uma tabela corresponde a uma
linha. Pode ser aplicado em “th” ou “td”, proporcionando o mesmo efeito.
Já o “colspan” define quantas colunas uma célula pode abranger. Por padrão, na
maioria dos navegadores, cada célula adicionada em uma tabela corresponde a uma
coluna. Pode ser aplicado em “th” ou “td”, proporcionando a mesma abrangência.
Exemplo:
2.8.9 Largura da célula
Para alterar a largura de uma célula da tabela basta acrescentar o parâmetro width
dentro da tag <td>.
Exemplo:
<table border="1">
<tr>
<td width="100">width = 100 (pixels)</td>
<td align="middle" width="200">width = 200 (pixels)</td>
</tr>
</table>
2.9 Formulários
A linguagem HTML permite que o cliente (navegador) interaja com o servidor,
preenchendo campos, clicando em botões e passando informações.
<table border="1">
<tr>
<td rowspan="2">Linha 1 e linha 2 mescladas.</td>
<td colspan="2">Coluna 2 e coluna 3 mescladas.</td>
</tr>
<tr>
<td>Linha 2, coluna 2.</td>
<td>Linha 2, coluna 3.</td>
</tr>
</table>
Links:
Comentários