Mesclando células com rowspan e colspan
Ao criar tabelas em HTML, às vezes é necessário mesclar células para organizar o conteúdo de forma mais eficiente e esteticamente agradável.
Isso pode ser feito utilizando os atributos rowspan e colspan. A fim de que você compreenda como esses atributos funcionam, explicaremos o conceito de forma simples.
O atributo rowspan é utilizado para mesclar células verticalmente, ou seja, ele permite que uma célula ocupe mais de uma linha.
Por exemplo, se tivermos uma tabela com duas colunas e queremos que uma célula da primeira coluna ocupe duas linhas, utilizamos o atributo rowspan="2".
O atributo colspan, por sua vez, é usado para mesclar células horizontalmente, permitindo que uma célula ocupe mais de uma coluna.
Por exemplo, se tivermos uma tabela com duas linhas e desejamos que uma célula da primeira linha ocupe duas colunas, utilizamos o atributo colspan="2".
Exemplo de código demonstrando como mesclar células com rowspan e colspan:
<!DOCTYPE html>
<html>
<head>
<title>Tabela com Células Mescladas</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="2">Nome</th>
<th colspan="2">Informações</th>
</tr>
<tr>
<th>Idade</th>
<th>Profissão</th>
</tr>
<tr>
<td>João</td>
<td>25</td>
<td>Engenheiro</td>
</tr>
<tr>
<td>Maria</td>
<td>30</td>
<td>Advogada</td>
</tr>
</table>
</body>
</html>
Neste exemplo, utilizamos o rowspan="2" para mesclar a primeira célula da primeira coluna em duas linhas, e o colspan="2" para mesclar as duas células da segunda linha em duas colunas.
O resultado é uma tabela mais organizada e visualmente mais agradável.
Em resumo, os atributos rowspan e colspan são usados para mesclar células verticalmente e horizontalmente, respectivamente.
Com o conhecimento desses atributos, você pode criar tabelas mais complexas e bem estruturadas em suas páginas web, permitindo uma melhor apresentação dos dados.
