Tabelas em HTML
Aprenda a criar tabelas em HTML usando <table>, <tr>, <td>, e <th>. Veja exemplos de tabelas com cabeçalhos e dados e descubra como estruturar e estilizar suas tabelas para obter a melhor apresentação.
Criando Tabelas em HTML
As tabelas são essenciais para organizar dados de forma clara e estruturada em páginas web. Em HTML, a criação de tabelas envolve o uso de várias tags específicas, como <table>, <tr>, <td>, e <th>. Neste post, vamos explorar como criar tabelas, adicionar cabeçalhos e dados, e fornecer exemplos práticos para ajudá-lo a dominar o uso de tabelas em HTML.
Estrutura Básica de uma Tabela
A estrutura básica de uma tabela HTML inclui as tags <table> para definir a tabela, <tr> para definir as linhas da tabela, <td> para definir as células de dados e <th> para definir as células de cabeçalho.
Exemplo Básico
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
<th>Cidade</th>
</tr>
<tr>
<td>João</td>
<td>30</td>
<td>São Paulo</td>
</tr>
<tr>
<td>Maria</td>
<td>25</td>
<td>Rio de Janeiro</td>
</tr>
<tr>
<td>Ana</td>
<td>35</td>
<td>Belo Horizonte</td>
</tr>
</table>
Descrição das Tags
-
<table>: Define o início e o fim de uma tabela. -
<tr>: Define uma linha na tabela. -
<td>: Define uma célula de dados na tabela. -
<th>: Define uma célula de cabeçalho na tabela, que geralmente aparece em negrito e centralizado.
Adicionando Cabeçalhos
Os cabeçalhos das tabelas são importantes para descrever o conteúdo das colunas e facilitar a leitura dos dados. Você pode adicionar cabeçalhos usando a tag <th> dentro da tag <tr> da primeira linha.
Exemplo com Cabeçalhos
<table>
<tr>
<th>Produto</th>
<th>Preço</th>
<th>Quantidade</th>
</tr>
<tr>
<td>Notebook</td>
<td>R$ 3.000,00</td>
<td>10</td>
</tr>
<tr>
<td>Smartphone</td>
<td>R$ 1.500,00</td>
<td>20</td>
</tr>
<tr>
<td>Tablet</td>
<td>R$ 800,00</td>
<td>15</td>
</tr>
</table>
Estilizando Tabelas
A estilização das tabelas pode ser feita usando CSS para melhorar a aparência e a legibilidade. Aqui está um exemplo de como adicionar CSS básico para estilizar uma tabela:
Exemplo com CSS
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
th {
background-color: #f2f2f2;
text-align: left;
}
</style>
<table>
<tr>
<th>Produto</th>
<th>Preço</th>
<th>Quantidade</th>
</tr>
<tr>
<td>Notebook</td>
<td>R$ 3.000,00</td>
<td>10</td>
</tr>
<tr>
<td>Smartphone</td>
<td>R$ 1.500,00</td>
<td>20</td>
</tr>
<tr>
<td>Tablet</td>
<td>R$ 800,00</td>
<td>15</td>
</tr>
</table>
Mesclando Células
Às vezes, é necessário mesclar células para criar cabeçalhos ou células que ocupem várias colunas ou linhas. Isso pode ser feito usando os atributos colspan e rowspan.
Exemplo de Células Mescladas
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
<th>Cidade</th>
</tr>
<tr>
<td rowspan="2">João</td>
<td>30</td>
<td>São Paulo</td>
</tr>
<tr>
<td>31</td>
<td>Campinas</td>
</tr>
<tr>
<td>Maria</td>
<td colspan="2">Rio de Janeiro</td>
</tr>
</table>
Melhorando a Acessibilidade
Para melhorar a acessibilidade das tabelas, você pode usar atributos adicionais, como scope, que ajuda leitores de tela a entender a relação entre cabeçalhos e células de dados.
Exemplo com Acessibilidade
<table>
<tr>
<th scope="col">Produto</th>
<th scope="col">Preço</th>
<th scope="col">Quantidade</th>
</tr>
<tr>
<td>Notebook</td>
<td>R$ 3.000,00</td>
<td>10</td>
</tr>
<tr>
<td>Smartphone</td>
<td>R$ 1.500,00</td>
<td>20</td>
</tr>
<tr>
<td>Tablet</td>
<td>R$ 800,00</td>
<td>15</td>
</tr>
</table>
Conclusão
Criar tabelas em HTML é uma habilidade essencial para desenvolver páginas web organizadas e informativas. Com a combinação das tags <table>, <tr>, <td>, e <th>, você pode criar tabelas claras e bem estruturadas. Adicionar estilos CSS e usar atributos de acessibilidade garante que suas tabelas não apenas fiquem bonitas, mas também sejam funcionais para todos os usuários. Experimente os exemplos fornecidos e comece a criar suas próprias tabelas em HTML.
💡 Gostou do conteúdo?
✅ Apoie-nos: Siga, Curta, Comente e Compartilhe!
📲 Conecte-se com o WebMundi:
▶️ YouTube
▶️ Facebook
▶️ Instagram
▶️ LinkedIn
▶️ TikTok
👥 Participe do nosso Discord para tirar dúvidas e ajudar outras pessoas!
