Ao trabalhar com HTML (Linguagem de Marcação de Hipertexto) e outras linguagens de marcação, como XML, você se deparará com diversos atributos e tags. Tabelas são elementos fundamentais para facilitar a visualização, comparação e análise de grandes conjuntos de dados pelos usuários.
Através de tabelas, os usuários podem identificar rapidamente informações cruciais, conclusões ou resultados, mesmo sem precisar ler todo o conteúdo. Além disso, o CSS possibilita personalizar a aparência das suas tabelas, adaptando-as ao seu estilo.
Existem diversas razões pelas quais você pode desejar estilizar uma tabela em seu projeto:
- Aprimoramento Visual: Tabelas padrão podem parecer monótonas e simplistas. Ao estilizar suas tabelas, você melhora a sua apresentação e as torna mais atrativas para o público.
- Maior Acessibilidade: A personalização das tabelas contribui para que elas se tornem acessíveis, inclusive para pessoas com algum tipo de deficiência.
- Facilidade de Leitura: Ao aplicar diferentes técnicas de estilo, você pode facilitar a compreensão dos dados apresentados nas tabelas pelos usuários.
- Identidade da Marca: A utilização consistente de fontes e cores nas suas tabelas, em todo o seu projeto, fortalece a identidade da sua marca.
- Otimização para Mecanismos de Busca: Organizar dados em formatos tabulares pode ser um fator positivo para melhorar o posicionamento do seu site nos resultados de pesquisa.
Criação de uma Tabela Básica com HTML
Para demonstrar o funcionamento de uma tabela em HTML, vamos criar um diretório para o projeto, acessá-lo e criar dois arquivos: um chamado ‘index.html’, onde colocaremos o código HTML, e outro nomeado ‘styles.css’, que irá armazenar nosso código CSS (estilo).
Se você quiser acompanhar, utilize os seguintes comandos:
mkdir Estilo-HTML-Tabelas
cd Estilo-HTML-Tabelas
touch index.html styles.css
Agora você tem a estrutura básica do projeto para desenvolver tabelas HTML. O objetivo é apresentar diferentes linguagens de programação, suas aplicações e exemplos de empresas que as utilizam.
Para criar uma tabela HTML, todos os dados devem ser incluídos dentro da tag <table>...</table>.
No arquivo ‘index.html’, crie a estrutura básica de um documento HTML e insira o seguinte código dentro da tag <body>:
<table>
<tr>
<th>Linguagem</th>
<th>Usos Comuns</th>
<th>Empresas que Utilizam</th>
</tr>
<tr>
<td>Java</td>
<td>Aplicativos web, aplicativos Android, aplicações empresariais</td>
<td>Google, Amazon, LinkedIn</td>
</tr>
<tr>
<td>Python</td>
<td>Ciência de dados, desenvolvimento web, automação</td>
<td>Google, Dropbox, Spotify</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Desenvolvimento web, desenvolvimento front-end, scripting de navegador</td>
<td>PayPal, Facebook, Netflix</td>
</tr>
<tr>
<td>C++</td>
<td>Desenvolvimento de jogos, programação de sistemas, sistemas embarcados</td>
<td>Tesla, Microsoft, Adobe</td>
</tr>
<tr>
<td>Swift</td>
<td>Desenvolvimento iOS, desenvolvimento macOS</td>
<td>Apple</td>
</tr>
<tr>
<td>PHP</td>
<td>Desenvolvimento web, scripting do lado do servidor, CMSs</td>
<td>WordPress, Wikipedia, Yahoo</td>
</tr>
</table>
Analisando essa tabela, você perceberá a existência de outras tags dentro da tag <table>: <tr>, <th> e <td>.
Essas tags têm as seguintes funções:
<tr>, que representa uma linha da tabela, é inserida dentro do elemento<table>. A tag<tr>pode conter um ou mais elementos<th>e<td>.<th>, que indica o cabeçalho da tabela, é inserida na tag<tr>. Por padrão, seu conteúdo é exibido em negrito.<td>, que representa os dados da tabela, descreve o conteúdo das células da tabela.
Ao carregar o código acima em um navegador, a tabela será exibida de forma básica, sem estilos.
Propriedades CSS para Estilizar Tabelas
A tabela que criamos está totalmente funcional, mas carece de estilo. Para personalizá-la visualmente, utilizaremos o CSS.
Lembra do arquivo ‘styles.css’ que criamos? Agora é hora de usá-lo. No entanto, primeiro, você precisa importar esse arquivo para o seu arquivo HTML para que o estilo funcione. Na seção <head> do seu documento HTML, adicione o seguinte:
Agora podemos estilizar nossa tabela de diversas formas:
#1. Borda
Podemos adicionar bordas ao redor das células da tabela. Para isso, definiremos a propriedade ‘border’ nos elementos <th> e <td>. Definiremos a borda com 2px de largura:
th, td {
border: 2px solid orange;
}
Definimos a largura da borda como 2 pixels e a cor como laranja.
Ao carregar a página, você verá que as células agora têm bordas.
#2. Colapso de Borda
Ao analisar a imagem anterior, você pode notar que há espaços entre as bordas de cada célula. A propriedade ‘border-collapse’ define se as células adjacentes em uma tabela devem compartilhar uma borda.
Se você quiser que as células compartilhem uma borda, adicione este código ao seu arquivo CSS:
table {
border-collapse: collapse;
}
Ao recarregar a página, as células agora compartilham as bordas.
Caso você queira que as células tenham bordas distintas, adicione este código ao arquivo CSS:
table {
border-collapse: separate;
}
A página será exibida da seguinte forma:
#3. Espaçamento de Borda
Através da propriedade ‘border-spacing’, 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 utilizar a propriedade ‘border-collapse: separate’.
Nossa classe ‘table’ pode ser definida da seguinte forma:
table {
border-collapse: separate;
border-spacing: 3px;
}
As bordas das células agora têm um espaço de 3px.
Ao carregar a tabela, ela será exibida assim:
#4. Layout da Tabela
A propriedade ‘table-layout’ determina a natureza da tabela. Você pode ter tabelas que sempre têm a mesma largura ou tabelas que se adaptam com base no conteúdo.
Para que as células tenham tamanhos semelhantes, podemos definir a propriedade ‘table-layout’ como ‘fixed’.
table-layout: fixed;
O código final na classe ‘table’ será:
table {
border-collapse: collapse;
border-spacing: 3px;
table-layout: fixed;
}
Se quisermos que as células se adaptem ao conteúdo, podemos alterar a propriedade ‘table-layout’ para ‘auto’.
table-layout: auto;
A classe ‘table’ final em nosso código CSS será:
Observe a última célula da tabela, onde adicionei as palavras “MailChimp e muito mais”.
Agora você pode ver que as células da última linha são maiores que as demais, pois o layout da tabela é flexível e se adapta ao conteúdo.
O estilo abordado até agora se concentrou na tabela como um todo. Agora, podemos personalizar classes individuais, alterando cor de fundo, fonte e propriedades de alinhamento de texto para linhas, células ou cabeçalhos.
Podemos personalizar essas propriedades da seguinte forma:
#5. Cor de Fundo
Podemos alterar a cor de fundo da primeira linha para verde-amarelado. Para isso, utilizaremos o seletor de pseudoclasse ‘:first-child’.
Adicione este código ao seu arquivo CSS:
tr:first-child {
background-color: yellowgreen;
}
O resultado final será:
#6. Fonte
Podemos alterar o estilo ou tamanho da fonte de linhas, colunas ou células específicas da tabela.
Vamos direcionar o conteúdo da última coluna da nossa página (“Empresas que Utilizam”) para alterar o estilo da fonte.
Colocaremos em itálico todo o conteúdo dessa coluna, utilizando 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:
Podemos também mudar a cor e o tamanho da fonte da primeira coluna para personalizá-la.
Adicione o seguinte código ao seu arquivo CSS:
tr td:first-child {
color: red;
font-size: x-large;
font-weight: bolder;
}
Ao carregar a página, você notará que o conteúdo da primeira coluna (“Linguagem”) tem um tamanho de fonte maior, está em vermelho e em negrito.
Como Tornar a Tabela Responsiva
A tabela que criamos pode não ser responsiva em telas menores. Você pode usar as ferramentas de desenvolvedor do Chrome ou alguma ferramenta externa para testar a responsividade do seu código.
Existem diversas abordagens que você pode adotar, mas abordarei apenas uma.
Siga estes passos:
- Defina a largura do elemento
<table>em seu código:
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
- Defina a quebra de palavra em
<td>e<th>para que as palavras longas caibam nas células.
th, td {
border: 2px solid orange;
word-break: break-word;
}
Práticas Recomendadas para Estilizar Tabelas
CSS pode ser divertido, especialmente quando você o domina. Estas são algumas das práticas recomendadas para obter os melhores resultados ao estilizar suas tabelas:
- Use uma folha de estilo externa: Optamos por utilizar uma folha externa, o que nos permite reutilizar o estilo em diferentes tabelas, reduzindo o tempo de desenvolvimento.
- Mantenha a simplicidade: É fácil se deixar levar e exagerar no estilo das tabelas. Entretanto, mantenha sempre um design simples, com tabelas fáceis de ler e escanear.
- Adicione bordas às tabelas: As bordas facilitam a leitura e a identificação dos dados.
- Use cores consistentes: Se você tiver várias tabelas em suas páginas web, certifique-se de usar cores e fontes consistentes. Usar as cores da sua marca pode melhorar sua visibilidade.
- Torne suas tabelas responsivas: Você nunca sabe o tamanho da tela dos dispositivos dos usuários finais.
- Utilize legendas para descrever suas tabelas: A legenda descreve brevemente o conteúdo da tabela.
- Use espaços em branco para separar as tabelas: Se várias tabelas forem exibidas em sequência, adicione espaço em branco e coloque legendas adequadamente.
Conclusão
Espero que você agora consiga criar e estilizar tabelas HTML básicas. Não abordamos tudo, já que HTML e CSS são extensos. Você pode criar tabelas menores ou maiores, dependendo dos dados que você precisa exibir.
Para aprofundar seus conhecimentos em CSS e aprender como utilizá-lo para aprimorar sua interface de usuário, consulte as folhas de dicas de CSS.