Para se trabalhar com tabelas não é nada difícil, apenas exige que você tenha vontade de aprender, Não só para tabelas, mas sim para tudo o que se deseja conhecer.
Decorar e aprender são coisas totalmente diferentes, Decorar é mais difícil e se esquece rápido, já aprender é muito mais fácil e serve para toda a vida.
As Tags que iremos utilizar são:
<table> <caption> <tr> <td> <th> <thead> <tbody> <tfoot> <rowspan> <colspan>Abaixo segue uma imagem explicando como funciona uma tabela:
Note o seguinte código:
<table border="1">
<caption>Este é um Titulo dentro da tabela.</caption>
<thead>
<tr>
<th>Nome:</th>
<th>E-mail:</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">» Todos os destinatários são validados</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Gunnar Correa</td>
<td>gunnar@contato.com</td>
</tr>
<tr>
<td>Edvaldo Correa</td>
<td>edvaldo@contato.com</td>
</tr>
<tr>
<td>SatellaSoft</td>
<td>contato@stellasofti.com</td>
</tr>
<tr>
<td colspan='2'>Faltam mais alguns dados</td>
</tr>
</tbody>
</table>Abrimos e fechamos a tag <table></table>, dentro de table, é que deve ficar os demais códigos de uma tabela.
Após abrir o table, usamos a tag <caption></caption> que significa título, está tag permite adicionar um titulo a nossa tabela.
Devemos criar um cabeçalho para nossa tabela, para isso usamos a tag <thead></thead>, dentro do thead, deve ficar nossas linhas e colunas que ficará na parte superior da tabela.
Dentro do thead usamos mais duas tag a <tr></tr> que é abreviação de Table Row (Linha da tabela) e <th></th> que é abreviação de Table Head (Cabeçalho da tabela).
O th deve sempre ficar dentro do tr, como você pode notar no código abaixo. Temos duas colunas, o tr cria a linha e o th as colunas, porem este th ele cria colunas para cabeçalho, já formatado em negrito.
<tr>
<th>Nome:</th>
<th>Email:</th>
</tr>Para o rodapé usamos o <tfoot></tfoot>, o conteúdo fica abaixo do <tbody> que será explicado em seguida, o <tfoot> fica na ultima parte da tabela e não importa se ele está colocado antes ou depois do <tbody>.
O <tfoot> Segue o mesmo padrão de linhas e colunas do <thead>, porém ao invés do <th></th> vamos usar <td></td> que é abreviação de Table Data (Dados da tabela).
O <td> deve conter a mesma quantidade de itens, definido no cabeçalho, no nosso caso são dois, porém só temos um e dentro dele temos a Tag colspan=’2’.
colspan=’2’ indica que aquelaTtag deve pegar o campo de duas colunas, o td assume o espaço da outra coluna que não foi inserida.
<tr>
<td colspan="2">Todos os destinatários são validados<td>
</tr>Por ultimo o <tbody></tbody>, este é o corpo da nossa tabela.
O <tbody> segue o mesmo padrão do <tfoot>, com as mesmas Tags para linha e colunas.
Note que usamos dois <td> e não usamos colsapan=’’.
<tr>
<td>Gunnar Correa<td>
<td>gunnar@email.com<td>
</tr>Além do colspan temos também o rowspan que serve para representar mais de uma linha.
Existe várias tags que podem ser usadas com o Table, porém não será explicada aqui.
Caso queira colocar uma borda em sua tabela, você pode usar a propriedade border=’1’ sendo que 1 é a largura da borda, mas normalmente aplicamos o estilo de borda via CSS.
<table border=’1’></table>
