As tabelas são elementos fundamentais em muitos sites, pois permitem organizar informações de maneira clara e concisa. No entanto, muitas vezes, as tabelas podem parecer desorganizadas e pouco atraentes, o que pode prejudicar a experiência do usuário. Felizmente, o CSS oferece várias opções para estilizar tabelas e torná-las mais atraentes e legíveis.
Para começar, é importante definir algumas propriedades básicas da tabela usando tags HTML. A tag `
` é usada para criar a tabela em si, enquanto a tag `
` é usada para definir cada linha da tabela e a tag `
` é usada para definir cada célula da tabela. Além disso, é possível usar a tag `` para definir o cabeçalho da tabela e a tag `
` para definir o corpo da tabela.
Uma das maneiras mais simples de estilizar uma tabela é usando a propriedade `border`, que define a largura e a cor da borda da tabela e das células. Por exemplo, para definir uma borda preta de 1 pixel para toda a tabela e células, podemos usar o seguinte código CSS:
```css
table, th, td {
border: 1px solid black;
}
```
Além disso, é possível usar a propriedade `padding` para definir o espaço interno das células da tabela. Por exemplo, para definir um espaçamento interno de 10 pixels para todas as células da tabela, podemos usar o seguinte código CSS:
```css
td {
padding: 10px;
}
```
Outra opção interessante é usar a propriedade `background-color` para definir a cor de fundo das células da tabela. Por exemplo, para definir uma cor de fundo cinza claro para todas as células da tabela, podemos usar o seguinte código CSS:
```css
td {
background-color: #f2f2f2;
}
```
Também é possível usar a propriedade `text-align` para alinhar o conteúdo das células da tabela. Por exemplo, para alinhar todo o conteúdo das células à esquerda, podemos usar o seguinte código CSS:
```css
td {
text-align: left;
}
```
Outra opção interessante é usar a propriedade `border-collapse` para definir se as bordas da tabela e das células devem ser mescladas ou separadas. Por exemplo, para mesclar as bordas da tabela e das células, podemos usar o seguinte código CSS:
```css
table {
border-collapse: collapse;
}
```
Por fim, é possível usar a propriedade `font-weight` para definir a espessura da fonte usada nas células da tabela. Por exemplo, para definir uma fonte em negrito para todas as células da tabela, podemos usar o seguinte código CSS:
```css
td {
font-weight: bold;
}
```
Em resumo, estilizar tabelas em CSS pode ser uma tarefa simples e eficaz, desde que sejam usadas as propriedades corretas. Usando as propriedades `border`, `padding`, `background-color`, `text-align`, `border-collapse` e `font-weight`, é possível criar tabelas mais atraentes e legíveis para os usuários.
Agora responda o exercício sobre o conteúdo:
_Qual propriedade do CSS é usada para definir a cor de fundo das células da tabela?
Você acertou! Parabéns, agora siga para a próxima página
