HTML do básico ao avançado parte 4

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">&raquo; 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>