activeinfo
 

Curso de HTML com CSS.


Tabelas em HTML.

Tabelas são muito utilizadas em HTML principalmente por facilitarem a organização e visualização de relatórios em sistemas web.

Tags para a construção de tabelas em HTML

As tags utilizadas para a construção de tabelas são <table></table>, <tr></tr>, <th></th> e <td></td>.

Vamos a um exemplo no qual poderemos ver a utilização dessas tags:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Tabela</title>
  </head>
  <body>
    <p>Nesta página vemos uma lista mostrando alguns atributos utilizados na tag <strong>td</strong>:</p>
    <table border="1">
      <tr>
        <th>Atributo</th>
        <th>Valor</th>
        <th>Descrição</th>
      </tr>
      <tr>
        <td>colspan</td>
        <td>número</td>
        <td>Define o número de colunas que uma célula pode alcançar</td>
      </tr>
      <tr>
        <td>rowspan</td>
        <td>número</td>
        <td>Define o número de linhas que uma célula pode alcançar</td>
      </tr>
    </table>
  </body>
</html>

Vemos que na abertura da tabela na linha 8 utilizamos um atributo determinando a borda da mesma (<table border="1">):

    <table border="1">

Logo após a abertura da tabela, temos uma tag <tr>, que cria uma linha na tabela. Ou seja, a tabela terá o número de linhas de acordo com a quantidade de <tr></tr> em seu código:

      <tr>

Mais abaixo, temos as tags <th> que definem os cabeçalhos para as colunas da tabela. Essas tags de cabeçalho de tabela dão uma ênfase aos títulos das colunas:

        <th>Atributo</th>
        <th>Valor</th>
        <th>Descrição</th>

Na próxima linha temos o fechamento da tag tr.

      </tr>

Dessa forma, fecha-se uma linha da tabela com os títulos dos itens que a mesma vai conter dentro das tags td mais abaixo (sempre dentro de tags tr):

      <tr>
        <td>colspan</td>
        <td>número</td>
        <td>Define o número de colunas que uma célula pode alcançar</td>
      </tr>
      <tr>

E assim por diante, novas linhas da tabela são criadas com as tags tr e novas colunas dentro de cada linha com as tags td:

      <tr>
        <td>rowspan</td>
        <td>número</td>
        <td>Define o número de linhas que uma célula pode alcançar</td>
      </tr>

Ao final temos o fechamento da tabela:

    </table>

Visualizando o resultado no navegador:

Tabela em HTML

O Atributo colspan

As tags <th></th> e <td></td> possuem um atributo que permite que alcancem a largura de mais de uma coluna em uma tabela. Seria algo como "mesclar" células, como é utilizado em planilhas eletrônicas.

Isso facilita a visualização pelo agrupamento de dados em mais de uma coluna.

Vejamos um exemplo ilustrativo:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Colspan</title>
  </head>
  <body>
    <p>Nesta página vemos a utilização do atributo colspan:</p>
    <table border="1">
      <tr>
        <th colspan="3">Cursos Linux</th>
      </tr>
      <tr>
        <th>Descrição</th>
        <th>Carga Horária</th>
        <th>Dias da Semana</th>
      </tr>
      <tr>
        <td>Administração de Sistemas Linux</td>
        <td>40 horas</td>
        <td>Sábados</td>
      </tr>
      <tr>
        <td>Administração de Servidores Linux</td>
        <td>50 horas</td>
        <td>Sábados</td>
      </tr>
    </table>
  </body>
</html>

Ao visualizarmos o resultado, fica fácil entender a finalidade do atributo:

Atributo colspan em Tabelas HTML

A tag colspan pode ser utilizada em qualquer tag <th></th> ou <td></td>, tomando o devido cuidado com a quantidade de colunas que estamos trabalhando.

O Atributo rowspan

Assim como o atributo colspan, o rowspan também mescla células, mas seu alcance é com relação ao número de linhas.

Também pode ser aplicado às tags <th></th> e <td></td> e une linhas para facilitar a visualização dos dados.

Vejamos um exemplo:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>rowspan</title>
  </head>
  <body>
    <p>Nesta página vemos a utilização do atributo rowspan com valor 4:</p>
    <table border="1">
      <tr>
        <th>Curso</th>
        <th>Carga Horária</th>
        <th>Período</th>
        <th>Dia da Semana</th>
      </tr>
      <tr>
        <td>C# e ASP Net</td>
        <td>40 horas</td>
        <td>manhã</td>
        <td rowspan="5">Sábado</td>
      </tr>
      <tr>
        <td>Desenvolvimento Android</td>
        <td>50 horas</td>
        <td>tarde</td>
      </tr>
      <tr>
        <td>Java Web </td>
        <td>60 horas</td>
        <td>manhã</td>
      </tr>
      <tr>
        <td>Servidores Linux</td>
        <td>50 horas</td>
        <td>tarde</td>
      </tr>
      <tr>
        <td>Formação Hardware</td>
        <td>200 horas</td>
        <td>integral</td>
      </tr>
    </table>
  </body>
</html>

E, visualizando o resultado:

Atributo rowspan em Tabelas HTML

Tabelas Aninhadas em HTML

Assim como em listas, também é possível aninhar tabelas. Podemos inserir uma nova tabela dentro de uma célula ampliando as possibilidades de diagramação em tabelas.

Primeiramente, vejamos uma ilustração do código de uma tabela aninhada dentro de outra:

Tabelas aninhadas em HTML

Podemos notar que a tabela mais interna deve ser inserida dentro da abertura/fechamento de tags td.

Agora, o código-fonte:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Tabela Aninhada</title>
  </head>
  <body>
    <p>Nesta página vemos tabelas aninhadas:</p>
    <table border="1">
      <tr>
        <th>Aluno</th>
        <th>Curso</th>
      </tr>
      <tr>
        <td>Marcos Cesar</td>
        <td>
          <table border="1">
            <tr>
              <th>Nome</th>
              <th>Turno</th>
            </tr>
            <tr>
              <td>Linux</td>
              <td>Noturno</td>
            </tr>
            <tr>
              <td>Programação</td>
              <td>Tarde</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

Podemos notar que foi criada outra tabela dentro da célula desejada. Essa tabela mais interna deve ser fechada antes do fechamento da célula onde está contida.

Vejamos o resultado:

Tabelas aninhadas em HTML

Espaçamento nas células de tabelas em HTML

Dois atributos muito utilizados em células de tabelas em HTML são o cellpadding e o cellspacing.

O cellpadding especifica o espaço entre a linha interna da célula e o seu conteúdo e é definido em pixels.

O cellspacing define o espaço entre as células.

Vejamos esses atributos em uma página simples:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Tabela</title>
  </head>
  <body>
    <p>Nesta página vemos espaçamento em células de tabelas HTML:</p>
    <table border="1" cellspacing="10" cellpadding="4">
      <tr>
        <th>Aluno</th>
        <th>Curso</th>
      </tr>
      <tr>
        <td>Marcos Cesar</td>
        <td>Linux</td>
      </tr>
    </table>
  </body>
</html>

Vejamos isso de maneira ilustrada:

Cellpadding e cellspacing em HTML

Agrupamento de Tabelas

A tag <thead></thead> é utilizada para agrupar o conteúdo em uma tabela HTML.

Esse elemento deve trabalhar em conjunto com as tags <tfoot></tfoot>, e <tbody></tbody> que também servem para agrupar os elementos.

Isso significa que, caso o usuário resolva imprimir a página e ela contiver muitas linhas de dados, excedendo uma folha, na próxima folha o cabeçalho e o rodapé serão repetidos, facilitando a visualização dos dados.

É importante ressaltar que a tag <tfoot></tfoot> deve aparecer no código-fonte antes da tag <tbody></tbody>.

Vejamos um exemplo de página com o uso dessas tags:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>thead em Tabela HTML</title>
  </head>
  <body>
    <p>Nesta página vemos a utilização de thead, tbody e tfoot:</p>
    <table border="1">
      <thead>
        <tr>
          <th>Vendas</th>
          <th>Valor</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>Soma</td>
          <td>R$ 230,00</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Janeiro</td>
          <td>R$ 90,00</td>
        </tr>
        <tr>
          <td>Fevereiro</td>
          <td>R$ 140,00</td>
        </tr>
      </tbody>
    </table>
</html>

Visualizando o resultado:

thead em HTML

Como comentado anteriormente, a principal vantagem do uso das tags thead, tbody e tfoot é o agrupamento, pois facilita a apresentação de relatórios com mais de uma página.

Para testar esta facilidade, podemos repetir mais algumas vezes o conteúdo do tbody, por exemplo, ficando uma página com 36 meses de resultados:

tbody com 36 meses

Ao clicar em "Arquivo","Visualizar Impressão" no browser, podemos perceber que foram geradas duas páginas de impressão. Ao final da primeira página vemos que o elemento tfoot gera a "soma" e na segunda página, podemos visualizar o cabeçalho repetido, graças ao elemento thead:

impressão de thead

Na próxima lição veremos com detalhes a utilização de um dos pilares do desenvolvimento web: links em HTML.


Atenção! Vende-se este portal, incluindo: o domínio activeinfo, o site (com gerenciador de conteúdo), os direitos autorais sobre os três cursos: Administração de Sistemas Linux, Lógica da Programação na Prática e Criação de Sites com HTML e CSS. Atualmente temos em média 640 visitas por dia, com média de 4,8 minutos por página. Para mais informações clique aqui...

Voltar Próximo: Links em HTML