Como estilizar tabelas com CSS para máximo impacto e ser notado

Twittar

Você encontrará muitos atributos e tags ao lidar com HTML (Hypertext Markup Language) e outras linguagens de marcação, como XML. Tabelas são atributos que você sempre deve usar para facilitar a varredura, comparação e análise de grandes quantidades de dados pelos usuários.

Com tabelas, os usuários podem ver os pontos-chave, conclusões ou resultados rapidamente, mesmo sem ler o artigo inteiro. Você pode usar CSS para estilizar e alterar a aparência de suas tabelas.

Estas são algumas das razões pelas quais você pode precisar estilizar uma tabela em seu aplicativo;

Melhore a aparência visual: mesas regulares podem ser chatas e simples. O estilo dessas tabelas melhorará sua aparência e as tornará atraentes para os usuários.
Melhore a acessibilidade: o estilo das tabelas pode torná-las acessíveis até mesmo para pessoas com deficiência.
Melhorar a legibilidade: você pode usar diferentes técnicas de estilo para facilitar a leitura dos dados apresentados em suas tabelas pelos usuários.
Branding: você pode reforçar a identidade de sua marca ao aplicar fontes e cores consistentes em suas tabelas em todo o aplicativo.
Bom para os mecanismos de pesquisa: organizar seus dados em formatos tabulares será útil se você quiser classificar seu site no topo dos mecanismos de pesquisa.

últimas postagens

Criar uma tabela básica com HTML

Para demonstrar como funciona uma tabela em HTML, vamos criar uma pasta de projeto, navegar até a pasta e criar dois arquivos; index.html, que carregará nosso código HTML, e styles.css, que carregará nosso código CSS (estilo).

Se você deseja acompanhar, use estes comandos para começar;

mkdir Estilo-HTML-Tabelas

cd Styling-HTML-Tabelas

touch Styling-HTML-Tabelas

Agora você tem a pasta básica do projeto para ajudá-lo a criar tabelas HTML. Quero apresentar diferentes linguagens de programação, seus casos de uso e exemplos de empresas que usam essas linguagens.

Para criar uma tabela HTML, todos os dados devem ser incluídos na tag

…

Em seu arquivo HTML, gere a estrutura básica de um documento HTML. Adicione este código dentro da tag .

<table>

        <tr>

          <th>Language</th>

          <th>Common Uses</th>

          <th>Companies Using</th>

        </tr>

        <tr>

          <td>Java</td>

          <td>Web apps, Android apps, enterprise applications</td>

          <td>Google, Amazon, LinkedIn</td>

        </tr>

        <tr>

          <td>Python</td>

          <td>Data science, web dev, automation</td>

          <td>Google, Dropbox,Spotify</td>

        </tr>

        <tr>

          <td>JavaScript</td>

          <td>Web dev, front-end dev, browser scripting</td>

          <td>PayPal, Facebook, Netflix</td>

        </tr>

        <tr>

          <td>C++</td>

          <td>Game dev, systems programming, embedded systems</td>

          <td>Tesla, Microsoft, Adobe</td>

        </tr>

        <tr>

          <td>Swift</td>

          <td>iOS development, macOS development</td>

          <td>Apple</td>

        </tr>

        <tr>

          <td>PHP</td>

          <td>Web dev, server-side scripting, CMSs</td>

          <td>WordPress, Wikipedia, Yahoo</td>

        </tr>

      </table>

Se você observar atentamente esta tabela, notará mais algumas tags dentro da tag

Um guia completo para soluções de segurança de rede

;

, linha da tabela, está dentro do elemento

e	. Essas tags fazem o seguinte;

. A tag

pode conter um ou mais elementos

. Por padrão, seu conteúdo está em negrito.

, cabeçalho da tabela, está contido na tag

, dados da tabela, descreve o conteúdo dos dados nas células da tabela.

Ao renderizar o código que escrevemos acima, teremos isso em nosso navegador;

Propriedades CSS usadas para estilizar tabelas

A tabela que criamos acima é totalmente funcional. No entanto, deixa muito a desejar, pois não é bem estilizado. Para atingir os estilos desejados e tornar a tabela visualmente atraente, usaremos CSS.

Lembra do arquivo CSS que criamos? Agora é hora de usá-lo. No entanto, você deve primeiro importar seu arquivo CSS para seu arquivo HTML para que o estilo funcione. Chamamos nosso arquivo CSS de styles.css. Na seção do seu documento HTML, adicione o seguinte;

Agora estamos prontos para estilizar nossa mesa. Podemos estilizá-lo da seguinte maneira;

#1. Fronteira

Podemos adicionar uma borda ao redor das células em nossa tabela. Para conseguir isso, definiremos uma propriedade de borda nos elementos

. Podemos definir a borda para 2px.

th, td {

    border: 2px solid orange;

  }

Definimos o valor da borda como 2 e adicionamos laranja como nossa cor.

Ao renderizar a nova página, você verá o seguinte;

#2. Colapso de borda

Se você examinar a captura de tela acima, notará que há espaços entre as bordas de cada célula. A propriedade border-collapse determina se células adjacentes em uma tabela devem compartilhar uma borda.

Se você deseja que as células compartilhem uma borda, adicione este código ao seu arquivo CSS;

table {

  border-collapse: collapse;

}

Ao renderizar sua página, você pode ver que as células compartilham bordas da seguinte maneira;

Se você deseja que as células tenham bordas diferentes, adicione isso ao seu arquivo CSS;

table {

  border-collapse: separate;

}

A página renderizada aparecerá da seguinte maneira;

#3. Espaçamento entre bordas

Usando a propriedade border-space, podemos criar um pequeno espaço entre as células da nossa tabela. Definimos a regra dentro da classe table em nosso arquivo CSS.

Para que essa propriedade funcione, precisamos usar border-collapse: separado; propriedade.

Podemos ter nossa classe de tabela da seguinte maneira;

table {

    border-collapse: separate;

    border-spacing: 3px;

  }

As bordas das células têm um espaço de 3px.

Ao renderizar a tabela, ela aparecerá da seguinte maneira;

#4. Layout de tabela

A propriedade Table-layout determina a natureza da tabela. Você pode ter tabelas que sempre tenham o mesmo comprimento. Por outro lado, você também pode criar tabelas que mudam com base no conteúdo.

Se quisermos ter células com tamanhos semelhantes, podemos definir a propriedade table-layout como fixa.

layout da tabela: fixo;

Nosso código final na classe da tabela será;

table {

    border-collapse: collapse;

    border-spacing: 3px;

    table-layout: fixed;

  }

Se quisermos células que mudem com base no conteúdo, podemos alterar a propriedade table-layout para auto.

layout da tabela: auto;

A classe da tabela final em nosso código CSS será;

Verifique a última célula da tabela e observe que adicionei estas palavras; MailChimp e muito mais.

Agora você pode ver que as células na última linha são maiores que as demais, pois o layout da tabela é flexível com base no conteúdo.

O estilo que abordamos até agora se concentrou em toda a mesa. Agora podemos nos concentrar em classes individuais alterando a cor de fundo, a fonte e as propriedades de alinhamento do texto para linhas, células ou cabeçalhos.

Podemos estilizar essas propriedades da seguinte maneira;

#5. Cor de fundo

Podemos alterar o plano de fundo da linha superior para verde-amarelo. Podemos usar o seletor de pseudoclasse :first-child para atingir nossos objetivos.

Adicione este código ao seu código CSS;

tr:first-child {

    background-color: yellowgreen;

  }

O código final exibido aparecerá da seguinte maneira;

#6. Fonte

Podemos alterar o estilo ou o tamanho da fonte de linhas, colunas ou células específicas em nossa tabela.

Vamos direcionar o conteúdo da última coluna da nossa página (Empresas que usam) para alterar o estilo da fonte.

Colocaremos em itálico todo o conteúdo desta coluna visando o seletor de classe td:last-child. Você pode adicionar o seguinte código ao seu arquivo CSS;

td:last-child {

  font-style: italic;

}

A saída final será a seguinte quando você recarregar a página renderizada;

Também podemos alterar a cor e o tamanho da fonte da primeira coluna para torná-la única.

Adicione o seguinte código ao seu arquivo CSS;

tr td:first-child {

    color: red;

    font-size: x-large;

    font-weight: bolder;

  }

Ao renderizar sua página, você observará o seguinte; o conteúdo da primeira coluna (Idioma) tem um tamanho de fonte maior, é vermelho e está em negrito.

Como tornar a tabela responsiva

A tabela que criamos pode não responder a telas pequenas. Você pode usar as ferramentas de desenvolvedor do Chrome ou uma ferramenta externa como esta para testar se seu código é responsivo.

Existem várias abordagens que você pode adotar, mas abordarei apenas uma.

Siga esses passos;

Defina a largura do elemento
em seu código;

table {

  width: 100%;

  border-collapse: collapse;

  table-layout: fixed;

}

Defina a quebra de palavra em td e th para criar palavras longas na célula.

th, td {

    border: 2px solid orange;

    word-break: break-word;

  }

Práticas recomendadas para estilizar tabelas

CSS pode ser divertido uma vez, especialmente quando você o conhece. Estas são algumas das práticas recomendadas para garantir que você obtenha o melhor ao estilizar suas tabelas;

Use uma folha de estilo externa: Tínhamos a opção de usar estilo embutido, mas escolhemos uma folha externa. Conseguimos reutilizar nosso estilo em diferentes tabelas, reduzindo o tempo de desenvolvimento.
Mantenha as coisas simples: você pode se deixar levar e exagerar no estilo de suas mesas. No entanto, sempre mantenha um design simples e torne suas tabelas escaneáveis e legíveis.
Adicione bordas às suas tabelas: uma borda facilita a leitura e a digitalização de uma tabela.
Use cores consistentes: se você tiver várias tabelas em suas páginas da Web, certifique-se de usar cores e fontes consistentes. Usar as cores da sua marca pode melhorar a visibilidade da sua marca.
Torne suas tabelas responsivas: talvez você nunca saiba o tamanho da tela dos dispositivos dos usuários finais.
Use legendas para descrever suas tabelas: A legenda descreve brevemente o que é a tabela.
Use espaços em branco para separar suas tabelas: Se várias tabelas se seguirem, adicione algum espaço em branco e coloque legendas de acordo.

Conclusão

Acredito que agora você pode criar e estilizar uma tabela HTML básica. Podemos não ter coberto tudo, pois HTML e CSS são amplos. Você pode criar tabelas menores ou maiores, dependendo da natureza dos dados que deseja capturar.

Confira as folhas de dicas de CSS se quiser aprender mais sobre CSS e como usá-lo para melhorar sua interface do usuário.