Tutorial de HTML. Mesclando células

Para combinar duas ou mais células em uma, use os atributos colspan e rowspan da tag ... O atributo colspan define o número de células a serem mescladas horizontalmente. O atributo rowspan funciona de maneira semelhante, com a única diferença de que abrange as células verticalmente. Antes de adicionar atributos, verifique o número de células em cada linha para garantir que nenhum erro seja gerado. Então, substitui três células, então deve haver três marcas na próxima linha ou uma construção como ...... ... Se o número de células em cada linha não corresponder, células fantasmas vazias aparecerão. O Exemplo 12.3 mostra, embora válido, mas um código incorreto, no qual um erro semelhante aparece.

Exemplo 12.3. Concatenação de célula inválida

Uso incorreto de colspan

Célula 1		Célula 2
Célula 3	Célula 4

O resultado deste exemplo é mostrado na Fig. 12,5.

Arroz. 12,5. A aparência de uma célula adicional na tabela

A primeira linha do exemplo possui três células, duas delas são concatenadas usando o atributo colspan e a segunda linha adiciona apenas duas células. Isso cria uma célula extra que é exibida no navegador. Isso pode ser visto claramente na Fig. 12,5.

O Exemplo 12-4 demonstra o uso correto dos atributos colspan e rowspan.

Exemplo 12.4. Mesclar células vertical e horizontalmente

Mesclando células

Navegador	6.0	7.0	7.0	8.0	9.0	1.0	2.0
Navegador	Internet Explorer		Ópera			Raposa de fogo
Suportado	Não	sim	Não	sim	sim	sim	sim

O resultado deste exemplo é mostrado na Fig. 12.6.

Arroz. 12.6. Uma tabela com células mescladas

Esta tabela possui oito colunas e três linhas. Algumas das células com as palavras "Internet Explorer", "Opera" e "Firefox" são combinadas onde duas e três células. Mesclagem vertical aplicada na célula denominada "Navegador".

Vou lhe dizer em detalhes e em detalhes como combinar células vertical e horizontalmente em tabelas.

Neste artigo, não explicaremos os princípios da criação de tabelas html; para obter esse conhecimento, faça nosso curso de HTML.

Para combinar células em uma tabela, existem dois atributos dados à tag eles são colspan (junção horizontal) e rowspan (junção vertical).

Algumas pessoas têm dificuldade em usar esses atributos, problemas com a fusão de células.

Os atributos colspan e rowspan aceitam valores inteiros de 0 a 1000 como parâmetros. Aqui está um pequeno exemplo de como você pode combinar células em uma tabela.

À primeira vista, uma estrutura não muito complexa é implementada, mas olhando para a abundância e elementos no código são difíceis de entender por qual princípio você pode combinar mais algumas células.

Oferecemos uma maneira versátil e muito conveniente de combinar células.

Para começar, prepare um espaço em branco de sua futura tabela, apresentando-a com todas as células separadas. Poderia ser uma mesa 3x3, 6x10 etc. Daremos a cada célula seu próprio número, começando a contar da esquerda para a direita e de cima para baixo.

Vamos analisar a criação da tabela mostrada acima usando este método.

Esta é a aparência do código do nosso modelo e do próprio modelo:

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16

Você precisa mesclar células com números 1,2,3 horizontalmente. Para fazer isso, no código, célula número 1, adicione o atributo colspan com o valor 3. E remover elementos com números 2 e 3. Escreva os números das células mescladas na célula resultante.

1,2,3			4
5	6	7	8
9	10	11	12
13	14	15	16

1,2,3			4
5	6	7	8
9	10	11	12
13	14	15	16

Agora precisamos mesclar as células 9 e 13 verticalmente. Realizamos um procedimento semelhante - definimos o atributo rowspan com o valor 2 na célula número 9, excluímos a célula do número 13, escrevemos os números das células das quais ela consiste na célula mesclada.

Isso mudará nosso código e a aparência da tabela:

1,2,3			4
5	6	7	8
9,13	10	11	12
9,13	14	15	16

1,2,3			4
5	6	7	8
9,13	10	11	12
9,13	14	15	16

Resta combinar 11,12,15,16 células em uma. Para fazer isso, na célula nº 11, escreva os atributos colspan = "2" rowspan = "2". Removemos as células 12,15,16 do código. Escrevemos nos números de células combinados 11,12,13,14.

Isso mudará nosso código e a aparência da tabela:

1,2,3			4
5	6	7	8
9,13	10	11,12,15,16
	14

1,2,3			4
5	6	7	8
9,13	10	11,12,15,16
	14

Isso é tudo, conseguimos a tabela original, agora as células podem ser preenchidas com as informações que forem convenientes para você.

Esperamos que você entenda o princípio de criação de tabelas complexas com células concatenadas.

As tabelas HTML têm duas funções. O primeiro são as próprias tabelas, ou seja, a saída de informações em forma de tabela. E o segundo é o layout da página. Partes separadas de conteúdo são colocadas em células diferentes da tabela e, portanto, aparecem no lugar certo na página.

Criação de uma mesa

Vamos dar uma olhada em como criar uma tabela em HTML. Isso é feito usando a tag

... As tabelas são compostas por linhas com células dentro delas. Essas células contêm o conteúdo da tabela. Marcação adiciona uma linha à tabela, e a tag

adiciona uma célula a uma linha. Lembre-se de fechar as tags. Por exemplo, vamos criar uma tabela como esta:

Para que os quadros da mesa sejam visíveis, a tag

o atributo border foi definido, mas o HTML5 desaprova esse atributo e desaprova-o. Além disso, existem outros atributos para trabalhar com frames e alterar o plano de fundo, e as células também possuem atributos para alinhar o conteúdo. Todos esses atributos também foram descontinuados; estilos devem ser usados em seu lugar.

Células da tabela concatenadas

É possível combinar células da tabela em uma. Para fazer isso, a tag

há um atributo colspan que concatena células dentro da mesma linha e um atributo rowspan que concatena células de linhas diferentes. O valor desses atributos é o número de células a serem mescladas.

Vamos criar uma tabela como esta:

Observe que na segunda linha da tabela, uma célula ocupa o lugar de duas células, então o número total de células nesta linha será menor do que nas outras, neste caso, uma.

Agora vamos criar uma tabela como esta:

Tags de tabela adicionais

Além das tags que usamos, também existem tags que também são usadas na criação de uma tabela.

- célula de cabeçalho. Normalmente encontrado na primeira linha de uma tabela. Usado para criar um nome para uma coluna da tabela. Da tag

difere apenas em negrito e alinhamento central.

- está dentro da tag , adiciona um título à tabela.

- contém as primeiras linhas da tabela para indicar um estilo particular. Só pode haver uma dessas tags na tabela. As linhas que ele contém devem começar na primeira linha.

- contém várias linhas da tabela para indicar um estilo particular. Pode haver várias dessas tags na tabela.

- contém linhas da tabela que serão exibidas na parte inferior da tabela.

- define o estilo de uma coluna da tabela, começando da primeira. Ou seja, a primeira dessas tags especificará o estilo para a primeira coluna, a segunda tag para a segunda coluna e assim por diante. Funciona de maneira diferente em navegadores diferentes.