Eae galera!
O tutorial de hoje é a sequência do tutorial anterior, que dava continuidade à uma série de tutorias sobre HTML. Se você já tem uma noção básica não faz diferença a sequência, porém, se você deseja aprender na ordem correta, siga para a página que direciona o aprendizado básico.
Boa leitura!
ATUALIZAÇÃO (06/08/2015): Este post foi escrito com base nos tutoriais do W3C para HTML 4.1. O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para o tutorial de HTML 5, logo não é mais válido. O conteúdo está correto, mas não é sobre a versão mais atual!
HTML Table
A idéia de usar tabelas em arquivos html é apresentar de forma tabular certas informações. Por exemplo, se quisessemos exibir uma lista de alunos com as respectivas notas que cada um tirou durante um ano escolar, a maneira ideal para fazer este trabalho seria utilizando tabelas.
Porém, muitas pessoas utilizam tabelas para desenvolver layouts de suas páginas. Esta prática não é recomendada desde que os desenvolvedores passaram a utilizar arquivos css para esta função. Então, neste tutorial não será ensinado como desenvolver um layout usando tabelas, será mostrado somente como manipular linhas, colunas e outras tags referentes ao assunto.
Para explicar como montar uma tabela simples vamos ao primeiro exemplo. Copie e cole o trecho de código no Bloco de Notas salvando como teste12.html.
<html>
<head>
<title>
Teste 12
</title>
</head>
<body>
<table border="1">
<tr>
<td>
Esta é a primeira coluna da linha 1.
</td>
<td>
Esta é a segunda coluna da linha 1.
</td>
</tr>
<tr>
<td>
Esta é a primeira coluna da linha 2.
</td>
<td>
Esta é a segunda coluna da linha 2.
</td>
</tr>
</table>
</body>
</html>O exemplo acima mostra uma tabela simples, com duas linhas e duas colunas. A tag que inicia a tabela é a tag <table>, e a que finaliza é seu par </table>. Veja que um atributo foi inserido dentro desta tag, que é o border. No exemplo eu coloquei bordas de tamanho 1, mas poderia aumentar ou deixar a tabela sem bordas, colocando como valor do atributo “0”. Outros atributos poderiam ser inseridos dentro desta tag, que serão explicados no decorrer deste tutorial.
Tabelas com Cabeçalho
Existe uma tag própria para colocar cabeçalhos nas tabelas, que é exemplificada no exemplo abaixo, que deve ser salvo como os outros, nomeando-o teste13.html.
<html>
<head>
<title>
Teste 13
</title>
</head>
<body>
<table border="1">
<tr>
<th width="20%">
Este é o cabeçalho da coluna 1.
</th>
<th width="80%">
Este é o cabeçalho da coluna 2.
</th>
</tr>
<tr>
<td>
Esta é a primeira coluna da linha 1.
</td>
<td>
Esta é a segunda coluna da linha 1.
</td>
</tr>
<tr>
<td>
Esta é a primeira coluna da linha 2.
</td>
<td>
Esta é a segunda coluna da linha 2.
</td>
</tr>
</table>
</body>
</html>Observe que para inserirmos o cabeçalho na tabela foi utilizada uma linha normal, mas no lugar da tag <td> para as colunas, nós usamos a <th>. Uma outra observação ainda a respeito deste exemplo, é que nele foi inserido um outro atributo dentro da nossa tabela, que é o width. Nele definimos que 20% da área do nosso navegador seria destinado à primeira coluna, e 80% para a segunda. Se eu quisesse deixar um tamanho fixo, bastaria eu trocar a porcentagem para um número exato em pixels.
Juntando linhas e colunas da tabela
Em algumas situações pode ser necessário juntar linhas e colunas em uma tabela. Para isto usamos os atributos colspan e rowspan. Copie o exemplo abaixo e cole como de costume no Bloco de Notas salvando com teste14.html.
<html>
<head>
<title>
Teste 14
</title>
</head>
<body>
<table border=1>
<tr>
<th rowspan=3>
Notas do primeiro semestre
</th>
<td>
Português
</td>
<td>
10
</td>
</tr>
<tr>
<td>
Matemática
</td>
<td>
10
</td>
</tr>
<tr>
<td>
Ciências
</td>
<td>
10
</td>
</tr>
<tr>
<td colspan="3">
<p align="center">
<b>
Aprovado no primeiro semestre
</b>
</p>
</td>
</tr>
<tr>
<th rowspan=3>
Notas do segundo semestre
</th>
<td>
História
</td>
<td>
10
</td>
</tr>
<tr>
<td>
Geografia
</td>
<td>
10
</td>
</tr>
<tr>
<td>
Empreendedorismo
</td>
<td>
10
</td>
</tr>
<tr>
<td colspan="3">
<p align="center">
<b>
Aprovado no segundo semestre
</b>
</p>
</td>
</tr>
</table>
</body>
</html>
Cellpading e Cellspacing
Cellpading e cellspacing inserem espaços entre o conteúdo da tabela e sua borda, e entre o conteúdo da página e a tabela. Salve o código abaixo como teste15.html, que exemplifica o uso destes atributos.
<html>
<head>
<title>
Teste 15
</title>
</head>
<body>
<p>
Exemplo com cellpading:
</p>
<table border="1" cellpading="10">
<tr>
<td>
C1 - L1
</td>
<td>
C2 - L1
</td>
</tr>
<tr>
<td>
C1 - L2
</td>
<td>
C2 - L2
</td>
</tr>
</table>
<p>Exemplo com cellspacing:</p>
<table border="1" cellspacing="10">
<tr>
<td>
C1 - L1
</td>
<td>
C2 - L1
</td>
</tr>
<tr>
<td>
C1 - L2
</td>
<td>
C2 - L2
</td>
</tr>
</table>
</body>
</html>Alterando o Fundo das tabelas
Nós podemos mudar a cor de fundo das nossas tabelas, ou então colocar uma imagem como fundo, para isto basta utilizar o atributo bgcolor e background respectivamente, como são apresentados nos trechos de código abaixo.
<table bgcolor="#009988">
<table background="imagem.jpg">Vale lembrar que para o caso da imagem, se ela não estiver no mesmo diretório da página, o correto é colocar o caminho inteiro da imagem. Uma outra informação muito útil, é que estes atributos bgcolor e background podem ser inseridos dentro de uma linha ou coluna no lugar de ser definido na declaração da tabela. Isto permite eu montar uma tabela com uma linha (ou coluna) de cada cor por exemplo.
Alinhando o conteúdo dentro da tabela
Para fechar o tutorial vamos aprender a alinhar o conteúdo dentro de uma tabela, veja os exemplos nos trechos de código abaixo:
<td align="center">
<td align="left">
<td align="right">As linhas acima alinham o conteúdo da coluna, centralizando, à esquerda e à direita respectivamente. Tente outras combinações, inserindo o atributo align na tag <table> e <tr> para praticar.
Este foi o tutorial sobre tabelas, até a próxima!
😉
Os códigos deste post estão disponíveis em:
https://github.com/jonasvm/sdevlab-cursos/tree/master/sdevlab-html41
Contribua!
Fonte de pesquisa: w3schools.com/html
Sanoj's devLab 