HTML - Tabelas

Estrutura Básica de Tabela

A estrutura de uma tabela HTML tem vários elementos que trabalham juntos para criar uma representação estruturada de dados. No centro de cada tabela está o elemento <table>, que define a própria tabela. Dentro do elemento <table>, você encontrará um ou mais elementos <tr>, cada um representando uma linha da tabela.

Dentro de cada elemento <tr>, você pode adicionar dois tipos de células: células de cabeçalho e células de dados. As células de cabeçalho são definidas usando o elemento <th> e são usadas para representar os cabeçalhos de coluna ou linha da tabela. Essas células são automaticamente estilizadas com texto em negrito e alinhamento centralizado por padrão, tornando-as visualmente distintas das células de dados.

As células de dados são definidas usando o elemento <td> e são usadas para conter os dados reais dentro da tabela. Cada elemento <td> representa uma única célula dentro de uma linha, e você pode ter vários elementos <td> dentro de um único elemento <tr> para criar várias colunas.

<table>
  <tr>
    <th>Cabeçalho 1</th>
    <th>Cabeçalho 2</th>
  </tr>
  <tr>
    <td>Dado 1</td>
    <td>Dado 2</td>
  </tr>
  <tr>
    <td>Dado 3</td>
    <td>Dado 4</td>
  </tr>
</table>

Neste exemplo, o elemento <table> envolve toda a estrutura da tabela. Dentro dele, há três elementos <tr>, cada um representando uma linha da tabela. O primeiro elemento <tr> contém dois elementos <th>, definindo os cabeçalhos da tabela. Os elementos <tr> subsequentes contêm elementos <td>, contendo os dados reais para cada célula na tabela.

Usando essa estrutura básica, você pode criar tabelas de vários tamanhos e configurações para apresentar seus dados de maneira clara e organizada.

Bordas de Tabela

Nas tabelas HTML, você pode adicionar bordas à tabela e suas células usando o atributo border. O atributo border define a largura da borda ao redor da tabela e suas células. Por exemplo, definir border="1" no elemento <table> adicionará uma borda de 1 pixel ao redor da tabela e de cada célula.

<table border="1">
  <tr>
    <th>Cabeçalho 1</th>
    <th>Cabeçalho 2</th>
  </tr>
  <tr>
    <td>Dados 1</td>
    <td>Dados 2</td>
  </tr>
  <tr>
    <td>Dados 3</td>
    <td>Dados 4</td>
  </tr>
</table>

Embora o atributo border adicione bordas a uma tabela, ele tem controle limitado sobre o estilo da borda. Para mais flexibilidade, você pode usar CSS para estilizar as bordas da tabela.

Com CSS, você pode usar a propriedade border para definir a largura, o estilo e a cor da borda para a tabela e suas células. Aqui está um exemplo:

<table style="border: 2px solid #000;">
  <tr>
    <th style="border: 1px solid #000;">Cabeçalho 1</th>
    <th style="border: 1px solid #000;">Cabeçalho 2</th>
  </tr>
  <tr>
    <td style="border: 1px solid #000;">Dados 1</td>
    <td style="border: 1px solid #000;">Dados 2</td>
  </tr>
  <tr>
    <td style="border: 1px solid #000;">Dados 3</td>
    <td style="border: 1px solid #000;">Dados 4</td>
  </tr>
</table>

A propriedade border no atributo style define a borda do elemento <table> como uma borda preta sólida de 2 pixels. Cada elemento <th> e <td> tem uma borda preta sólida de 1 pixel aplicada usando a propriedade border.

O uso de CSS oferece mais controle sobre a aparência das bordas da tabela, permitindo definir diferentes estilos, cores e larguras de borda para diferentes partes da tabela. Você também pode direcionar células ou linhas específicas usando classes ou IDs CSS para um controle de estilo mais preciso.

Cabeçalhos de Tabela

Os cabeçalhos de tabela fornecem contexto e descrevem os dados em cada coluna ou linha. Para definir uma célula de cabeçalho em uma tabela, você usa o elemento <th> em vez do elemento <td>.

O texto dentro dos elementos <th> é exibido em negrito e centralizado, tornando-o visualmente distinto das células de dados regulares da tabela. Esse estilo ajuda os usuários a identificar rapidamente os cabeçalhos e entender a estrutura da tabela.

<table>
  <tr>
    <th>Nome</th>
    <th>Idade</th>
    <th>Cidade</th>
  </tr>
  <tr>
    <td>João</td>
    <td>25</td>
    <td>Nova York</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
    <td>Londres</td>
  </tr>
</table>

A primeira linha da tabela contém três elementos <th> representando os cabeçalhos para as colunas "Nome", "Idade" e "Cidade". As linhas subsequentes usam elementos <td> para exibir os dados reais.

Para estabelecer uma associação clara entre as células de cabeçalho e as células de dados correspondentes, você pode usar o atributo scope. O atributo scope especifica se uma célula de cabeçalho está associada a uma linha ou coluna.

<table>
  <tr>
    <th scope="col">Nome</th>
    <th scope="col">Idade</th>
    <th scope="col">Cidade</th>
  </tr>
  <tr>
    <td>João</td>
    <td>25</td>
    <td>Nova York</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
    <td>Londres</td>
  </tr>
</table>

O atributo scope é definido como col para cada elemento <th>, indicando que cada célula de cabeçalho está associada a uma coluna. Isso ajuda leitores de tela e outras tecnologias assistivas a entender a relação entre os cabeçalhos e as células de dados.

Você também pode usar o atributo scope com o valor row para células de cabeçalho que estão associadas a uma linha específica, como no caso de uma tabela com cabeçalhos de linha.

Ao usar elementos <th> e o atributo scope adequadamente, você pode criar tabelas bem estruturadas e acessíveis que são fáceis de entender tanto para usuários visuais quanto para aqueles que usam tecnologias assistivas.

Legenda da Tabela

O elemento <caption> em HTML define uma legenda ou título para uma tabela. Ele fornece uma breve descrição ou resumo do conteúdo da tabela, ajudando os usuários a entender o propósito ou contexto dos dados apresentados na tabela.

Por padrão, a legenda aparece acima da tabela, centralizada horizontalmente. O texto dentro do elemento <caption> é exibido como texto simples sem nenhuma estilização adicional.

<table>
  <caption>Informações dos Funcionários</caption>
  <tr>
    <th>Nome</th>
    <th>Departamento</th>
    <th>Salário</th>
  </tr>
  <tr>
    <td>João Silva</td>
    <td>Marketing</td>
    <td>R$50.000</td>
  </tr>
  <tr>
    <td>Maria Santos</td>
    <td>Vendas</td>
    <td>R$60.000</td>
  </tr>
</table>

O elemento <caption> é colocado imediatamente após a tag de abertura <table> e contém o texto "Informações dos Funcionários". Esta legenda fornece um título claro para a tabela, indicando que ela contém informações sobre funcionários.

Embora a estilização padrão do elemento <caption> seja suficiente na maioria dos casos, você pode usar CSS para estilizar e posicionar a legenda de acordo com suas necessidades.

table caption {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
}

Neste código CSS, a propriedade font-size define o tamanho do texto da legenda como 1,2 vezes o tamanho padrão. A propriedade font-weight deixa o texto em negrito para destacá-lo. A propriedade margin-bottom adiciona um espaço entre a legenda e a tabela. Por fim, a propriedade text-align alinha a legenda à esquerda em vez do alinhamento central padrão.

Você também pode usar CSS para posicionar a legenda abaixo da tabela ou aplicar outros estilos como cores, cores de fundo e preenchimento para combinar com suas preferências de design.

Usar o elemento <caption> e estilizá-lo com CSS permite que você forneça um título claro e descritivo para suas tabelas, tornando-as mais acessíveis e fáceis de usar.

Preenchimento e Espaçamento de Células da Tabela

Em tabelas HTML, você pode controlar o espaçamento dentro e entre as células da tabela usando os atributos cellpadding e cellspacing. Esses atributos permitem ajustar o espaçamento visual da sua tabela para torná-la mais legível.

O atributo cellpadding define a quantidade de espaço entre o conteúdo da célula e as bordas da célula. Ele determina o preenchimento interno dentro de cada célula. Por padrão, o conteúdo da célula é exibido próximo às bordas da célula, mas você pode aumentar o preenchimento para adicionar algum espaço.

<table cellpadding="10">
  <tr>
    <th>Cabeçalho 1</th>
    <th>Cabeçalho 2</th>
  </tr>
  <tr>
    <td>Dados 1</td>
    <td>Dados 2</td>
  </tr>
  <tr>
    <td>Dados 3</td>
    <td>Dados 4</td>
  </tr>
</table>

O atributo cellpadding está definido como 10, o que adiciona 10 pixels de preenchimento dentro de cada célula. Isso cria um espaço visível entre o conteúdo da célula e as bordas da célula, tornando o conteúdo mais legível.

O atributo cellspacing define a quantidade de espaço entre as células da tabela. Ele determina o espaçamento ou intervalo entre células adjacentes na tabela. Por padrão, não há espaçamento entre as células, mas você pode usar cellspacing para adicionar alguma separação.

<table cellspacing="5">
  <tr>
    <th>Cabeçalho 1</th>
    <th>Cabeçalho 2</th>
  </tr>
  <tr>
    <td>Dados 1</td>
    <td>Dados 2</td>
  </tr>
  <tr>
    <td>Dados 3</td>
    <td>Dados 4</td>
  </tr>
</table>

O atributo cellspacing está definido como 5, o que adiciona um espaço de 5 pixels entre as células. Isso cria uma separação visual entre as células, facilitando a distinção de uma célula da outra.

Embora os atributos cellpadding e cellspacing forneçam uma maneira rápida de controlar o preenchimento e o espaçamento das células, eles têm algumas limitações. Para mais controle e flexibilidade, você pode usar propriedades CSS como padding e border-spacing.

Com CSS, você pode direcionar células específicas, linhas ou toda a tabela para aplicar estilos de preenchimento e espaçamento.

<style>
  table {
    border-collapse: separate;
    border-spacing: 5px;
  }
  td, th {
    padding: 10px;
  }
</style>

<table>
  <tr>
    <th>Cabeçalho 1</th>
    <th>Cabeçalho 2</th>
  </tr>
  <tr>
    <td>Dados 1</td>
    <td>Dados 2</td>
  </tr>
  <tr>
    <td>Dados 3</td>
    <td>Dados 4</td>
  </tr>
</table>

A propriedade border-collapse é definida como separate para permitir o uso de border-spacing. A propriedade border-spacing é então usada para definir um espaçamento de 5 pixels entre as células. A propriedade padding é aplicada aos elementos <td> e <th> para adicionar 10 pixels de preenchimento dentro de cada célula.

O uso de CSS oferece mais controle sobre a aparência da sua tabela, permitindo que você defina diferentes valores de preenchimento e espaçamento para diferentes partes da tabela, e até mesmo aplique estilos diferentes com base em classes ou IDs específicos.

Ao usar os atributos cellpadding e cellspacing ou propriedades CSS como padding e border-spacing, você pode ajustar o espaçamento dentro e entre as células da tabela para criar tabelas visualmente atraentes e legíveis.

Colspan e Rowspan

Em tabelas HTML, você pode usar os atributos colspan e rowspan para criar layouts de tabela complexos, mesclando células em colunas ou linhas. Esses atributos permitem criar células que se estendem por várias colunas ou linhas.

O atributo colspan é usado para fazer uma célula se estender por várias colunas. Ele é aplicado a um elemento <th> ou <td> e especifica o número de colunas que a célula deve ocupar. Definir colspan="2" em uma célula fará com que ela ocupe duas colunas, mesclando as duas células em uma.

<table>
  <tr>
    <th colspan="2">Cabeçalho Mesclado</th>
  </tr>
  <tr>
    <td>Célula 1</td>
    <td>Célula 2</td>
  </tr>
  <tr>
    <td colspan="2">Célula Mesclada</td>
  </tr>
</table>

O atributo rowspan é usado para fazer uma célula se estender por várias linhas. Ele é aplicado a um elemento <th> ou <td> e especifica o número de linhas que a célula deve ocupar. Definir rowspan="3" em uma célula fará com que ela se estenda por três linhas, mesclando as células verticalmente.

<table>
  <tr>
    <th rowspan="2">Cabeçalho Mesclado</th>
    <td>Célula 1</td>
  </tr>
  <tr>
    <td>Célula 2</td>
  </tr>
  <tr>
    <td>Célula 3</td>
    <td>Célula 4</td>
  </tr>
</table>

Ao usar colspan e rowspan juntos, você pode criar layouts de tabela complexos com células mescladas que se estendem por colunas e linhas.

<table>
  <tr>
    <th colspan="2" rowspan="2">Cabeçalho Mesclado</th>
    <th>Cabeçalho 1</th>
  </tr>
  <tr>
    <th>Cabeçalho 2</th>
  </tr>
  <tr>
    <td>Célula 1</td>
    <td>Célula 2</td>
    <td>Célula 3</td>
  </tr>
</table>

O uso dos atributos colspan e rowspan permite criar tabelas com células mescladas, possibilitando apresentar dados de forma organizada e atraente. Esses atributos são úteis quando você tem dados que precisam ser agrupados ou quando deseja destacar células ou cabeçalhos em sua tabela.

Estilização de Tabelas com CSS

O CSS oferece opções de estilização para mudar a aparência de tabelas HTML. Com CSS, você pode alterar várias partes das suas tabelas, como cores de fundo, cores de texto, fontes, bordas e mais, para combinar com o design do seu site e melhorar a legibilidade.

Uma técnica de estilização é aplicar cores de fundo à tabela, linhas ou células. Você pode usar a propriedade background-color para definir uma cor sólida ou um gradiente como fundo.

<style>
  table {
    background-color: #f2f2f2;
  }
  th {
    background-color: #4CAF50;
    color: white;
  }
  tr:nth-child(even) {
    background-color: #e6e6e6;
  }
</style>

<table>
  <tr>
    <th>Cabeçalho 1</th>
    <th>Cabeçalho 2</th>
  </tr>
  <tr>
    <td>Dado 1</td>
    <td>Dado 2</td>
  </tr>
  <tr>
    <td>Dado 3</td>
    <td>Dado 4</td>
  </tr>
</table>

Neste exemplo, a propriedade background-color é aplicada ao elemento <table> para definir um fundo cinza claro para a tabela. Os elementos <th> têm um fundo verde e texto branco para destacar os cabeçalhos. O seletor tr:nth-child(even) seleciona todas as linhas pares e aplica uma cor de fundo diferente para criar um efeito listrado, melhorando a legibilidade.

Você também pode mudar os estilos de texto dentro das células da tabela. Use propriedades como color, font-family, font-size e text-align para mudar a cor do texto, fonte, tamanho e alinhamento.

<style>
  table {
    font-family: Arial, sans-serif;
    font-size: 14px;
  }
  td {
    color: #333;
    text-align: center;
  }
  th {
    font-weight: bold;
    text-transform: uppercase;
  }
</style>

<table>
  <tr>
    <th>Cabeçalho 1</th>
    <th>Cabeçalho 2</th>
  </tr>
  <tr>
    <td>Dado 1</td>
    <td>Dado 2</td>
  </tr>
  <tr>
    <td>Dado 3</td>
    <td>Dado 4</td>
  </tr>
</table>

Neste exemplo, as propriedades font-family e font-size são aplicadas ao elemento <table> para definir uma fonte e tamanho para a tabela. Os elementos <td> têm uma cor de texto cinza escuro e estão alinhados ao centro usando a propriedade text-align. Os elementos <th> são estilizados com peso de fonte negrito e texto em maiúsculas usando as propriedades font-weight e text-transform.

Para aplicar estilos a partes específicas da tabela, você pode usar classes ou IDs CSS. Ao atribuir uma classe ou ID a uma tabela, linha ou célula, você pode selecioná-las com seletores CSS e aplicar estilos.

<style>
  .destaque {
    background-color: yellow;
    font-weight: bold;
  }
  .texto-direita {
    text-align: right;
  }
</style>

<table>
  <tr>
    <th>Cabeçalho 1</th>
    <th>Cabeçalho 2</th>
  </tr>
  <tr>
    <td class="destaque">Dado 1</td>
    <td>Dado 2</td>
  </tr>
  <tr>
    <td>Dado 3</td>
    <td class="texto-direita">Dado 4</td>
  </tr>
</table>

Neste exemplo, a classe .destaque é aplicada a uma célula, dando a ela uma cor de fundo amarela e peso de fonte negrito. A classe .texto-direita é usada para alinhar o texto à direita dentro de uma célula.

Usando o poder do CSS, você pode criar tabelas bonitas e bem estruturadas que melhoram a apresentação dos seus dados. Experimente diferentes estilos, cores e layouts para encontrar o melhor design que atenda às suas necessidades e combine com a aparência do seu site.

Considerações de Acessibilidade

Ao criar tabelas em HTML, é importante pensar na acessibilidade. Isso torna suas tabelas compreensíveis e navegáveis por todos os usuários, incluindo aqueles que usam tecnologias assistivas como leitores de tela.

Uma prática importante de acessibilidade é usar o elemento <th> para células de cabeçalho em vez do elemento <td>. O elemento <th> fornece significado semântico, indicando que a célula contém informações de cabeçalho. Leitores de tela e outras tecnologias assistivas podem usar essas informações para ajudar os usuários a entender a estrutura e o contexto da tabela.

<table>
  <tr>
    <th>Nome</th>
    <th>Idade</th>
    <th>Cidade</th>
  </tr>
  <tr>
    <td>João</td>
    <td>25</td>
    <td>São Paulo</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
    <td>Rio de Janeiro</td>
  </tr>
</table>

Para melhorar ainda mais a acessibilidade, você deve associar células de cabeçalho às suas células de dados correspondentes. Isso pode ser feito usando os atributos scope ou headers.

O atributo scope especifica se uma célula de cabeçalho está associada a uma linha ou coluna. Ele pode ser definido como "row" para cabeçalhos de linha ou "col" para cabeçalhos de coluna.

<table>
  <tr>
    <th scope="col">Nome</th>
    <th scope="col">Idade</th>
    <th scope="col">Cidade</th>
  </tr>
  <tr>
    <td>João</td>
    <td>25</td>
    <td>São Paulo</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
    <td>Rio de Janeiro</td>
  </tr>
</table>

Alternativamente, você pode usar o atributo headers em células de dados para associá-las explicitamente a uma ou mais células de cabeçalho. O valor do atributo headers deve ser o id da célula de cabeçalho correspondente.

<table>
  <tr>
    <th id="nome">Nome</th>
    <th id="idade">Idade</th>
    <th id="cidade">Cidade</th>
  </tr>
  <tr>
    <td headers="nome">João</td>
    <td headers="idade">25</td>
    <td headers="cidade">São Paulo</td>
  </tr>
  <tr>
    <td headers="nome">Alice</td>
    <td headers="idade">30</td>
    <td headers="cidade">Rio de Janeiro</td>
  </tr>
</table>

Outra consideração de acessibilidade é fornecer uma legenda descritiva para a tabela usando o elemento <caption>. A legenda deve resumir o propósito ou conteúdo da tabela, ajudando os usuários a entender seu contexto.

<table>
  <caption>Informações dos Funcionários</caption>
  <tr>
    <th>Nome</th>
    <th>Departamento</th>
    <th>Salário</th>
  </tr>
  <tr>
    <td>João Silva</td>
    <td>Marketing</td>
    <td>R$ 50.000</td>
  </tr>
  <tr>
    <td>Maria Santos</td>
    <td>Vendas</td>
    <td>R$ 60.000</td>
  </tr>
</table>

Por fim, é importante evitar o uso de tabelas para fins de layout. As tabelas devem ser usadas para dados tabulares, não para organizar conteúdo em uma página. Para layout, use técnicas de CSS como flexbox ou grid. Isso ajuda a manter uma separação clara entre conteúdo e apresentação, tornando suas páginas web mais acessíveis e fáceis de manter.