Tabelas HTML

Utilização

Desde nosso primeiro contato com a estatística básica, aquela do ensino fundamental, passamos a entender tabelas como uma forma de apresentar dados tabulares, ou seja, dados representados em linhas e colunas, descrevendo tipo e quantidade de determinada coisa. No HTML esta utilização parece ser bem óbvia, não? Porém, antigamente as tabelas eram utilizadas para criar a estrutura de um site. Imaginem a facilidade para acrescentar ou alterar alguma seção da página, ou então, a velocidade do carregamento destes sites. Abaixo segue um exemplo de layout feito com tabela:

Layout em Tabela

Desde alguns anos atrás esta técnica tem sido substituída pela forma Tableless, graças ao W3C, pois segundo o mesmo, tabelas devem apresentar dados tabulados e o CSS deve ficar encarregado pela disposição da página, afinal, este é o propósito de utilização de uma folha de estilos. Veja abaixo um exemplo de utilização correta de tabelas em HTML:

Caixa: Probabilidades Mega-Sena

As Tags

<table> esta marcação é utilizada para inserir uma tabela, dentro dela podemos inserir vários parâmetros e estilos, porém, por convenção, essas alterações são feitas em CSS

<tr> insere uma linha a tabela
<td> inclui uma célula a tabela
<th> insere uma célula de título, possui formatação diferente das células comuns

<caption> esta tag é utilizada para inserir um título acima da tabela (por padrão)

As tags seguintes possuem o elemento essencial do HTML5, já citado nos posts anteriores: Semântica

<thead> seção de cabeçalho da tabela
<tfoot> seção de rodapé da tabela
<tbody> seção de corpo da tabela

Segue abaixo exemplo em código e visual de uma tabela com as tags acima:

<table>
    <caption>Demanda por Curso - FATEC Carapicuíba - 1 SEM 2013</caption>
    <thead>
        <tr>
             <th>Curso</th>
             <th>Período</th>
             <th>Vagas</th>
             <th>Inscritos</th>
             <th>Demanda</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Análise e Desenvolvimento de Sistemas</td>
            <td>Manhã</td>
            <td>40</td>
            <td>325</td>
            <td>8,13</td>
        </tr>
        <tr>
            <td>Análise e Desenvolvimento de Sistemas</td>
            <td>Noite</td>
            <td>40</td>
            <td>701</td>
            <td>17,53</td>
        </tr>
        <tr>
            <td>Jogos Digitais</td>
            <td>Manhã</td>
            <td>40</td>
            <td>192</td>
            <td>4,80</td>
        </tr>
        <tr>
            <td>Jogos Digitais</td>
            <td>Noite</td>
            <td>40</td>
            <td>223</td>
            <td>5,58</td>
        </tr>
        <tr>
            <td>Logística</td>
            <td>Manhã</td>
            <td>40</td>
            <td>192</td>
            <td>4,80</td>
        </tr>
        <tr>
            <td>Logística</td>
            <td>Noite</td>
            <td>40</td>
            <td>400</td>
            <td>10,00</td>
        </tr>
        <tr>
            <td>Secretariado</td>
            <td>Tarde</td>
            <td>40</td>
            <td>100</td>
            <td>2,50</td>
        </tr>
        <tr>
            <td>Sistemas para Internet</td>
            <td>Noite</td>
            <td>40</td>
            <td>68</td>
            <td>1,70</td>
        </tr>
    </tbody>
    <tfoot>
        </tr>
            <td>Total</td>
            <td></td>
            <td>320</td>
            <td>2201</td>
            <td>55,04</td>
        </tr>
    </tfoot>
</table>

Demanda por Curso - FATEC Carapicuíba - 1 SEM 2013

Curso	Período	Vagas	Inscritos	Demanda
Análise e Desenvolvimento de Sistemas	Manhã	40	325	8,13
Análise e Desenvolvimento de Sistemas	Noite	40	701	17,53
Jogos Digitais	Manhã	40	192	4,80
Jogos Digitais	Noite	40	223	5,58
Logística	Manhã	40	192	4,80
Logística	Noite	40	400	10,00
Secretariado	Tarde	40	100	2,50
Sistemas para Internet	Noite	40	68	1,70
Total		320	2201	55,04

Referências

Demanda Por Curso FATEC
Guias Referencia
Semântica de Tabelas
Tabelas
Tag Table