WDD 130: Fundamentos da Web

S05 – Atividade de Aprendizagem: Tabelas HTML

Visão Geral

Os elementos table do HTML são usados para criar representações visuais de dados tabulares, permitindo que os usuários comparem e analisem rapidamente diferentes valores. As tabelas de dados são particularmente úteis para exibir grandes quantidades de informações de forma clara e organizada, com dados em linhas e colunas, como se fossem uma planilha. Por exemplo, uma tabela pode ser usada para exibir informações dos produtos, cronogramas ou informações sobre funcionários.

Preparação

As tabelas são compostas por diversas partes que funcionam em conjunto. A estrutura principal inclui a própria tabela, as linhas e as células individuais que contêm os dados.

Estrutura Básica da Tabela

Os elementos a seguir são utilizados para criar uma tabela:

Abaixo está uma tabela simples que mostra as notas dos estudantes nas provas:

<table>
  <tr>
    <th>Nome do Estudante</th>
    <th>Nota em Matemática</th>
    <th>Nota em Ciências</th>
  </tr>
  <tr>
    <td>Maria</td>
    <td>85</td>
    <td>92</td>
  </tr>
  <tr>
    <td>João</td>
    <td>78</td>
    <td>88</td>
  </tr>
</table>
Nome do Estudante Nota em Matemática Nota em Ciências
Maria 85 92
João 78 88

Neste exemplo, a primeira linha contém cabeçalhos que descrevem o conteúdo de cada coluna. As linhas abaixo dela contêm os dados de cada estudante.

Cabeçalhos e Células de Dados em Tabelas

A tag <th> cria células de cabeçalho que geralmente aparecem no topo das colunas ou no início das linhas. Por padrão, os navegadores geralmente exibem o texto do cabeçalho em negrito para destacá-lo dos outros dados.

A tag <td> cria células de dados comuns que contêm as informações que você deseja exibir. Cada célula pode conter texto, números ou até mesmo outros elementos HTML, como links e imagens.

Adicionando Seções à Tabela

Para tabelas maiores, você pode organizar o conteúdo usando três seções opcionais. Essas seções ajudam os leitores de tela e deixam o código mais fácil de entender:

Veja abaixo um exemplo de tabela com todas as três seções:

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Preço</th>
      <th>Quantidade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Caderno</td>
      <td>R$3,50</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Lápis</td>
      <td>R$0,75</td>
      <td>12</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total de Itens</td>
      <td>R$26,50</td>
      <td>17</td>
    </tr>
  </tfoot>
</table>
Item Preço Quantidade
Caderno R$3,50 5
Lápis R$0,75 12
Total de Itens R$26,50 17

Esse exemplo mostra uma tabela de estoque simples com cabeçalhos, linhas de dados e uma linha de rodapé que exibe o valor total.

Estendendo-se por Várias Células

Às vezes, você precisa que uma célula ocupe mais espaço do que apenas uma coluna ou uma linha. O HTML contém dois atributos que permitem que as células se estendam por várias colunas ou linhas. Esses atributos ajudam a criar layouts de tabela mais complexos quando necessário.

O atributo colspan faz com que uma célula se estenda horizontalmente por várias colunas. O atributo rowspan faz com que uma célula se estenda verticalmente por várias linhas. Você adiciona esses atributos às tags <td> ou <th>.

Usando Colspan

Para que uma célula ocupe várias colunas, use o atributo colspan. O número que você especificar indica ao navegador quantas colunas a célula deve ocupar.

Aqui está um exemplo de um cronograma de aulas em que o intervalo para o almoço se estende por todas as colunas de tempo:

<table>
  <tr>
    <th>Horário</th>
    <th>Segunda-feira</th>
    <th>Terça-feira</th>
    <th>Quarta-feira</th>
  </tr>
  <tr>
    <td>9:00</td>
    <td>Matemática</td>
    <td>Ciências</td>
    <td>História</td>
  </tr>
  <tr>
    <td>12:00</td>
    <td colspan="3">Intervalo para o Almoço</td>
  </tr>
  <tr>
    <td>13:00</td>
    <td>Inglês</td>
    <td>Artes</td>
    <td>Música</td>
  </tr>
</table>
Horário Segunda-feira Terça-feira Quarta-feira
9:00 Matemática Ciências História
12:00 Intervalo para o Almoço
13:00 Inglês Artes Música

Observe como a célula de intervalo para o almoço usa colspan="3" para se estender pelas colunas de segunda-feira, terça-feira e quarta-feira.

Usando Rowspan

Para que uma célula ocupe várias linhas, use o atributo rowspan. Isso aumenta a altura da célula, cobrindo várias linhas verticalmente.

Abaixo está um exemplo mostrando informações de estudantes, em que alguns frequentam o mesmo curso em diferentes semestres: 

<table>
  <tr>
    <th>Estudante</th>
    <th>Curso</th>
    <th>Semestre</th>
  </tr>
  <tr>
    <td rowspan="2">Sarah</td>
    <td>Web Design</td>
    <td>Outono</td>
  </tr>
  <tr>
    <td>Web Design</td>
    <td>Primavera</td>
  </tr>
  <tr>
    <td>David</td>
    <td>Programação</td>
    <td>Outono</td>
  </tr>
</table>
Estudante Curso Semestre
Sarah Web Design Outono
Web Design Primavera
David Programação Outono

No exemplo apresentado, o nome de Sarah aparece em uma célula com rowspan="2", portanto, cobre ambas as linhas onde seus cursos estão listados.

Informações Importantes sobre Span

Ao usar colspan ou rowspan, é preciso reduzir o número de células nas linhas ou colunas correspondentes. Se uma célula se estende por 2 colunas, você precisa de um <td> a menos nessa linha. Se uma célula se estende por 2 linhas, você precisa de um <td> a menos na linha seguinte.

Planeje sempre a estrutura da sua tabela com atenção antes de adicionar elementos span, para garantir que todas as linhas e colunas estejam alinhadas corretamente.

Quando Usar Tabelas

As tabelas devem ser usadas apenas para exibir dados que se encaixem naturalmente em linhas e colunas. Não utilize tabelas para criar layouts de página ou posicionar elementos em sua página web. A ferramenta adequada para organizar o layout da página é o CSS.

Instruções da Atividade

Estrutura de Tabelas em HTML

  1. Na subpasta semana05, crie um novo arquivo HTML chamado tabela.html.
  2. Crie a estrutura HTML e adicione o conteúdo conforme mostrado na tabela a seguir, usando os elementos thead, tbody e tfoot:
    Exercício de Tabela renderizada.
Avalie Seu Conhecimento 
<table>
  <thead>
    <tr>
      <th>Liga</th>
      <th>Time</th>
      <th>Retrospecto (vitórias–derrotas)</th>
      <th>Número de Jogadores</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="2">Sul</th>
      <td>Paraná</td>
      <td>52-19</td>
      <td>23</td>
    </tr>
    <tr>
      <td>Santa Catarina</td>
      <td>49-24</td>
      <td>10</td>
    </tr>
    <tr>
      <th rowspan="3">Oeste</th>
      <td>Lacerda</td>
      <td>92-70</td>
      <td>27</td>
    </tr>
    <tr>
      <td>Acre</td>
      <td>75-87</td>
      <td>20</td>
    </tr>
    <tr>
      <td>Rondônia</td>
      <td>10-7</td>
      <td>12</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3">Total de Jogadores</th>
      <td>92</td>
    </tr>
  </tbody>
</table>

Estilização de CSS

  1. Crie um novo arquivo CSS chamado tabela.css na subpasta estilos da semana05 e vincule-o ao seu arquivo HTML.
  2. Usando o arquivo tabela.css, estilize a tabela para que corresponda à imagem acima. Considere adicionar estilos aos seguintes elementos:
    • table
    • th
    • td
    • thead th, tfoot tr
Avalie Seu Conhecimento 
table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  letter-spacing: 1px;
      }            

th, td {
  border: 1px solid rgb(150 150 150);
  padding: 8px 12px;
  text-align: center;
}

thead th, tfoot tr {
  background-color: rgb(0 0 0);
  color: white;
  font-weight: 700;
}

Observações e Desafios

Os arquivos solucao-exercicio-tabela.html e solucao-exercicio-tabela.css na pasta semana05 contêm um exemplo completo da alteração.