Uma tabela de dados com muitas células próximas umas das outras pode parecer abarrotada. Algumas pessoas não se importam com esse tipo de apresentação de dados, enquanto outras preferem saber como mesclar células em HTML.
Ao mesclar células em uma tabela, pode-se apresentar muitos dados em uma célula grande. Esse processo geralmente resulta em uma célula grande sendo exibida horizontalmente, verticalmente ou ambas em muitas linhas ou colunas.
Quando as células de uma tabela abrangem várias linhas, isso é chamado de "abrangendo linhas".
Isso é principalmente para fins de apresentação ou relatório para tornar uma planilha visualmente atraente. Este artigo discute como mesclar células em HTML e o ambiente de trabalho do WordPress.
Como mesclar células de tabela em HTML
O atributo colspan pode fundir várias células de tabela em uma coluna em um
Tag HTML (dados da tabela). Ao mesclar várias células de linha, pode-se usar o atributo rowspan. Ambos os atributos estarão no
marcação.
Os exemplos a seguir mostram como usar esses atributos em HTML e como eles aparecem no navegador.
Como usar o atributo Rowspan
Esse atributo determina quantas linhas uma célula mesclada deve abranger verticalmente. Ele pode criar uma grande célula vertical a partir de duas ou mais células que ocupam a mesma coluna e exibi-la em várias linhas.
Por exemplo, o código
mescla duas células para criar uma célula grande posicionada verticalmente.
Um exemplo de código de tabela HTML que usa o atributo Rowspan
O código a seguir se origina de uma tabela com três colunas e três linhas. Pode-se usar o atributo rowspan="2″ no primeiro
tag para criar uma única célula das duas primeiras células da primeira coluna.
O número no atributo rowspan determina o número de células usadas para o
marcação.
Veja a seguir um exemplo de código de tabela HTML com uma célula que se estende por duas linhas. Para entender melhor como esse código funciona, sinta-se à vontade para criar uma renderização visual em um navegador.
<table>
A renderização desse código em um navegador criará uma tabela com uma célula grande que abrange a altura de duas linhas. Alterar o valor de rowspan para 3 fará com que a primeira célula ocupe a altura de todas as três linhas.
Ao expandir um
linha certifique-se de excluir
tags das outras linhas da tabela (
). Quando a primeira célula abrange todas as três linhas, existem apenas duas
tags nos outros dois
Tag.
Como usar o atributo Colspan
Esse atributo determina quantas colunas uma célula mesclada abrangerá horizontalmente. Ele cria uma grande célula horizontal a partir de duas ou mais células que ocupam a mesma linha e a posiciona em várias colunas.
Essencialmente, o atributo colspan define o número de colunas exibidas em uma linha grande. Por exemplo, o código HTML
irá mesclar duas células e criar uma grande célula horizontal.
Dois exemplos de código de tabela HTML que usam o atributo Colspan
O código a seguir é uma tabela HTML com uma célula grande que se estende por duas colunas. Para entender melhor como esse código funciona, sinta-se à vontade para criar uma renderização visual em um navegador.
<table>
A renderização desse código em um navegador criará uma tabela com uma célula grande que abrange a largura de duas colunas. Alterar o valor do atributo colspan para 3 fará com que a primeira célula ocupe a largura de todas as três colunas.
Quando todas as 3 colunas são cruzadas, deve haver apenas uma
na linha da tabela (
). Portanto, certifique-se de remover qualquer
tags ao expandir um
coluna.
Aqui está outro exemplo de uma tabela HTML com uma célula que se estende por duas colunas. Para entender melhor o código, crie uma renderização visual no seu navegador através do bloco de notas do seu computador.
<table>Como usar “0” (zero) nos atributos Rowspan e Colspan
Quando usado no colspan e rowspan em um navegador moderno, “0” representa a maioria das colunas ou linhas. Por exemplo, pode-se usar rowspan=”0″ para estender uma linha até o final de uma tabela em vez de contar as linhas da tabela.
Quais são as melhores tabelas para usar zero? O número zero é especialmente adequado para tabelas dinâmicas. Também é ideal para tabelas grandes com números de colunas e linhas que mudam frequentemente.
Como mesclar células de tabela no WordPress usando o plug-in wpDataTables
Você pode usar HTML para criar tabelas por meio da caixa de texto ou instalar plug-ins que forneçam opções de tabela em seu campo de texto visual. Essas opções funcionam facilmente para tabelas simples, mas tornam-se difíceis ao trabalhar com tabelas maiores.
O plugin wpDataTables do WordPress é perfeito para mesclar células em tabelas maiores. Também é ótimo para criar, personalizar e editar esses tipos de tabelas.
Mesclar células é simples com wpDataTables. Isso pode ser feito usando o modo de gerenciamento de células baixando o plugin e ativando-o. Mesmo sem experiência com plugins do WordPress, instalar o wpDataTables é fácil para qualquer um.
Usando o plug-in wpDataTables
Ao criar uma tabela, selecione a primeira opção da lista e clique em “Avançar”. Crie um nome para sua tabela de dados e escolha o número de linhas e colunas desejadas. Clique em “Gerar tabela” para exibir uma nova tabela vazia.
Você pode selecionar um dos 17 formatos de data para as colunas de data e seletores de data interativos.
O plugin wpDataTables também apresenta skins integradas para personalizar o visual do front-end da tabela. Essas peles incluem:
- Escuro
- Leve
- Água
- Material
- Grafite
- Roxo
As visualizações de como a tabela ficará em tablets, desktops e interfaces móveis serão exibidas abaixo da tabela. Após cada edição que você fizer, clique em “Salvar alterações” para ver essas alterações refletidas na visualização.
Acabando com os pensamentos sobre a mesclagem de células em HTML e WordPress
As tabelas simples do WordPress da wpDataTables são ótimas para mesclar, estilizar e adicionar classificações por estrelas às células. Células mescladas em wpDataTables podem mostrar tabelas de linhagem de históricos geracionais para:
- Humanos
- Cães
- Cavalos de corrida, etc
Clique aqui para ver outros exemplos de vários usos do recurso de mesclagem de células nas tabelas do WordPress.
Quando se trata de mesclar células, tanto o HTML quanto o WordPress podem mesclar qualquer número de colunas e linhas em uma tabela. Isso resulta em tabelas de dados de ótima aparência, adequadas para seu profissional, social ou pessoal:
- Apresentações
- Relatórios e muito mais
O plugin WordPress wpDataTables é a escolha ideal para mesclar células vizinhas em uma célula grande. Se você deseja uma solução simples e fácil de usar para mesclar suas células de tabela, wpDataTables é o único. Você não vai se arrepender!
Se você gostou de ler este artigo sobre como mesclar células em HTML, confira este artigo sobre como criar um gráfico de resultados do Google Forms.
Também escrevemos sobre alguns assuntos relacionados, como como criar uma tabela de pesquisa com wpDataTables e Forminator, como projetar uma tabela, como criar uma tabela de mapa de calor com wpDataTables, alternativas de DataTables, bibliotecas de tabelas JavaScript e plugins de tabela de preços do WordPress .