Tabelas no CSS

Tempo de leitura: 2 minutos

Tabelas no CSS: As tabelas são uma parte essencial da web, usadas para exibir dados de forma organizada e legível. O HTML fornece a estrutura básica para criar tabelas, mas o CSS nos permite estilizá-las e melhorar sua aparência.

Neste artigo, exploraremos como usar o CSS para estilizar tabelas e torná-las mais atraentes.

Estilizando Tabelas com CSS

Bordas e Espaçamento

Para especificar bordas em uma tabela, podemos usar a propriedade border diretamente no elemento table, assim como também nas tags que formam um tabela como <th, ><tr> e <td>. Por exemplo:

table {
    border: 1px solid #ddd; /* Borda sólida de 1 pixel */
}

Podemos também adicionar espaçamento entre as células usando a propriedade border-spacing:

table {
    border-spacing: 10px; /* Espaçamento de 10 pixels entre as células */
}

Largura e Altura

Para definir a largura de uma tabela, podemos usar a propriedade width. Por exemplo:

table {
    width: 100%; /* A tabela ocupa 100% da largura do contêiner */
}

Se quisermos que a tabela ocupe a largura total da tela, podemos usar:

table {
    width: 100vw; /* A tabela ocupa 100% da largura da janela de visualização */
}

Cores e Estilos

Podemos definir cores para as células, cabeçalhos e rodapés da tabela usando as propriedades background-color, color e font-weight. Por exemplo:

th {
    background-color: #f5f5f5; /* Cor de fundo para os cabeçalhos */
    color: #333; /* Cor do texto para os cabeçalhos */
    font-weight: bold; /* Texto em negrito para os cabeçalhos */
}

Alinhamento de Texto

Para alinhar o texto nas células, podemos usar as propriedades text-align e vertical-align. Por exemplo:

td {
    text-align: center; /* Alinhamento centralizado horizontalmente */
    vertical-align: middle; /* Alinhamento vertical no centro */
}

Listras e Hover

Para adicionar listras às linhas da tabela e destacar as células quando o mouse passa sobre elas, podemos usar:

tr:nth-child(even) {
    background-color: #f9f9f9; /* Listras para linhas pares */
}

td:hover {
    background-color: #e0e0e0; /* Destaque ao passar o mouse sobre as células */
}

Conclusão

As tabelas são uma ferramenta valiosa para apresentar dados de maneira organizada. Com o CSS, podemos estilizá-las e torná-las mais atraentes. Experimente diferentes propriedades e veja como você pode melhorar a aparência das suas tabelas!

E para você validar seus códigos, você precisará de uma plataforma de host completa. Clique aqui e conheça a Hostinger, a hospedagem de sites com potência de verdade!!!