[RESOLVIDO] HTML - Problema com tabela

Front-end
, ,
#1

Olá, pessoas!

Comecei a mexer com html há uns dias e hoje me deparei com um problema. Estou tentando criar uma tabela, mas estou fazendo algo de errado na hora de mesclar algumas células. Por favor uma luz! Abaixo deixo uma imagem exemplificando o que estou tentando fazer e o meu código.

tabela
tabela.png696×189 2.47 KB 

<style>tr, th, td{border:solid 1px;}</style>
<table>
	<thead>
		<tr>
			<td>Linha 1 - Coluna 1</td>
			<td>Linha 1 - Coluna 2</td>
			<td>Linha 1 - Coluna 3</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Linha 2 - Coluna 1</td>
			<td>Linha 2 - Coluna 2</td>
			<td>Linha 2 - Coluna 3</td>
		</tr>
		<tr>
			<td rowspan="2">Linha 3 e 4 - Coluna 1</td>
			<td>Linha 3 - Coluna 2</td>
			<td rowspan="2">Linha 3 e 4 - Coluna 3</td>
		</tr>
		<tr>
			<td rowspan="2">Linha 4 e 5 - Coluna 2</td>
		</tr>
		<tr>
			<td>Linha 5 - Coluna 1</td>
			<td>Linha 5 - Coluna 3</td>
		</tr>
		<tr>
			<td>Linha 6 - Coluna 1</td>
			<td>Linha 6 - Coluna 2</td>
			<td>Linha 6 - Coluna 3</td>
		</tr>
	</tbody>
</table>
#2

Olá M4roto,

Quando criamos uma célula com rowspan de 2, não precisamos definir a célula correspondente na próxima fileira, caso defina um rowspan de 3, você não terá que definir as células correspondentes nas próximas duas fileiras.

Veja seu código da tabela anterior, aonde as células correspondentes não precisam ser definidas se encontram comentadas.

<html>
<head>
</head>
<body>
<style>tr, th, td{border:solid 1px;}</style>
<table>
<thead>
  <tr>
    <td>Linha 1 - Coluna 1</td>
    <td>Linha 1 - Coluna 2</td>
    <td>Linha 1 - Coluna 3</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td rowspan="2">Linha 2 - Coluna 1</td>
    <td>Linha 2 - Coluna 2</td>
    <td rowspan="2">Linha 2 - Coluna 3</td>
  </tr>
  <tr>
    <td>Linha 3 - Coluna 1</td>
    <!--<td>Linha 3 - Coluna 2</td>-->
    <!--<td>Linha 3 - Coluna 3</td>-->
  </tr>
  <tr>
    <td>Linha 4 - Coluna 1</td>
    <td rowspan="2">Linha 4 - Coluna 2</td>
    <td>Linha 4 - Coluna 3</td>
  </tr>
  <tr>
    <td>Linha 5 - Coluna 1</td>
    <td>Linha 5 - Coluna 2</td>
    <!--<td>Linha 5 - Coluna 3</td>-->
  </tr>
  <tr>
    <td>Linha 6 - Coluna 1</td>
    <td>Linha 6 - Coluna 2</td>
    <td>Linha 6 - Coluna 3</td>
  </tr>
</tbody>
</table>
</body>
</html>

Espero ter ajudado.:grinning:

1 curtida