Mesclando Linhas e Colunas

No HTML, você pode fazer com que as células da tabela ocupem várias linhas ou colunas usando os atributos rowspan e colspan. Esses atributos permitem criar layouts de tabela mais complexos ao mesclar células.

O atributo colspan é usado para especificar o número de colunas que uma célula deve abranger. Ele é adicionado à tag <td> ou <th> da célula que você deseja expandir.

Aqui está um exemplo de como usar colspan:

<table border="1">
	<tr>
		<th colspan="2">Name</th>
	</tr>
	<tr>
		<td>John</td>
		<td>Doe</td>
	</tr>
</table>

Neste exemplo, a célula de cabeçalho com o texto "Name" abrange duas colunas. Isso é útil para criar um cabeçalho que cubra várias colunas. É assim que se parece:

O atributo rowspan é usado para especificar o número de linhas que uma célula deve abranger. Ele também é adicionado à tag <td> ou <th> da célula que você deseja expandir.

Aqui está um exemplo de como usar rowspan:

<table border="1">
  <tr>
    <th>Employee</th>
    <th>Shift</th>
  </tr>
  <tr>
    <td rowspan="2">Alex</td>
    <td>Morning</td>
  </tr>
  <tr>
    <td>Evening</td>
  </tr>
</table>

Aqui, rowspan é usado para mostrar que Alex trabalha nos turnos da manhã e da noite sem repetir o nome. 

Você pode usar tanto colspan quanto rowspan na mesma tabela para criar layouts complexos. Apenas lembre-se de ajustar o número de células em cada linha adequadamente para acomodar as células expandidas.