Como construir uma tabela HTML elegante e responsiva

Neste tutorial, aprenderemos como construir uma mesa elegante e modificar seu layout para adaptá-la a vários tamanhos de tela.

Os dados apresentados em nossa tabela virão da plataforma IMDb e listarão alguns filmes de Steven Spielberg.

Tabelas responsivas em HTML

Os dados tabulares devem ser estruturados de uma forma: com os elementos da tabela HTML. Essa é a abordagem semanticamente correta, mas pode nos trazer sérios desafios estilísticos. As tabelas são notoriamente inflexíveis quando se trata de layouts responsivos.

Existem várias soluções para o problema: contêineres roláveis ​​envolvendo a tabela, células recolhíveis, usando marcações diferentes (menos semânticas). Vamos usar o Flexbox para exibir nossas células de tabela em um layout de grade em telas menores.

1. Comece com a marcação HTML

A marcação será direta: uma tabela com seis linhas dentro de um contêiner.

Veja como ficará:

  
  

    

      

        
Title
        
Year
        
Stars
        
Plot
      
    
    

      

        

          Title: 
          ...
        
        

          Year: ...
          
        
        

          Stars: 
          ...
        
        

          Plot: 
          ...
        
      
      
      

    
  

Observe o visible@l e hidden@l Aulas. Isso nos ajudará a alternar entre elementos específicos, dependendo do tamanho da viewport.

2. Adicionar estilos

Principalmente, seguiremos uma abordagem mobile-first para nossos estilos. Como mencionado acima, precisaremos de duas classes auxiliares:

@media (max-width: 999px) {
  .visible@l {
    display: none;
  }
}

@media (min-width: 1000px) {
  .hidden@l {
    display: none;
  }
}

Em qualquer ponto, nossa tabela terá linhas listradas; vamos usar o :nth-child() Pseudoclasse CSS para gerá-los.

Em telas pequenas e médias, o cabeçalho da tabela ficará oculto. Neste ponto, mostraremos um número indicando o número do filme. Substituiremos os cabeçalhos das tabelas por alguns strong elementos que aparecerão dentro de cada célula.

Então, em telas pequenas, ficará assim:

Em telas médias, a tabela será uma grade de duas colunas:

Em telas grandes, todas as células da tabela terão uma largura de 25%. Além disso, os cabeçalhos das tabelas ficarão visíveis.

Cada vez que passarmos o mouse sobre uma linha, aparecerá uma imagem associada. Além disso, um pequeno marcador preto ficará na posição central direita para indicar a linha ativa.

Com tudo isso em mente, aqui está uma parte desses estilos. Observe como começamos com nossas linhas de tabela usando display: flex; flex-wrap: wrap;com display: table-row; entrando em ação assim que atingimos o ponto de interrupção de 1.000 px:

/*CUSTOM VARIABLES HERE*/

table {
  margin: 50px 0 20px;
  text-align: left;
  border-collapse: collapse;
  border: 1px solid var(--table-border);
}

table th {
  color: var(--white);
  background: var(--darkblue);
  padding: 20px;
}

table td {
  width: 100%;
  padding: 10px;
}

table tbody tr {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  counter-increment: counter;
}

table tbody tr::before {
  content: counter(counter);
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  font-weight: bold;
  color: var(--white);
  background: var(--black);
  z-index: 1;
}

table tbody tr:nth-of-type(even) > * {
  background: var(--lightblue);
}

table img {
  display: none;
  position: absolute;
  top: 20px;
  left: 45%;
  max-width: 150px;
  z-index: 1;
}

@media (min-width: 700px) and (max-width: 999px) {
  table tbody {
    display: flex;
    flex-wrap: wrap;
  }

  table tbody tr {
    width: 50%;
  }
}

@media (min-width: 1000px) {
  table th,
  table td {
    width: 25%;
  }

  table tbody tr {
    display: table-row;
  }
}

@media (hover: hover) and (min-width: 1000px) {
  table tbody tr:hover {
    cursor: pointer;
  }
  table tbody tr:hover img {
    display: block;
  }

  table tbody tr:hover td:first-child::before {
    display: block;
  }
}

Você pode conferir todos clicando no botão CSS guia da demonstração.

Conclusão

Neste breve tutorial, abordamos uma maneira de criar uma tabela responsiva que ficará ótima em diferentes telas. Em telas pequenas e médias, fazemos com que se comporte como uma grade, enquanto em telas maiores, temos uma tabela típica com células.

Aqui está um lembrete do que construímos:

Como sempre, muito obrigado pela leitura!