# Como estilizar tabelas em HTML
Estilizar tabelas HTML significa configurá-las graficamente, para que sejam exibidas com a formatação correta por sites da internet. Para isso, use instruções de CSS, incorporando-as diretamente no documento HTML ou fazendo referências a arquivos CSS externos.
## Por que estilizar tabelas HTML?
A linguagem CSS oferece a possibilidade de estilizar [tabelas HTML](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/table-html/). Ela permite que você modifique **a aparência dos elementos tabulares** de forma quase ilimitada. Você pode definir cores de fundo específicas para as células ou ajustar a espessura das bordas, por exemplo. Existem três formas de incorporar o código CSS próprio para estilizar uma tabela em um documento HTML:
- **Incorporação na seção ``:** Os estilos CSS desejados são inseridos diretamente na seção `` de um documento HTML com a tag HTML <style>.
- **Arquivo CSS externo:** Outra opção é utilizar um arquivo CSS separado, que pode ser referenciado no documento HTML por meio da tag `` no cabeçalho ``.
- **CSS inline:** Você também pode formatar tabelas HTML diretamente no elemento da tabela, aplicando o atributo `style`. No entanto, essa abordagem é recomendada apenas em casos específicos, nos quais a reutilização e a manutenção do código não são prioritárias.
Dica Nosso artigo sobre [CSS em HTML](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/design-de-sites/como-incluir-css-no-html/) ensina como incluir a linguagem de estilo em documentos HTML.
## Opções de estilo de tabelas HTML
Há uma ampla variedade de propriedades CSS que podem ser usadas para melhorar a aparência e a usabilidade de tabelas em documentos web. **Propriedades básicas de tabelas** podem ser configuradas com as seguintes instruções CSS:
- `width`: Define a largura da tabela ou de colunas específicas
- `border`: Determina a largura, o estilo e a cor das bordas
- `border-collapse`: Determina se as bordas das células serão combinadas (`collapse`) ou separadas (`separate`)
- `border-spacing`: Define o espaçamento entre células quando `border-collapse: separate` é utilizado
A seguir, apresentamos algumas das principais opções para estilizar tabelas HTML. Organizamos os comandos por categorias.
### Espaçamento entre células e alinhamento de texto
Propriedade CSS
Descrição
`padding`
Adiciona espaço dentro das células.
`margin`
Adiciona espaço ao redor de toda a tabela.
`text-align`
Define o alinhamento horizontal do texto dentro das células (`left`, `center`, `right`).
`vertical-align`
Define o alinhamento vertical do conteúdo das células (`top`, `middle`, `bottom`).
### Cores e imagem de fundo
Propriedade CSS
Descrição
`background-color`
Define a cor de fundo das células, linhas ou de toda a tabela.
`color`
Define a cor do texto.
`background-image`
Define uma imagem de fundo para células ou para toda a tabela.
### Fontes e tamanho do texto
Propriedade CSS
Descrição
`font-family`
Define a fonte do texto.
`font-size`
Define o tamanho da fonte.
`font-weight`
Define a espessura da fonte (por exemplo, `bold` para texto em negrito).
`text-transform`
Controla o uso de maiúsculas e minúsculas no texto (`uppercase`, `lowercase`, `capitalize`).
### Bordas da tabela
Propriedade CSS
Descrição
`border-style`
Define o estilo da borda (`solid`, `dashed`, `dotted`).
`border-width`
Define a espessura da borda.
`border-color`
Define a cor da borda da tabela.
## Exemplos de formatação de tabelas HTML
Destacamos, agora, **sintaxe e funcionalidade** das três opções possíveis para estilizar tabelas HTML, apresentando exemplos práticos. Também abordamos brevemente as **vantagens e desvantagens** de cada abordagem.
### Formatar tabelas HTML na seção ``
A estilização de tabelas inserindo a linguagem CSS no cabeçalho é especialmente útil para **projetos pequenos** e **alterações rápidas**. Não é necessário um arquivo de estilo adicional e você pode usar IDs para definir quais tabelas serão afetadas pelas instruções. No entanto, esses estilos só se aplicam à página em que foram definidos, o que pode dificultar a reutilização e a manutenção do código.
Você pode incluir o código CSS desejado no cabeçalho do documento usando o elemento <style>. No exemplo abaixo, definimos que o cabeçalho da tabela terá um fundo verde, enquanto as linhas subsequentes alternarão entre fundo cinza claro e branco:
```html
Coluna 1
Coluna 2
Coluna 3
Coluna 4
Entrada 1
Entrada 2
Entrada 3
Entrada 4
Entrada 5
Entrada 6
Entrada 7
Entrada 8
Entrada 9
Entrada 10
Entrada 11
Entrada 12
Entrada 13
Entrada 14
Entrada 15
Entrada 16
hash_ff813eb4bae29b90e63b2749893def837b87fe38
```
[](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/exemplo-formatar-tabela-html.png) A tabela de exemplo com formatação simples mostra a linha de cabeçalho colorida desejada e as cores das linhas que mudam posteriormente. ### Formatar tabela HTML via folha de estilo CSS
A estilização de tabelas HTML via CSS externo oferece a melhor maneira de separar o conteúdo do design. Além disso, as instruções são especialmente fáceis de reutilizar em outras páginas. Como os navegadores podem armazenar em cache o arquivo CSS, isso também ajuda a **otimizar o tempo de carregamento**. Para projetos web menores, essa opção pode ser um pouco mais trabalhosa.
O exemplo utilizado anteriormente pode ser implementado aqui em duas etapas: primeiro, você cria um arquivo CSS chamado `styles.css`, colocado no mesmo diretório do arquivo HTML no qual o site está localizado, e insere o seguinte código:
```css
thead th {
background-color: #4CAF50; / *Verde para o cabeçalho da tabela* /
}
tbody tr:nth-child(odd) {
background-color: #f2f2f2; / *Fundo cinza claro para linhas ímpares* /
}
tbody tr:nth-child(even) {
background-color: #ffffff; / *Fundo branco para linhas pares* /
}
```
No segundo passo, você deve incluir o arquivo no cabeçalho utilizando um elemento <link>. O código subsequente da tabela permanece o mesmo:
```html
…
```
### Formatar tabela HTML com CSS inline
O CSS inline é uma opção prática quando você deseja fazer **ajustes específicos** em um único elemento da tabela. Para projetos pequenos ou testes pontuais, onde a reutilização do código não é importante, essa opção é bastante útil. No entanto, para cenários de código mais duradouros, é recomendável utilizar uma das duas outras formas de inclusão.
O estilo inline é feito diretamente nos elementos da tabela. Para o nosso exemplo, o código seria assim:
```html
Coluna 1
Coluna 2
Coluna 3
Coluna 4
Entrada 1
Entrada 2
Entrada 3
Entrada 4
Entrada 5
Entrada 6
Entrada 7
Entrada 8
Entrada 9
Entrada 10
Entrada 11
Entrada 12
Entrada 13
Entrada 14
Entrada 15
Entrada 16
hash_ff813eb4bae29b90e63b2749893def837b87fe38
```
This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/estilizar-tabela-html/](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/estilizar-tabela-html/) for AI/LLM consumption.