Eleve suas tabelas com as melhores propriedades de tabela

Se você está interessado em aprender sobre design de websites, uma das habilidades fundamentais que você precisa ter é o conhecimento de como usar as propriedades de tabela no CSS.

Tabelas são frequentemente usadas para exibir dados em formato de grade, mas elas também podem ser usadas para organizar o layout de uma página. Ao usar propriedades de tabela, você pode controlar a aparência e o comportamento da tabela em seu website, incluindo a largura das células, a altura das linhas e a cor de fundo da tabela.

Pois bem, vamos explorar algumas das propriedades de tabela mais comuns no CSS e como usá-las para criar tabelas que são funcionais e atraentes visualmente.

Estrutura básica de tabela no HTML e CSS

Para criar uma tabela em HTML e CSS, você precisa seguir uma estrutura básica. Primeiro, você precisa criar a tag <table> para indicar o início da tabela e a tag </table> para indicar o final da tabela.

Dentro dessas tags, você pode adicionar outras tags para definir as linhas e células da tabela, como <tr> para definir uma nova linha e <td> para definir uma célula.

Aqui está um exemplo de código HTML básico para criar uma tabela com duas linhas e duas colunas:

<table>

  <tr>

    <td>Coluna 1, Linha 1</td>

    <td>Coluna 2, Linha 1</td>

  </tr>

  <tr>

    <td>Coluna 1, Linha 2</td>

    <td>Coluna 2, Linha 2</td>

  </tr>

</table>

Neste exemplo, a tag <table> indica o início da tabela, e as tags <tr> indicam o início de cada linha. Dentro de cada linha, as tags <td> definem as células individuais da tabela.

Pois bem, para essa tabela um código básico CSS para ela. Assim temos:

para estilizar a tabela em CSS, você pode usar a propriedade border-collapse para definir como as bordas da tabela e das células são exibidas.

Você também pode usar a propriedade border para definir a largura, estilo e cor das bordas, a propriedade background-color para definir a cor de fundo da tabela e das células, e a propriedade text-align para alinhar o texto dentro das células.

Aqui está um exemplo de código CSS básico para estilizar a tabela do exemplo anterior:

table {

  border-collapse: collapse;

  width: 100%;

  background-color: #f2f2f2;

}

td {

  border: 1px solid #ddd;

  padding: 8px;

  text-align: center;

}

th {

  border: 1px solid #ddd;

  padding: 8px;

  text-align: center;

  background-color: #4CAF50;

  color: white;

}

Propriedades de estilo de célula, incluindo cor de fundo, borda e margem

Para estilizar as células da tabela em CSS, você pode usar várias propriedades de estilo, incluindo cor de fundo, borda e margem. Essas propriedades ajudam a melhorar a aparência da tabela e a destacar as informações importantes.

A propriedade background-color define a cor de fundo da célula. Por exemplo, você pode definir a cor de fundo da célula como azul claro usando o seguinte código CSS:

td {

  background-color: #E6F7FF;

}

A propriedade border define a largura, estilo e cor da borda da célula. Por exemplo, você pode definir a borda da célula como uma linha sólida com uma largura de 1 pixel e cor cinza usando o seguinte código CSS:

td {

  border: 1px solid #ccc;

}

A propriedade padding define o espaço entre o conteúdo da célula e a borda da célula. Por exemplo, você pode adicionar um espaço interno de 10 pixels à célula usando o seguinte código CSS:

td {

  padding: 10px;

}

A propriedade margin define o espaço fora da borda da célula. Por exemplo, você pode adicionar uma margem externa de 5 pixels à célula usando o seguinte código CSS:

td {

  margin: 5px;

}

Ao usar essas propriedades de estilo de célula, você pode personalizar a aparência da tabela e torná-la mais atraente e fácil de entender para os usuários.

Veja também:

Estrutura Básica Do HTML
Introdução rápida sobre Python
Introdução rápida sobre JavaScript
Passo a passo de como funciona a internet
JavaScript: acelere seu site Usando a Tag script

Propriedades de estilo de linha, como altura, cor e estilo da borda

Para estilizar as linhas de uma tabela em CSS, você pode usar várias propriedades de estilo, incluindo altura, cor e estilo da borda. Essas propriedades ajudam a melhorar a aparência da tabela e a torná-la mais legível para o usuário.

A propriedade height define a altura da linha da tabela. Por exemplo, você pode definir a altura da linha como 30 pixels usando o seguinte código CSS:

tr {

  height: 30px;

}

A propriedade border define a largura, estilo e cor da borda da linha. Por exemplo, você pode definir a borda da linha como uma linha sólida com uma largura de 1 pixel e cor cinza usando o seguinte código CSS:

tr {

  border: 1px solid #ccc;

}

Além disso, você pode usar as pseudo-classes :hover e :nth-child para aplicar estilos específicos a linhas individuais. Por exemplo, para definir uma borda diferente quando o mouse estiver sobre uma linha, use o seguinte código CSS:

tr:hover {

  border: 1px solid #000;

}

Para definir um estilo de borda diferente para cada linha, use a pseudo-classe :nth-child. Por exemplo, para definir uma borda diferente para cada linha ímpar, use o seguinte código CSS:

tr:nth-child(odd) {

  border: 1px dotted #ccc;

}

Ao usar essas propriedades de estilo de linha, você pode personalizar a aparência da tabela e torná-la mais fácil de entender e navegar para os usuários.

Propriedades de estilo de coluna, como largura e alinhamento de texto

Para estilizar as colunas de uma tabela em CSS, você pode usar várias propriedades de estilo, incluindo largura e alinhamento de texto. Essas propriedades ajudam a melhorar a aparência da tabela e a torná-la mais fácil de ler para o usuário.

A propriedade width define a largura da coluna da tabela. Por exemplo, você pode definir a largura da primeira coluna como 100 pixels e a segunda coluna como 50% da largura da tabela usando o seguinte código CSS:

td:first-child {

  width: 100px;

}

td:nth-child(2) {

  width: 50%;

}

A propriedade text-align define o alinhamento do texto dentro da célula. Por exemplo, você pode alinhar o texto da coluna à esquerda usando o seguinte código CSS:

td {

  text-align: left;

}

Além disso, você pode usar a pseudo-classe :nth-child para aplicar estilos específicos a colunas individuais. Por exemplo, para definir um estilo de borda diferente para a segunda coluna, use o seguinte código CSS:

td:nth-child(2) {

  border: 1px solid #000;

}

Ao usar essas propriedades de estilo de coluna, você pode personalizar a aparência da tabela e torná-la mais fácil de entender e navegar para os usuários.

Técnicas para mesclar células e adicionar cabeçalhos e rodapés de tabela

Para melhorar a legibilidade e organização da tabela, é possível mesclar células, adicionar cabeçalhos e rodapés em uma tabela HTML.

Para mesclar células, você pode usar a propriedade rowspan ou colspan. A propriedade rowspan permite que uma célula ocupe várias linhas, enquanto a propriedade colspan permite que uma célula ocupe várias colunas. Por exemplo, o seguinte código HTML mescla uma célula que ocupa duas linhas e duas colunas:

<table>

  <tr>

    <td rowspan="2" colspan="2">Célula mesclada</td>

    <td>Célula 1</td>

    <td>Célula 2</td>

  </tr>

  <tr>

    <td>Célula 3</td>

    <td>Célula 4</td>

  </tr>

</table>

Para adicionar cabeçalhos e rodapés em uma tabela, você pode usar as tags thead, tbody e tfoot. A tag thead define o cabeçalho da tabela, a tag tbody define o corpo da tabela e a tag tfoot define o rodapé da tabela. Por exemplo:

<table>

  <thead>

    <tr>

      <th>Coluna 1</th>

      <th>Coluna 2</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>Célula 1</td>

      <td>Célula 2</td>

    </tr>

    <tr>

      <td>Célula 3</td>

      <td>Célula 4</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <td>Total</td>

      <td>$100</td>

    </tr>

  </tfoot>

</table>

Ao usar essas técnicas de mesclagem de células e adição de cabeçalhos e rodapés em uma tabela, você pode torná-la mais organizada e fácil de entender para os usuários.

Como tornar a tabela responsiva para dispositivos móveis

Quando uma tabela é visualizada em um dispositivo móvel, é importante que ela seja apresentada de forma responsiva e adaptável à tela, para que o usuário possa visualizar todas as informações sem precisar fazer zoom ou rolar a tela horizontalmente.

Para tornar uma tabela responsiva, você pode usar a propriedade CSS overflow-x: auto; na tag <table> para adicionar uma barra de rolagem horizontal quando a tabela exceder a largura da tela. Além disso, você pode usar a propriedade max-width: 100%; na tabela para que ela não ultrapasse a largura do contêiner pai e mantenha sua proporção.

Aqui está um exemplo de código CSS para tornar uma tabela responsiva:

table {

  overflow-x: auto;

  max-width: 100%;

}

Além disso, você também pode ocultar algumas colunas em dispositivos móveis para tornar a tabela mais compacta e legível. Para isso, você pode usar a propriedade CSS display: none; em uma classe específica para colunas selecionadas em dispositivos móveis. Por exemplo:

@media only screen and (max-width: 600px) {

  .hide-on-mobile {

    display: none;

  }

}

Com essas técnicas, você pode tornar sua tabela mais responsiva e adaptável para dispositivos móveis.

Dicas de acessibilidade para tabelas, como adicionar resumos e rótulos de cabeçalho

Ao criar tabelas em HTML e CSS, é importante levar em consideração a acessibilidade para usuários com deficiência visual ou cognitiva. Para garantir que sua tabela seja acessível, você pode seguir algumas dicas simples:

1. Adicione um resumo da tabela usando a tag <summary>. O resumo deve explicar brevemente o propósito e o conteúdo da tabela. Por exemplo:

<table>

  <summary>Tabela de preços dos nossos produtos</summary>

  ...

</table>

2. Use rótulos de cabeçalho para associar as células da tabela às suas respectivas colunas ou linhas. Você pode usar a tag <th> para as células do cabeçalho e as tags <td> para as células de dados. Por exemplo:

<table>

  <thead>

    <tr>

      <th scope="col">Produto</th>

      <th scope="col">Preço</th>

      <th scope="col">Disponibilidade</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">Camiseta</th>

      <td>$20</td>

      <td>Em estoque</td>

    </tr>

    <tr>

      <th scope="row">Calça jeans</th>

      <td>$40</td>

      <td>Em estoque</td>

    </tr>

  </tbody>

</table>

Observe o uso do atributo scope na tag <th> para indicar se a célula é o cabeçalho de uma coluna (scope=”col”) ou de uma linha (scope=”row”).

3. Use cores e contrastes adequados para garantir que a tabela seja legível para usuários com daltonismo ou deficiência visual. Evite o uso exclusivo de cores para transmitir informações importantes.

Ao seguir essas dicas simples, você pode tornar sua tabela mais acessível e fácil de usar para todos os usuários.

Como usar CSS Grid e Flexbox para criar tabelas sem usar a tag <table>

Para criar tabelas sem a tag <table>, é possível utilizar as propriedades CSS Grid e Flexbox. Essas técnicas permitem criar layouts flexíveis e responsivos sem precisar se preocupar com a estruturação tradicional de tabela.

Com o CSS Grid, é possível criar um grid que imita a estrutura de uma tabela, com linhas e colunas definidas. Já com o Flexbox, é possível alinhar os elementos em uma única linha ou coluna.

Um exemplo de uso do CSS Grid para criar uma tabela seria:

<div class="grid-container">

  <div class="grid-item">Célula 1</div>

  <div class="grid-item">Célula 2</div>

  <div class="grid-item">Célula 3</div>

  <div class="grid-item">Célula 4</div>

  <div class="grid-item">Célula 5</div>

  <div class="grid-item">Célula 6</div>

</div>

<style>

  .grid-container {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-gap: 10px;

  }

  .grid-item {

    border: 1px solid black;

    padding: 10px;

  }

</style>

Esse código criaria uma tabela com 2 linhas e 3 colunas, com células com bordas e espaçamento entre elas.

Já um exemplo de uso do Flexbox seria:

<div class="flex-container">

  <div class="flex-item">Célula 1</div>

  <div class="flex-item">Célula 2</div>

  <div class="flex-item">Célula 3</div>

  <div class="flex-item">Célula 4</div>

  <div class="flex-item">Célula 5</div>

  <div class="flex-item">Célula 6</div>

</div>

<style>

  .flex-container {

    display: flex;

    flex-wrap: wrap;

  }

  .flex-item {

    width: 33.33%;

    border: 1px solid black;

    padding: 10px;

    box-sizing: border-box;

  }

</style>

Esse código criaria uma tabela com 2 linhas e 3 colunas, onde cada célula ocupa um terço da largura da linha. As células também possuem bordas e espaçamento entre elas.

Exemplos práticos de tabelas criadas com CSS e HTML

Existem diversas maneiras de criar tabelas utilizando HTML e CSS. Segue abaixo alguns exemplos práticos:

1. Tabela simples com bordas e células destacadas:

<table>

  <tr>

    <th>Nome</th>

    <th>Idade</th>

    <th>Profissão</th>

  </tr>

  <tr>

    <td>João</td>

    <td>28</td>

    <td>Desenvolvedor</td>

  </tr>

  <tr>

    <td>Maria</td>

    <td>32</td>

    <td>Designer</td>

  </tr>

</table>

<style>

  table {

    border-collapse: collapse;

    width: 100%;

  }

  th, td {

    border: 1px solid black;

    padding: 8px;

    text-align: left;

  }

  th {

    background-color: #ddd;

  }

  td {

    background-color: #f2f2f2;

  }

  tr:hover {

    background-color: #ddd;

  }

</style>

2. Tabela com mesclagem de células e cabeçalho fixo:

<div class="table-wrapper">

  <table>

    <thead>

      <tr>

        <th rowspan="2">Nome</th>

        <th colspan="2">Informações</th>

      </tr>

      <tr>

        <th>Idade</th>

        <th>Profissão</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>João</td>

        <td>28</td>

        <td>Desenvolvedor</td>

      </tr>

      <tr>

        <td>Maria</td>

        <td>32</td>

        <td>Designer</td>

      </tr>

    </tbody>

  </table>

</div>

<style>

  .table-wrapper {

    max-height: 300px;

    overflow-y: auto;

  }

  table {

    border-collapse: collapse;

    width: 100%;

    white-space: nowrap;

  }

  th, td {

    border: 1px solid black;

    padding: 8px;

    text-align: left;

  }

  th {

    background-color: #ddd;

    position: sticky;

    top: 0;

  }

  tr:nth-child(even) {

    background-color: #f2f2f2;

  }

  tr:hover {

    background-color: #ddd;

  }

</style>

Veja o primeiro artigo do Tutorial: Introdução rápida sobre CSS

Conclusão

Parabéns, você aprendeu bastante sobre tabelas em HTML e CSS! Agora você é capaz de criar tabelas visualmente atraentes e responsivas, adicionando diferentes estilos às células, linhas e colunas.

Você também aprendeu técnicas importantes para melhorar a acessibilidade de suas tabelas e como criar tabelas sem o uso da tag <table> usando CSS Grid e Flexbox.

Lembre-se sempre de considerar a usabilidade e acessibilidade ao projetar tabelas e utilizar as melhores práticas para que suas tabelas possam ser facilmente compreendidas por todos os usuários. Com essas habilidades em mãos, você pode criar tabelas eficazes que melhoram a experiência do usuário em seu site ou aplicativo.

Perguntas frequentes