Mesclando Linhas e Colunas

Em HTML, você pode fazer com que as células de uma tabela ocupem várias linhas ou colunas usando os atributos rowspan e colspan. Esses atributos permitem criar layouts de tabela mais complexos mesclando 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ê quer 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" ocupa duas colunas. Isso é útil para criar um cabeçalho que abrange várias colunas. Veja como fica:

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ê quer 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 colspan e rowspan na mesma tabela para criar layouts complexos. Lembre-se apenas de ajustar o número de células em cada linha para acomodar as células mescladas.