6.1 Elementos table e tr
Tabelas em HTML são usadas para organizar dados em formato tabular. As tags principais utilizadas para criar tabelas incluem <table>, <tr>, e <td>. Vamos dar uma olhada mais de perto em cada uma delas.
<table>
A tag <table> é o contêiner para toda a tabela. Dentro dele, colocam-se as linhas da tabela, cada uma definida com a tag <tr>.
Exemplo de uso:
<table>
<!-- linhas e células da tabela serão adicionadas aqui -->
</table>
Tag <tr> (table row)
A tag <tr> representa uma linha da tabela. Dentro da tag <tr> são colocadas células da tabela, cada uma definida com a tag <td> ou <th>.
Exemplo de uso:
<table>
<tr>
<!-- células da linha serão adicionadas aqui -->
</tr>
</table>
6.2 Elementos td e th
Tag <td> (table data)
A tag <td> é usada para definir uma célula de dados em uma linha da tabela. Essas células contêm dados da tabela e estão localizadas dentro de uma linha, definida pela tag .
Exemplo de uso:
<table>
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
<td>Célula 3</td>
</tr>
</table>
Tag <th> (table head)
A tag <th> é usada para representar as células de cabeçalho da tabela. O texto dentro de <th> é geralmente exibido em negrito e alinhado ao centro.
Exemplo de uso:
<table>
<tr>
<th>Cabeçalho 1</th>
<th>Cabeçalho 2</th>
<th>Cabeçalho 3</th>
</tr>
</table>
Exemplo de tabela:
<table>
<tr>
<th>Nome</th> <th>Idade</th> <th>Cidade</th>
</tr>
<tr>
<td>Ivan</td> <td>30</td> <td>Toronto</td>
</tr>
<tr>
<td>Maria</td> <td>25</td> <td>Frankfurt</td>
</tr>
<tr>
<td>Nina</td> <td>35</td> <td>Paris</td>
</tr>
</table>
6.3 Estilizando tabelas
As tabelas devem ser estilizadas com CSS — isso melhora significativamente a clareza e a legibilidade dos dados.
Por exemplo, você decidiu adicionar uma borda a cada célula: ótima ideia, mas como cada célula tem sua própria borda, agora cada duas células são separadas por uma borda dupla — uma de cada célula. 🤦♂️
Se você quer que a borda fique do jeito que você deseja, precisa juntar as bordas vizinhas com CSS. Para isso existe uma propriedade especial — border-collapse.
Aqui está um exemplo de boa estilização da nossa tabela:
table {
width: 50%; /* Define a largura da tabela */
border-collapse: collapse; /* Remove as bordas duplas entre as células */
}
th, td {
border: 1px solid black; /* Define a borda para as células */
padding: 8px; /* Adiciona espaçamento interno nas células */
text-align: left; /* Alinha o texto à esquerda */
}
th {
background-color: #f2f2f2; /* Define a cor de fundo para os cabeçalhos */
}
Aqui, vemos que:
- Cada célula tem uma borda de 1 pixel de espessura, cor preta
- As bordas duplas entre as células foram removidas
- Cada célula tem espaçamento interno para que o texto não grude nas bordas
- As células de cabeçalho têm uma cor de fundo específica
Lindo!
GO TO FULL VERSION