Aula 04 - Tabelas
Conceitos BásicosAs tabelas são utilizadas como um recurso essencial para o layout geral da página, principalmente para posicionar imagens e texto. Elas são compostas de linhas e colunas e o conteúdo de cada célula pode ser texto, imagem ou até mesmo outra tabela.
Dicas: No HTML semanticamente correto, a tabela deve ser utilizada apenas para guardar dados tabulares, como os resultados de um campeonato, um calendário ou uma lista de preços.
Uma tabela é delimitada pelos marcadores <table> </table>, sendo que dentro destes marcadores são colocadas as linhas e as colunas da tabela.
<table>
<tr> indica o início de uma nova linha na tabela
<td> indica uma coluna na tabela
</td> indica o final daquela coluna na tabela.
</tr> indica o final da linha na tabela
</table> indica o final da própria tabela.
Dicas: Existe um marcador para a criação de cabeçalhos na tabela. Esse marcador é o <th> e é utilizado ao invés do <td>.
Exemplo de uma tabela com duas linhas e três colunas:
<html>
<head>
<title>Tabela</title>
</head>
<body>
<table border="1">
<tr>
<td> Primeira coluna</td>
<td> Segunda coluna</td>
<td> Terceira coluna</td>
</tr>
<tr>
<td> Primeira coluna</td>
<td> Segunda coluna</td>
<td> Terceira coluna</td>
</tr>
</table>
</body>
</html>
Tabela com 2 linhas x 3 colunas
Principais atributos de uma tabela
<table border="espessura_da_borda">
Especifica a presença ou ausência de borda na tabela bem como a espessura. No caso de uma tabela sem bordas não é necessário colocar o atributo border.
<table width="largura_da_tabela" height="altura_da_tabela">
Indica o tamanho da tabela. Este tamanho pode ser relativo ao tamanho da página em que a tabela será exibida, ou absoluto.
Uma tabela de tamanho relativo é chamada "tabela elástica" e se estica de acordo com o tamanho da página em que é exibida. Neste caso a largura e altura da tabela são fornecidas tendo a porcentagem como unidade de medida. 100% indica uma tabela que ocupará a tela toda.
Exemplo:
<table width="50%" height="100%">
Uma tabela de tamanho absoluto permanece fixa independentemente da resolução da página em que está sendo exibida. É útil quando existem imagens que não podem separar-se, alinhadas dentro de uma tabela. Neste caso a largura e altura da tabela são fornecidas tendo o pixel como unidade de medida.
Exemplo:
<table width="50" height="100">
<table align="posicionamento">
Especifica o posicionamento do texto a circundar a tabela. O alinhamento pode ser left (esquerda) ou right (direita). Nos casos em que não se deseja que o texto circunde a tabela não é preciso colocar o atributo align.
Exemplo de texto flutuando à esquerda da tabela (align="left")
Texto flutuando à direita da tabela
<table cellpadding="valor em pixel">
Especifica o deslocamento do texto em relação às bordas de cada célula da tabela.
Exemplo:
<table border="1" cellpadding="20">
Exemplo de deslocamento de texto em relação às bordas de cada célula
<table cellspacing="valor em pixel">
Especifica o espaçamento entre cada célula da tabela.
Exemplo:
<table border="1" cellspacing="10">
Exemplo de espaçamento entre as células da tabela
<table bgcolor="cor">
Especifica uma cor de fundo para a tabela. A cor pode ser declarada pelo seu nome ou, preferencialmente, pelo seu código hexadecimal.
Exemplo:
<table bgcolor="#ccff00">
<table background="imagem">
Especifica uma imagem de fundo para a tabela. A imagem de fundo será repetida, como um ladrilho.
Exemplo:
<table background="img/fundo.gif">
Principais atributos de uma célula
Com exceção dos atributos border, cellspacing e cellpadding, que são atributos exclusivos da tabela, cada célula possui os demais atributos, a saber:
- cor de fundo e imagem de fundo;
- largura e altura.
<tr align="valor" > ou <td align="valor" >
Alinhamento Horizontal: Valores podem ser LEFT
(esquerda), RIGHT (direita) ou CENTER (centro).
<tr valign="valor"> ou <td valign="valor">
Alinhamento Vertical: Valores podem ser TOP (topo da célula), MIDDLE (região mediana da célula), BASELINE (alinha a linha de base do texto da célula com o texto da linha), BOTTOM (alinha o conteúdo da célula com a região inferior da célula).
Exemplo:
<html>
<head>
<title>Tabela</title>
</head>
<body>
<table border="1" width="600" height="200">
<tr>
<td valign="top"> Primeira coluna</td> <td valign="middle"> Segunda coluna</td> <td valign="bottom"> Terceira coluna</td> </tr>
<tr>
<td align="left"> Primeira coluna</td> <td align="center"> Segunda coluna</td> <td align="right"> Terceira coluna</td> </tr>
</table>
</body>
</html>
Exemplo de alinhamento vertical e horizontal das células
Tabela de layout
A tabela é a principal forma de criar o layout (aparência) de um web site. Nela são colocadas as imagens, banners, textos e todo o conteúdo da sua página.
Hoje em dia existem vários web sites (a maioria ainda) com o layout feito com tabelas e a estrutura básica é algo como o exemplo:
Dicas: Vários estudiosos de código chegaram à conclusão de que essa função fugia da semântica da tag <table> e atualmente utilizam para o layout um modelo baseado em "caixas", com a utilização da tag <div> e CSS. Essa forma de criar o layout é chamada de Tableless (sem tabela).
