Como Mesclar Células de Tabela HTML

Como mesclar células de tabelas HTML

Use o tutorial abaixo e seus problemas acabaram!

Aprenda a mesclar célula em tabelas HTML

Veja a tabela padrão abaixo:

Exemplo de mescla em tabelas usando COLSPAN

Tabela de Produtos

Tabela de Produtos	Tabela de Produtos	Tabela de Produtos
Categoria	Produto	Preço
Eletrodomésticos	Geladeira	R$ 1.200
Eletrodomésticos	Liquidificador	R$ 200
Eletrodomésticos	Batedeira	R$ 180

MESCLANDO CÉLULAS NA HORIZONTAL (COLSPAN)

Para mesclar células de colunas na horizontal, ou seja, mesclar células de colunas com os mesmos conteúdos na mesma linha, inserimos um parâmetro da tag <td> chamado colspan.

Então repare com atenção o conteúdo das colunas que serão mescladas na mesma linha.

<h4>Tabela de Produtos</h4>
<table>
<tbody>
<tr>
<th colspan="3">Tabela de Produtos</th>
</tr>
<tr>
<td>Categoria</td>
<td>Produto</td>
<td>Preço</td>
</tr>
<tr>
<td>Eletrodomésticos</td>
<td>Geladeira</td>
<td>R$ 1.200</td>
</tr>
<tr>
<td>Eletrodomésticos</td>
<td>Liquidificador</td>
<td>R$ 200</td>
</tr>
<tr>
<td>Eletrodomésticos</td>
<td>Batedeira</td>
<td>R$ 180</td>
</tr>
</tbody>
</table>

Usando COLSPAN

Portanto, veja o atributo colspan em funcionamento onde se encontra a palavra “Tabela de Produtos”.

Tabela de Produtos
Categoria	Produto	Preço
Eletrodomésticos	Geladeira	R$ 1.200
Eletrodomésticos	Liquidificador	R$ 200
Eletrodomésticos	Batedeira	R$ 180

MESCLANDO CÉLULAS NA VERTICAL (ROWSPAN)

Portanto, no mesmo exemplo onde se repetem as células Eletrodomésticos, por exemplo, vamos mesclar as linhas dentro da mesma coluna usamos dentro da tag <td> o parâmetro rowspan.

Então repare com atenção as linhas que serão mescladas numa mesma coluna.

<h4>Tabela de Produtos</h4>
<table>
<tbody>
<tr>
<th colspan="3">Tabela de Produtos</th>
</tr>
<tr>
<td>Categoria</td>
<td>Produto</td>
<td>Preço</td>
</tr>
<tr>
<td rowspan="3">Eletrodomésticos</td>
<td>Geladeira</td>
<td>R$ 1.000</td>
</tr>
<tr>
<td>Liquidificador</td>
<td>R$ 200</td>
</tr>
<tr>
<td>Batedeira</td>
<td>R$ 180</td>
</tr>
</tbody>
</table>

Uso de ROWSPAN

Portanto, veja o atributo rowspan em funcionamento onde se encontra a palavra “Eletrodomésticos”.

Tabela de Produtos
Categoria	Produto	Preço
Eletrodomésticos	Geladeira	R$ 1.000
	Liquidificador	R$ 200
	Batedeira	R$ 180

Aliás, espero que tenha gostado de aprender Como Mesclar Células de Tabela HTML.

Certamente esses websites também podem te interessar:

Origamania.com – Origamis, papel modelismo, artesanatos e aviões de papel.
Textículos.com – Significados de Nomes, frases famosas, ferramenta de textos e letras diferentes, e muito mais.
Portal do Economaster – Economia e Finanças de um jeito fácil de entender.
Cardápio de Receitas – Receitas de dar água na boca. Tudo o que você precisa pra fazer uma boa receita.

Por fim, veja mais conteúdos do Web-ZoneWare, seu site de tecnologia na web a fim de encontrar o que precisa.