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.

 

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.


 

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.

Deixe um comentário

20 − 5 =