<table>: Define a tabela.<tr>: Define cada linha (table row). O código acima tem 1<tr>para cabeçalho e 11<tr>para dados.<th>: Define a célula de cabeçalho (table header – negrito e centralizado por padrão).<td>: Define as células de dados (table data).border-collapse: collapse;: Faz com que a tabela tenha apenas uma borda, em vez de bordas duplas para cada célula.
<!DOCTYPE html>
<html lang=”pt-BR”>
<head>
<meta charset=”UTF-8″>
<title>Tabela 3×12</title>
<style>
table {
width: 50%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Tabela com 3 Colunas e 12 Linhas</h2>
<table>
<!– Cabeçalho da tabela –>
<tr>
<th>Coluna 1</th>
<th>Coluna 2</th>
<th>Coluna 3</th>
</tr>
<!– Linhas de dados (11 linhas abaixo + 1 cabeçalho = 12 linhas no total) –>
<tr>
<td>Dado 1.1</td>
<td>Dado 1.2</td>
<td>Dado 1.3</td>
</tr>
<tr>
<td>Dado 2.1</td>
<td>Dado 2.2</td>
<td>Dado 2.3</td>
</tr>
<tr>
<td>Dado 3.1</td>
<td>Dado 3.2</td>
<td>Dado 3.3</td>
</tr>
<tr>
<td>Dado 4.1</td>
<td>Dado 4.2</td>
<td>Dado 4.3</td>
</tr>
<tr>
<td>Dado 5.1</td>
<td>Dado 5.2</td>
<td>Dado 5.3</td>
</tr>
<tr>
<td>Dado 6.1</td>
<td>Dado 6.2</td>
<td>Dado 6.3</td>
</tr>
<tr>
<td>Dado 7.1</td>
<td>Dado 7.2</td>
<td>Dado 7.3</td>
</tr>
<tr>
<td>Dado 8.1</td>
<td>Dado 8.2</td>
<td>Dado 8.3</td>
</tr>
<tr>
<td>Dado 9.1</td>
<td>Dado 9.2</td>
<td>Dado 9.3</td>
</tr>
<tr>
<td>Dado 10.1</td>
<td>Dado 10.2</td>
<td>Dado 10.3</td>
</tr>
<tr>
<td>Dado 11.1</td>
<td>Dado 11.2</td>
<td>Dado 11.3</td>
</tr>
</table>
</body>
</html>
