Estrutura básica
Texto
Imagem
Tabela
Link
Lista
Iframe
CSS
Div / Span / Blockquote
Tabela
Em HTML, usamos as tabelas não só para exibir dados como em uma planilha tipo Excel, mas também para distribuir melhor os objetos na tela. Muitos blogs trabalham com este formato. Veja como é o seu!
Definindo tabelas:
- uma tabela é composta por linhas e colunas que formam células.
- as células podem conter textos, imagens e até outras tabelas.
- é feita por meio das tags <table> ... </table>.
- a tag<table> possui os atributos [border] [cellpadding] [cellspacing] [width]
<table [border="n"] [cellpadding="n"] [cellspacing="n"] [width="n"]>
... definição do conteúdo da tabela
</table>
[border=“n”]: espessura da borda em pixels
[cellpadding =“n”]: enchimento, espaço entre a borda e seu conteúdo, em pixels
[cellspacing =“n”]: espaçamento entre as células da tabela, em pixels
[width =“n”]: fixa um valor determinado, em pixels, para a largura das células se quiser em %: [width=“100%”]
- cada linha da tabela é definida por <tr> </tr> (table row)
- cada célula na linha é definida por <td> </td> (table data)
Você inicia a linha, depois coloca as células que a linha contêm e no final coloca a tag de fechamento indicando que acabou de escrever alquela linha. Então começa uma linha nova. As linhas devem conter o mesmo número de células para que não dê erros. Ou seja, dentro das tags <tr> e </tr> deve haver o mesmo número de <td></td>.
Vamos ao nosso primeiro exemplo de tabela. Abra o bloco de notas e digite o código abaixo. Salve seu arquivo na nossa pasta "html4blog" com o nome de "tag_table.htm".
<html>
<head>
<!—título da home page -->
<title>Trabalhando com tabelas</title>
</head>
<body bgcolor="#ffffcc">
<table border="1">
<tr>
<td> linha 1 coluna 1</td>
<td> linha 1 coluna 2</td>
<td> linha 1 coluna 3</td>
</tr>
<tr>
<td> linha 2 coluna 1</td>
<td> linha 2 coluna 2</td>
<td> linha 2 coluna 3</td>
</tr>
<tr>
<td> linha 3 coluna 1</td>
<td> linha 3 coluna 2</td>
<td> linha 3 coluna 3</td>
</tr>
<tr>
<td> linha 4 coluna 1</td>
<td> linha 4 coluna 2</td>
<td> linha 4 coluna 3</td>
</tr>
</table>
</body>
</html>
Antes de visualizar sua tabela no navegador tente imaginá-la. Aliás, é assim com toda linguagem de programação ou marcação. Uma coisa meio "Matrix" ! Você sabe que entendeu quando vira um "Neo" e consegue ver a imagem no código e vice-versa. Depois de pensar um pouco como vai ficar sua tabela visualize-a no navegador e veja se correspondeu às suas expectativas. Não seja muito rigoroso como você mesmo caso não tenha dado muito certo. No começo é assim mesmo, depois melhora bastante!
Adicione alguns atributos à sua tabela
- largura: 250pxl; espaçamento de células: 5pxl; enchimento: 10pxl; borda: 3 pxl:
<table border="3" width="250" cellspacing="5" cellpadding="10">
(verifique se você não está duplicando a tag <table>, substitua a tag toda pela informação acima)
Salve seu arquivo e atualize o navegador. Veja se o resultado é este:
Você pode trabalha com medidas de tabela em porcentagem também. Desta forma sua tabela adapta-se ao tamanho da janela do navegador do seu visitante. Mas você perde o controle do resultado, já que você nunca sabe qual o tamanho da janela do seu visitante! No exemplo abaixo foi usado o seguinte código:
<html>
<head>
<!—título da home page -->
<title>Trabalhando com tabelas</title>
</head>
<body bgcolor="#ffcc00">
<table border="1" width="80%">
<tr>
<td> linha 1 coluna 1</td>
<td> linha 1 coluna 2</td>
<td> linha 1 coluna 3</td>
</tr>
<tr>
<td> linha 2 coluna 1</td>
<td> linha 2 coluna 2</td>
<td> linha 2 coluna 3</td>
</tr>
<tr>
<td> linha 3 coluna 1</td>
<td> linha 3 coluna 2</td>
<td> linha 3 coluna 3</td>
</tr>
</table>
</body>
</html>
Se você quer alinhar sua tabela na página, use o atributo align (left – esquerda; center – centro; right – direita)
<table border="3" width="250" cellspacing="5" cellpadding="10" align="center">
ou ... align="right">
ou ... align="left">
O atributo "align" também pode ser usado dentro da tag da célula (<td>) para alinhar seu conteúdo: center, left, right. Mas este é um alinhamento horizontal, se quiser um alinhamento vertical use: valign (top – superior; bottom – inferior; middle – meio)
Abra um novo bloco de notas e digite o código abaixo. Salve seu arquivo na pasta "html4blog" como "tag_table_atributos.htm" .
<html>
<head>
<!— título da home page -->
<title>Trabalhando com tabelas</title>
</head>
<body bgcolor="#ffffcc">
<table border="3" width="250" cellspacing="5" cellpadding="10">
<tr>
<td align="left" valign="top"> linha 1 coluna 1 <p> </p> </td>
<td align="center" valign="center"> linha 1 coluna 2</td>
<td align="right" valign="bottom"> linha 1 coluna 3</td>
</tr>
<tr>
<td> linha 2 coluna 1</td>
<td> linha 2 coluna 2</td>
<td> linha 2 coluna 3</td>
</tr>
<tr>
<td> linha 3 coluna 1</td>
<td> linha 3 coluna 2</td>
<td> linha 3 coluna 3</td>
</tr>
<tr>
<td> linha 4 coluna 1</td>
<td> linha 4 coluna 2</td>
<td> linha 4 coluna 3</td>
</tr>
</table>
</body>
</html>
Observe que na primeira célula foi colocado uma linha em branco ou um espaço vazio: <p> </p> . Este pequeno desnível no conteúdo da célula é necessário ao exercício para podermos notar o alinhamento vertical do conteúdo da célula.
Repare dá erro criar uma célula vazia e uma com um espaço em branco. Tente o pequeno exemplo abaixo no seu bloco de notar e salve-o como "tag_table_erro.htm". Faça primeiro assim:
<html>
<head>
<!— título da home page -->
<title>Trabalhando com tabelas</title>
</head>
<body bgcolor="#cccccc">
<table border="3" width="250" cellspacing="5" cellpadding="10">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
e depois assim:
<html>
<head>
<!— título da home page -->
<title>Trabalhando com tabelas</title>
</head>
<body bgcolor="#cccccc">
<table border="3" width="250" cellspacing="5" cellpadding="10">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Veja que o primeiro dá erro e o segundo não.
Mesclando as células
mesclar colunas: colspan
<td colspan=”n”>
...conteúdo da célula
</td>
onde “n” representa o número de colunas a serem mescladas
Abra seu bloco de notas e digite o exemplo de mesclar colunas:
<html>
<head>
<!—título da home page -->
<title>Trabalhando com tabelas</title>
</head>
<body bgcolor="#66ccff">
<table border="1">
<tr>
<td colspan="3"> linha 1 com 3 colunas mescladas </td>
</tr>
<tr>
<td> linha 2 coluna 1</td>
<td> linha 2 coluna 2</td>
<td> linha 2 coluna 3</td>
</tr>
<tr>
<td> linha 3 coluna 1</td>
<td> linha 3 coluna 2</td>
<td> linha 3 coluna 3</td>
</tr>
<tr>
<td> linha 4 coluna 1</td>
<td> linha 4 coluna 2</td>
<td> linha 4 coluna 3</td>
</tr>
</table>
</body>
</html>
Repare que se eu mesclei três células, eu mantenho o primeiro (1) <td></td> onde eu coloco a instrução de mesclar e elimino os próximos 2 <td></td>, totalizando minhas 3 células mescladas.
Salve seu arquivo na nossa pasta "html4blog" como "tag_table_colspan.htm". Visualize no navegador:
mesclar linhas: rowspan
<td rowspan=”n”>
...conteúdo da célula
</td>
onde “n” representa o número de colunas a serem mescladas
Abra seu bloco de notas e digite o exemplo de mesclar linhas:
<html>
<head>
<!—título da home page -->
<title>Trabalhando com tabelas</title>
</head>
<body bgcolor="#66ccff">
<table border="1">
<tr>
<td rowspan="3"> 3 linhas mescladas </td>
<td> linha 1 coluna 2</td>
<td> linha 1 coluna 3</td>
</tr>
<tr>
<td> linha 2 coluna 2</td>
<td> linha 2 coluna 3</td>
</tr>
<tr>
<td> linha 3 coluna 2</td>
<td> linha 3 coluna 3</td>
</tr>
<tr>
<td> linha 4 coluna 1</td>
<td> linha 4 coluna 2</td>
<td> linha 4 coluna 3</td>
</tr>
</table>
</body>
</html>
Repare que se eu mesclei três linhas, eu mantenho o primeiro <td></td> onde eu coloco a instrução de mesclar, mantenho os outros <td></td> daquela linha, na linha de baixo eu elimino o primeiro <td></td> e mantenho o resto e na terceira linha eu elimino o último <td></td> para completar minhas 3 linhas mescladas.
Salve seu arquivo na nossa pasta "html4blog" como "tag_table_rowspan.htm". Visualize no navegador:
Trabalhe também com medidas precisas para ajustar a largura das células:
<td width="250">
define a largura em 250 pixels
<td width="50%">
define a largura em 50% da tabela
Abra seu bloco de notas e digite o exemplo:
<html>
<head>
<!—título da home page -->
<title>Trabalhando com tabelas</title>
</head>
<body bgcolor="#66ccff">
<table border="3" width="610">
<tr>
<td colspan="3">   </td>
</tr>
<tr>
<td width="132">   </td>
<td width="8">   </td>
<td width="470">   </td>
</tr>
</table>
</body>
</html>
Salve seu arquivo na nossa pasta "html4blog" como "tag_table_teste.htm". Visualize no navegador:
Agora é com você! Imagine que você pode colocar sua tabela com a borda 0 e aí poderá alinhar e compor figuras e textos como quiser. Veja o exemplo abaixo para começar. Tente fazer igual:
E assim:
fim
