A construção de tabelas em HTML é uma habilidade fundamental para quem desenvolve páginas web. As tabelas permitem organizar dados de forma tabular, tornando mais fácil para os usuários entenderem e navegarem pelas informações apresentadas. Neste contexto, compreender os fundamentos do HTML é essencial para criar tabelas eficientes e visualmente atraentes.
Em HTML, as tabelas são construídas utilizando a tag
, que envolve todo o conteúdo da tabela. Dentro da tag
, são utilizadas outras tags para definir os diferentes elementos da tabela, como linhas e células.
A estrutura básica de uma tabela HTML inclui as seguintes tags principais:
: Define a tabela como um todo.
: Define uma linha na tabela.
: Define uma célula de dados na tabela.
| : Define uma célula de cabeçalho na tabela.
Aqui está um exemplo simples de uma tabela HTML que contém três linhas e três colunas:
<table>
<tr>
<th>Coluna 1th>
<th>Coluna 2th>
<th>Coluna 3th>
tr>
<tr>
<td>Dado 1td>
<td>Dado 2td>
<td>Dado 3td>
tr>
<tr>
<td>Dado 4td>
<td>Dado 5td>
<td>Dado 6td>
tr>
table>
Neste exemplo,
| é utilizado para as células de cabeçalho, enquanto
é utilizado para as células de dados. A tag
define cada linha da tabela. Note que o número de células em cada linha deve corresponder ao número de células na primeira linha, que é considerada a linha de cabeçalho.
Além disso, é possível estilizar e formatar tabelas utilizando CSS. Isso inclui ajustar o espaçamento entre células, alterar cores e fontes, e adicionar bordas e sombras para melhorar a aparência da tabela.
Aqui está um exemplo básico de como aplicar algumas propriedades CSS a uma tabela:
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
style>
<table>
<tr>
<th>Nometh>
<th>Sobrenometh>
<th>Idadeth>
tr>
<tr>
<td>Joãotd>
<td>Silvatd>
<td>30td>
tr>
<tr>
<td>Mariatd>
<td>Santostd>
<td>25td>
tr>
table>
Neste exemplo, as propriedades CSS são aplicadas dentro de uma tag
| | |
