{"id":228268,"date":"2022-10-07T18:45:00","date_gmt":"2022-10-07T15:45:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228268"},"modified":"2022-11-09T01:36:08","modified_gmt":"2022-11-08T22:36:08","slug":"como-mesclar-celulas-em-html-e-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/como-mesclar-celulas-em-html-e-wordpress\/","title":{"rendered":"Como mesclar c\u00e9lulas em HTML e WordPress"},"content":{"rendered":"\n

Uma tabela de dados com muitas c\u00e9lulas pr\u00f3ximas umas das outras pode parecer abarrotada. Algumas pessoas n\u00e3o se importam com esse tipo de apresenta\u00e7\u00e3o de dados, enquanto outras preferem saber como mesclar c\u00e9lulas em HTML.<\/p>\n

Ao mesclar c\u00e9lulas em uma tabela, pode-se apresentar muitos dados em uma c\u00e9lula grande. Esse processo geralmente resulta em uma c\u00e9lula grande sendo exibida horizontalmente, verticalmente ou ambas em muitas linhas ou colunas.<\/p>\n

Quando as c\u00e9lulas de uma tabela abrangem v\u00e1rias linhas, isso \u00e9 chamado de "abrangendo linhas".<\/p>\n

Isso \u00e9 principalmente para fins de apresenta\u00e7\u00e3o ou relat\u00f3rio para tornar uma planilha visualmente atraente. Este artigo discute como mesclar c\u00e9lulas em HTML e o ambiente de trabalho do WordPress.<\/p>\n

Como mesclar c\u00e9lulas de tabela em HTML<\/h2>\n

O atributo colspan pode fundir v\u00e1rias c\u00e9lulas de tabela em uma coluna em um<\/p>\n

Tag HTML (dados da tabela). Ao mesclar v\u00e1rias c\u00e9lulas de linha, pode-se usar o atributo rowspan. Ambos os atributos estar\u00e3o no<\/p>\n

marca\u00e7\u00e3o.<\/p>\n

Os exemplos a seguir mostram como usar esses atributos em HTML e como eles aparecem no navegador.<\/p>\n

Como usar o atributo Rowspan<\/h3>\n

Esse atributo determina quantas linhas uma c\u00e9lula mesclada deve abranger verticalmente. Ele pode criar uma grande c\u00e9lula vertical<\/strong> a partir de duas ou mais c\u00e9lulas que ocupam a mesma coluna e exibi-la em v\u00e1rias linhas.<\/p>\n

Por exemplo, o c\u00f3digo<\/p>\n

mescla duas c\u00e9lulas para criar uma c\u00e9lula grande posicionada verticalmente.<\/p>\n

Um exemplo de c\u00f3digo de tabela HTML que usa o atributo Rowspan<\/p>\n

O c\u00f3digo a seguir se origina de uma tabela com tr\u00eas colunas e tr\u00eas linhas. Pode-se usar o atributo rowspan="2\u2033 no primeiro<\/p>\n

tag para criar uma \u00fanica c\u00e9lula das duas primeiras c\u00e9lulas da primeira coluna.<\/p>\n

O n\u00famero no atributo rowspan determina o n\u00famero de c\u00e9lulas usadas para o<\/p>\n

marca\u00e7\u00e3o.<\/p>\n

Veja a seguir um exemplo de c\u00f3digo de tabela HTML com uma c\u00e9lula que se estende por duas linhas. Para entender melhor como esse c\u00f3digo funciona, sinta-se \u00e0 vontade para criar uma renderiza\u00e7\u00e3o visual em um navegador.<\/p>\n

<table>\n<\/code><\/pre>\n
\"Como<\/a><\/p>\n
A renderiza\u00e7\u00e3o desse c\u00f3digo em um navegador criar\u00e1 uma tabela com uma c\u00e9lula grande que abrange a altura de duas linhas. Alterar o valor de rowspan para 3 far\u00e1 com que a primeira c\u00e9lula ocupe a altura de todas as tr\u00eas linhas.<\/p>\n
\"Como<\/a><\/p>\n
Ao expandir um<\/p>\n
linha certifique-se de excluir<\/p>\n
tags das outras linhas da tabela (<\/p>\n
). Quando a primeira c\u00e9lula abrange todas as tr\u00eas linhas, existem apenas duas<\/p>\n
tags nos outros dois<\/p>\n
Tag.<\/p>\n
Como usar o atributo Colspan<\/h3>\n
Esse atributo determina quantas colunas uma c\u00e9lula mesclada abranger\u00e1 horizontalmente<\/strong>. Ele cria uma grande c\u00e9lula horizontal a partir de duas ou mais c\u00e9lulas que ocupam a mesma linha e a posiciona em v\u00e1rias colunas.<\/p>\n
Essencialmente, o atributo colspan define o n\u00famero de colunas exibidas em uma linha grande. Por exemplo, o c\u00f3digo HTML<\/p>\n
ir\u00e1 mesclar duas c\u00e9lulas e criar uma grande c\u00e9lula horizontal.<\/p>\n
Dois exemplos de c\u00f3digo de tabela HTML que usam o atributo Colspan<\/p>\n
O c\u00f3digo a seguir \u00e9 uma tabela HTML com uma c\u00e9lula grande que se estende por duas colunas. Para entender melhor como esse c\u00f3digo funciona, sinta-se \u00e0 vontade para criar uma renderiza\u00e7\u00e3o visual em um navegador.<\/p>\n
<table>\n<\/code><\/pre>\n
A renderiza\u00e7\u00e3o desse c\u00f3digo em um navegador criar\u00e1 uma tabela com uma c\u00e9lula grande que abrange a largura de duas colunas. Alterar o valor do atributo colspan para 3 far\u00e1 com que a primeira c\u00e9lula ocupe a largura de todas as tr\u00eas colunas.<\/p>\n
\"Como<\/a><\/p>\n
Quando todas as 3 colunas s\u00e3o cruzadas, deve haver apenas uma<\/p>\n
na linha da tabela (<\/p>\n
). Portanto, certifique-se de remover qualquer<\/p>\n
tags ao expandir um<\/p>\n
coluna.<\/p>\n
\"Como<\/a><\/p>\n
Aqui est\u00e1 outro exemplo de uma tabela HTML com uma c\u00e9lula que se estende por duas colunas. Para entender melhor o c\u00f3digo, crie uma renderiza\u00e7\u00e3o visual no seu navegador atrav\u00e9s do bloco de notas do seu computador.<\/p>\n
<table><\/code><\/pre>\n
Como usar “0” (zero) nos atributos Rowspan e Colspan<\/h3>\n
\"Como<\/a><\/p>\n
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\u2033 para estender uma linha at\u00e9 o final de uma tabela em vez de contar as linhas da tabela.<\/p>\n
Quais s\u00e3o as melhores tabelas para usar zero? O n\u00famero zero \u00e9 especialmente adequado para tabelas din\u00e2micas. Tamb\u00e9m \u00e9 ideal para tabelas grandes com n\u00fameros de colunas e linhas que mudam frequentemente.<\/p>\n
Como mesclar c\u00e9lulas de tabela no WordPress usando o plug-in wpDataTables<\/h2>\n
\"Como<\/a><\/p>\n
Voc\u00ea pode usar HTML para criar tabelas por meio da caixa de texto ou instalar plug-ins que forne\u00e7am op\u00e7\u00f5es de tabela em seu campo de texto visual. Essas op\u00e7\u00f5es funcionam facilmente para tabelas simples, mas tornam-se dif\u00edceis ao trabalhar com tabelas maiores.<\/p>\n
O plugin wpDataTables<\/a> do WordPress \u00e9 perfeito para mesclar c\u00e9lulas em tabelas maiores. Tamb\u00e9m \u00e9 \u00f3timo para criar, personalizar e editar esses tipos de tabelas.<\/p>\n
Mesclar c\u00e9lulas \u00e9 simples com wpDataTables. Isso pode ser feito usando o modo de gerenciamento de c\u00e9lulas baixando o plugin e ativando-o. Mesmo sem experi\u00eancia com plugins do WordPress, instalar o wpDataTables \u00e9 f\u00e1cil para qualquer um.<\/p>\n
Usando o plug-in wpDataTables<\/h3>\n
\"Como<\/a><\/p>\n
Ao criar uma tabela, selecione a primeira op\u00e7\u00e3o da lista e clique em “Avan\u00e7ar”. Crie um nome para sua tabela de dados e escolha o n\u00famero de linhas e colunas desejadas. Clique em “Gerar tabela” para exibir uma nova tabela vazia.<\/p>\n
\"Como<\/a><\/p>\n
Voc\u00ea pode selecionar um dos 17 formatos de data para as colunas de data e seletores de data interativos.<\/p>\n
\"Como<\/a><\/p>\n
O plugin wpDataTables tamb\u00e9m apresenta skins integradas para personalizar o visual do front-end da tabela. Essas peles incluem:<\/p>\n