Mesclando Linhas e Colunas

Em HTML, você pode fazer com que as células da tabela se estendam por várias linhas ou colunas usando os atributos rowspan e colspan. Esses atributos permitem criar layouts de tabela mais complexos mesclando as 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" se estende por duas colunas. Isso é útil para criar um cabeçalho que abrange várias colunas. É assim que ele 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ê deseja expandir.

Veja 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 de acordo para acomodar as células mescladas.