Uma tabela é uma grade de células que formam linhas e colunas. Exemplos de tabelas incluem várias demonstrações financeiras, resultados esportivos, calendários, programações, etc. O bloco de grade individual é chamado de célula da tabela. As células da tabela podem conter uma ampla variedade de informações, incluindo números, texto e até mesmo objetos de vídeo e áudio. Usando a linguagem HTML, as tabelas são escritas linha por linha.
Elemento
serve como um contêiner para os elementos que definem o conteúdo da tabela. Para criar uma linha de tabela, você precisa adicionar dentro do elemento
tag de bloco emparelhado
(abreviado do inglês. "linha taye" - linha da tabela). Quantas tags
você adiciona, quantas linhas na tabela e haverá. Tag de abertura
denota o início de uma nova linha na tabela. Os elementos são colocados depois dele |
(abreviado do inglês "taye data" - dados da tabela), cada um dos quais especifica uma célula separada nesta linha. Elemento interno |
você coloca seu conteúdo (texto, números, imagens, etc.) exibido nessa célula. O fim da linha é indicado por uma tag de fim |
.
Elemento
(abreviado do inglês "taYe header" - o título da tabela) - um elemento opcional da tabela que é usado da mesma forma que o elemento |
no entanto, seu objetivo é criar um cabeçalho para uma linha ou coluna. Normalmente, o elemento |
colocado na primeira linha da tabela. Os navegadores exibem texto em um elemento |
em negrito e centralizá-lo em relação à célula. Usando um elemento no código |
ajuda as pessoas que usam leitores de tela e também melhora o desempenho das tabelas de indexação dos mecanismos de busca.
Considere uma tabela simples com três linhas e três colunas, com as células da primeira linha sendo os títulos das colunas correspondentes. Por padrão, as tabelas geralmente são exibidas sem uma borda:
Exemplo: Tabela HTML Simples
| Cabeçallho 1 | Título 2 | Título 3 |
|---|
| Célula 2x1 | Célula 2x2 | Célula 2x3 |
| Célula 3x1 | Célula 3x2 | Célula 3x3 |
Borda da mesa
Já sabemos que, por padrão, as tabelas são exibidas sem borda. Para adicionar uma borda ao redor de uma tabela, você precisa especificar algumas regras de folha de estilo simples em seu documento. Propriedade fronteira controla a exibição das linhas de grade da tabela e também define a largura da borda ao redor da tabela em pixels. Uma borda aparece ao redor da tabela e entre as células. Adicione um quadro de um pixel de largura à tabela já criada, definindo a propriedade fronteira para todos os elementos da tabela, por exemplo, como este:
Exemplo: Aplicando uma Propriedade fronteira
Quadro ao redor da mesa
| Cabeçallho 1 | Título 2 | Título 3 |
|---|
| Célula 2x1 | Célula 2x2 | Célula 2x3 |
| Célula 3x1 | Célula 3x2 | Célula 3x3 |
Quadro de mesa única
Por padrão, as células adjacentes da tabela terão sua própria borda. Isso resulta em uma espécie de "borda dupla", conforme visto no exemplo acima. Para se livrar da "borda dupla", adicione a propriedade CSS colapso da fronteiraà sua folha de estilo:
Exemplo: Aplicando uma Propriedade colapso da fronteira
Quadro ao redor da mesa
| Cabeçallho 1 | Título 2 | Título 3 |
|---|
| Célula 2x1 | Célula 2x2 | Célula 2x3 |
| Célula 3x1 | Célula 3x2 | Célula 3x3 |
Campos e espaçamento da tabela
Por padrão, as células da tabela são dimensionadas para caber em seu conteúdo, mas às vezes é necessário deixar algum preenchimento ao redor dos dados da tabela. Como o espaçamento e as margens estão relacionados aos elementos de apresentação de dados, esse espaço é personalizável usando folhas de estilo CSS. Campo de célula ( preenchimento) É a distância entre o conteúdo da célula e sua borda. Para adicioná-lo, use a propriedade preenchimento para o elemento |
ou |
... Espaçamento de células ( espaçamento de borda) É a distância entre eles ( |
ou |
) Primeiro atribua o valor separado propriedade colapso da fronteira elemento
e, em seguida, defina o espaçamento entre as células, alterando o valor do parâmetro espaçamento de borda... Anteriormente, os atributos eram responsáveis pelos campos e espaçamento das células. enchimento de células e espaçamento entre células elemento
mas eles foram descontinuados na especificação HTML5.
Exemplo de uso preenchimento e espaçamento de borda:
Exemplo: aplicando propriedades preenchimento e espaçamento de borda
preenchimento e espaçamento de borda
| Célula 1 | Célula 2 |
| Célula 3 | Célula 4 |
Largura da Mesa
A largura ocupada pela tabela na janela do navegador pode ser especificada usando a propriedade largura CSS, em pixels ou porcentagens. Especificar a largura da tabela em pixels permite determinar sua largura exata. A porcentagem permite que você torne a tabela flexível, ou seja, ele vai "esticar" ou "encolher" dependendo de quais outros elementos estão na página e do tamanho da janela do navegador.
Aqui está um exemplo usando a propriedade largura: Tabela (largura: 100%;) Exemplo: Aplicando uma Propriedade largura
| Célula 1 | Célula 2 |
| Célula 3 | Célula 4 |
largura: 100%
| Célula 1 | Célula 2 |
| Célula 3 | Célula 4 |
Células de concatenação (colspan e rowspan)
Um dos principais recursos de uma estrutura de tabela é a concatenação de células, que envolve esticar uma célula para abranger várias linhas ou colunas. Isso permite estruturas de tabela complexas: cabeçalhos
ou células |
são combinados pela adição de atributos colspan ou Expansão de linha... Atributo colspan determina o número de células que uma determinada célula estende horizontalmente, e Expansão de linha- verticalmente.
Colunas concatenadas
A concatenação da coluna é obtida usando o atributo colspan em elementos |
ou |
- a célula é esticada para a direita para cobrir as colunas subsequentes. No exemplo a seguir, o valor do atributo colspané igual a 2, o que significa que a célula deve ocupar duas colunas.
Exemplo: Aplicando um Atributo colspan
Atributo Colspan
| colspan= "2"> Célula com duas colunas |
|---|
| Célula 1 | Célula 2 |
| Célula 3 | Célula 4 |
Cordas de concatenação
Strings concatenadas usando um atributo Expansão de linha, se comportam exatamente como colunas mescladas, com a única diferença de que o intervalo de células é de cima para baixo e abrange várias linhas.
Este exemplo estende a primeira célula da tabela duas linhas para baixo:
Exemplo: Aplicando um Atributo Expansão de linha
| Célula em duas linhas |
Célula 1 | Célula 2 |
|---|
| Célula 3 | Célula 4 |
Atributo Rowspan
| Expansão de linha= "2"> Célula em duas linhas |
Célula 1 | Célula 2 |
|---|
| Célula 3 | Célula 4 |
Cabeçalho da tabela
Uma tag de par é usada para criar um título ou legenda de tabela
(da legenda em inglês - assinatura). Elemento
serve para organizar o cabeçalho da tabela. Localizado imediatamente após a tag
mas fora da descrição de uma linha ou célula.
Exemplo: usando uma tag
Elemento de legenda
Este é o cabeçalho da tabela
| Célula em duas linhas |
Célula 1 | Célula 2 |
|---|
| Célula 3 | Célula 4 |
Tags de agrupamento para itens de tabela
Para agrupar os elementos da tabela, use as tags
,
e
... Assim como uma página da web pode conter cabeçalho, corpo e rodapé, uma tabela pode conter cabeçalho, corpo e rodapé. Para agrupar logicamente as linhas no topo da tabela (ou seja, para criar o topo da tabela), use a tag
... Os cabeçalhos da tabela devem ser colocados no elemento
, por exemplo:
| Cabeçallho 1 | Título 2< /th> |
|---|
O conteúdo principal (corpo) da tabela deve estar dentro do elemento
(pode haver vários desses blocos na tabela). Para agrupar logicamente as linhas na parte inferior da tabela (ou seja, para criar um "rodapé" da tabela), use a tag
(não mais do que uma tag é permitida em uma tabela
) No código-fonte, a tag
colocado antes da tag
... Além do agrupamento lógico, uma das razões para usar elementos
e
é que se a sua mesa for muito longa para ser exibida ao mesmo tempo na tela (ou para ser impressa), o navegador exibirá o título (
) e a última linha (
) quando o usuário rola sua tabela.
Exemplo: Tags
,
e
Tags Thead, tbody e tfoot
| Este é o cabeçalho da tabela |
|---|
| Este é o rodapé da tabela |
| Célula 1 | Célula 2 | Célula 3 | Célula 4 |
Apesar de estarmos na frente de
adicionado
, no entanto, aparece no final da tabela. Isso vem do fato de que
pode conter muitas linhas. Mas o navegador precisa renderizar a parte inferior da tabela antes de obter todas as (potencialmente numerosas) linhas de dados. É por isso
no código é escrito antes do elemento
.
Tarefas
As tabelas são um dos elementos mais importantes, porém complexos, que devem estar presentes nas páginas da web. Com a ajuda deles, é conveniente apresentar informações importantes e úteis de uma forma bastante concisa. Claro, a maioria dos editores em modelos que trabalham em motores diferentes permitem que você insira automaticamente uma tabela em uma página de um site ou uma publicação separada, mas e se o design de um recurso da web, suas páginas forem criadas do zero? Então, um assistente novato pode enfrentar um problema: como fazê-lo.Vamos descobrir como criar este elemento de forma correta e rápida. Escolha de um editorAntes de mais nada, começando a criar uma tabela, você deve decidir em qual editor trabalhará. Obviamente, a maneira mais fácil é escolher o programa no qual você cria o código do site principal. Mas é melhor usar um bom e velho notebook para essas finalidades. Você pode perguntar por que complicar sua vida, porque se você fizer tudo de uma vez no editor, o resultado também pode ser visto imediatamente, e você também pode usar as dicas do programa. Sim, isso é verdade, mas ao criar uma tabela do zero, você não só poderá estudar a fundo o próprio princípio de sua criação, mas também evitar erros de digitação e erros no código principal. Às vezes, acontece que o cursor se move acidentalmente para baixo e, no processo de gravação, um erro penetra no código, o que às vezes é difícil de localizar. Depois de criar uma tabela em um bloco de notas, você pode copiar sua cifra e colá-la onde quiser. Algoritmo para criar uma tabelaPrimeiro, vamos montar um pequeno algoritmo sobre como fazer uma tabela em HTML. Isso é para que você entenda a sequência de cada etapa. Em seguida, analisaremos exatamente como realizar cada um dos pontos. 
Vamos começar com as etapas preparatórias. 1. Desenhe uma imagem esquemática da mesa em uma folha de papel. 2. Contamos o número de linhas e células. Se o número do último for diferente, contamos para cada linha separadamente. 3. Determine o número de células de cabeçalho na linha (por exemplo, células "Não", "Nome", etc.). 4. Anote os principais parâmetros da tabela - cor, altura e largura, alinhamento do texto - em geral, o que você achar necessário. 1. Insira as tags da tabela. 2. Insira marcas de linha com base no número de que você precisa. 3. Nas linhas, insira as etiquetas das células (regulares e maiúsculas), também com base no número que você escreveu no papel. 4. Defina os parâmetros da tabela como um todo. 5. Se necessário, defina indicadores para células individuais. 6. Preenchemos nossas células com texto. 
Crie uma mesaEntão você escolheu um editor, agora vamos descobrir como criar uma tabela em HTML. A tag com a qual a tabela é inserida no código da página ( ), é pareado, ou seja, nossa construção começa com essa tag e termina com .Depois de inserir as tags da tabela, passamos a criar linhas e células. Imediatamente, notamos que esses elementos também estão emparelhados. Marcação especifica strings, e | - células. Para células de cabeçalho, use o elemento pareado | . Como já mencionado, o primeiro passo é traçar as linhas e, em seguida, escrever as células nelas. Para não ficar confuso, aconselhamos que você recue cada bloco em uma ou duas linhas, ou escreva um novo bloco de elementos usando a tecla "Tab". Como pode ser? Curtiu isso: ;;| P / p No. | ;| Sobrenome | ; ;;| 1 | ;| Ivanov | ; | ; .
Como você pode ver, não há nada de complicado nisso. O principal é não se confundir com o número de linhas e células. Caso contrário, a mesa pode inclinar. Já discutimos a criação de uma tabela em HTML, agora podemos prosseguir para os parâmetros da própria matriz e de suas linhas e células. 
Parâmetros de tabelaQuando o código é escrito, você deve prestar atenção aos seguintes pontos: alinhamento nas bordas, fundo, texto e assim por diante. Os parâmetros da tabela são definidos na tag ... Esses incluem:1. Borda - a largura das bordas. Defina como um número inteiro. Por padrão, as bordas de qualquer tabela são zero. 2. Bordercolor - cor da borda. Pode ser definido como um código de cor hexadecimal (# 00008B) e seu nome em inglês (DarkBlue). É sempre cinza por padrão. 3. Bgcolor - também definido por código ou nome. 4. Alinhar - alinhamento do texto atrás da mesa. O padrão é alinhado à esquerda. Existem as seguintes opções para este parâmetro: - esquerda - enrole para a direita;
- direita - embrulhamento para a esquerda;
- center - exibe a mesa no centro sem embrulhar.
5. Largura e altura - largura e altura da mesa. Ele pode ser definido em pixels e como uma porcentagem (em relação ao tamanho da janela do navegador). Ao prescrever este ou aquele indicador, você deve prestar atenção especial ao design. O parâmetro deve ser seguido por um sinal de "igual", seguido pelo valor especificado entre aspas. Quanto à cor do texto, ele é estilizado da mesma forma que um texto normal em formato HTML. Um exemplo de design de mesa: ;;| P / p No. | ;| Sobrenome | ; ;;| 1 | ;| Ivanov | ; | ; .
Parâmetros de stringPortanto, já descobrimos como fazer uma tabela em HTML e registrar seus principais parâmetros. Mas e se precisarmos destacar uma linha? Deve ter um estilo diferente do texto principal da tabela? Parâmetros de string são escritos na tag exatamente o mesmo que os dados da tabela. As seguintes variáveis podem ser definidas para uma string:1. Border, bordercolor e bgcolor já conhecidos por você. 2. Alinhar - alinhamento do texto em uma linha. Pode assumir os valores esquerda, centro e direita. 3. Valign - esta tag alinha o texto verticalmente. Possui os seguintes valores: - topo - o texto é alinhado à borda superior;
- meio - no centro;
- inferior - ao longo da borda inferior.
Exemplo de formatação de linha: Parâmetros de célulaE a última coisa que vale a pena prestar atenção para quem quer saber como fazer uma tabela em HTML são os parâmetros das células individuais, regulares e maiúsculas. Na verdade, tudo é feito da mesma forma que para uma tabela ou linha. A única coisa é que dois elementos mais importantes são adicionados: 1. Colspan - este parâmetro especifica o número de colunas que a célula pode abranger. 2. Rowspan - já indica o número de linhas que esta célula ocupa. Como o design não é diferente de escrever uma linha, não daremos um exemplo do código. 
conclusõesFazer uma mesa não é tão difícil quanto pode parecer à primeira vista. O principal ao escrever seu código é perseverança e atenção. Quanto a como inserir uma tabela em HTML, basta copiar e colar sua cifra no lugar exato da página onde, em sua opinião, ela deve estar. Sinta-se à vontade para experimentar e logo dominará a técnica de criar tabelas com perfeição. Boa sorte!
As tabelas HTML são tão funcionais que você pode usá-las para criar sites inteiros (ler). Agora vamos falar sobre a inserção de tabelas HTML simples em uma página da web, analisando apenas a marcação, mas sem tocar no design, porque é melhor decorar tabelas com estilos CSS.
Tags e atributos de tabela
Aqui estão os elementos básicos de que você precisa para criar tabelas:
- o recipiente dentro do qual a mesa está localizada (o mesmo que para etiquetado ou
para listas numeradas).
- fronteira- um atributo que determina a espessura das molduras. É melhor usar a propriedade CSS da borda.
-
especifica a assinatura da mesa. Você não precisa usar o contêiner, mas se ainda decidir dar um título à tabela, coloque-o logo após a tag
, células e linhas externas.
- uma tag emparelhada contendo uma linha da tabela (células localizadas no mesmo nível horizontalmente).
|
- a tag que cria a célula do cabeçalho da tabela. Externamente, seu conteúdo difere do conteúdo de outras células - geralmente o texto dentro |
o navegador está em negrito e centralizado.
- um contêiner com o qual uma célula simples é criada. Quantas dessas tags a string conterá (tag
, haverá tantas células nele: uma tag - uma célula.
-
permite agrupar colunas, rapidamente e sem confundir o código para definir suas características comuns. Usando um contêiner, você pode separar as partes lógicas de uma tabela. Localizado após a tag
, se não, então depois
.
-
usado para o mesmo propósito que
.
pode conter
mas não vice-versa.
- período- um atributo que especifica o número de colunas às quais as propriedades do contêiner são aplicadas
.
-
,
e
- recipientes que permitem dividir a mesa, respectivamente, nas partes superior (cabeçalhos), principal (corpo) e inferior (final). Em uma tabela HTML, a sequência dessas tags é a mesma dos contêineres
,
e no documento HTML.
- colspan necessário para combinar células em uma fileira. O valor do atributo contém um número que especifica o número de células a serem mescladas.
- Expansão de linha mescla células em colunas.
Exemplo de criação de mesa
Crie um documento HTML e copie o seguinte código nele:
Mesa de exemplo
Ferramentas de construção de sites
| Compromisso | Ferramenta |
| Markup | Html | XHTML |
| Cadastro | CSS |
| Desenvolvimento de | PHP | Pitão |
No navegador, o documento terá a seguinte aparência: Vamos analisar quais linhas de código são responsáveis por quê.
- abriu a mesa definindo a espessura das molduras.
-
Ferramentas de construção de sites
- intitulado.
- abriu uma linha.
|
Compromisso |
- criou uma célula com um design de título.|
Ferramenta |
- criou uma segunda célula de cabeçalho na linha. O parâmetro colspan indica que esta célula deve ocupar duas horizontalmente.
- fechou a linha. O resto das linhas foram criadas da mesma maneira. |
Markup |
Html |
XHTML |
- adicionada a segunda linha da tabela com as células usuais, não de cabeçalho. As linhas e células subsequentes foram inseridas de forma semelhante.
- fechou a mesa.
é o corpo da mesa. O corpo é composto por linhas e colunas. A tabela é preenchida linha por linha.
Cada etiqueta cria uma nova linha. Mais em aninhado colunas são criadas. Várias colunas podem ser criadas. Nesse caso, você precisa controlar o número de colunas em cada linha. Por exemplo, se a primeira linha tinha 5 colunas, as próximas linhas também deveriam ter 5 colunas. Caso contrário, a tabela irá flutuar. É possível combinar células.
Como fazer uma mesa em html
Vamos dar um exemplo, código html:
| Mesa de exemplo |
| Coluna 1 |
Coluna 2 |
Preste atenção no celular | ... Usamos o atributo especial colspan para combinar as células horizontalmente. Seu valor numérico indica o número de colunas a serem combinadas. Também existe um análogo deste atributo: tag | (cabeçalho da tabela), onde você também precisa escrever colspan. O resultado será o mesmo. Mas o td usual é freqüentemente usado.
Agora, vamos examinar mais de perto todos os atributos da tag.
.
Atributos e propriedades da tag
Para a tag de abertura você pode escrever vários atributos.
1. Propriedade align = "parâmetro" - define o alinhamento da tabela. Pode assumir os seguintes valores:
No exemplo acima, alinhamos a tabela no centro align = "center".
Este atributo pode ser aplicado não apenas a uma tabela, mas também a células individuais da tabela. ou cordas | ... Assim, o alinhamento será diferente em células diferentes.
Por exemplo
| ... |
| ... |
...
2. Fundo da propriedade = "URL" - define a imagem de fundo. Em vez do URL, deve ser escrito o endereço da imagem de fundo.
Exemplo
| Mesa de exemplo |
| Coluna 1 |
Coluna 2 |
Convertido na página para o seguinte:
No exemplo acima, nossa imagem de fundo está localizada na pasta img (que está localizada no mesmo diretório da página html), e a imagem é chamada fon.gif. Observe que na tag adicionamos style = "color: white;" ... Como o fundo é quase preto, de modo que o texto não se funde com o fundo, tornamos o texto branco.
3. Propriedade bgcolor = "color" - define a cor de fundo da tabela. Como uma cor, você pode escolher qualquer uma das paletas inteiras (veja os códigos e nomes das cores html)
4. Property border = "number" - define a espessura da borda da mesa. Nos exemplos anteriores, especificamos border = "1", o que significa que a largura da borda é de 1 pixel.
5. Propriedade bordercolor = "color" - define a cor da borda. Se border = "0", então não haverá borda e a cor da borda não fará sentido.
6. Propriedade cellpadding = "número" - recuo do quadro para o conteúdo da célula em pixels.
7. Property cellspacing = "number" - a distância entre as células em pixels.
8. Property cols = "number" - o número de colunas. Se você não especificar, o navegador determinará o número de colunas por si mesmo. A única diferença é que a especificação desse parâmetro provavelmente acelera o carregamento da tabela.
9. Frame da propriedade = "parâmetro" - como exibir as bordas ao redor da mesa. Pode assumir os seguintes valores:
- vazio - não desenhe bordas
- borda - a borda ao redor da mesa
- acima - borda no topo da mesa
- abaixo - borda na parte inferior da tabela
- hsides - adicione apenas bordas horizontais (parte superior e inferior da tabela)
- vsides - desenhe apenas bordas verticais (esquerda e direita da tabela)
- rhs - borda apenas no lado direito da mesa
- lhs - borda apenas no lado esquerdo da mesa
10. Property height = "number" - define a altura da tabela: em pixels ou em porcentagem.
11. Regras de propriedade = "parâmetro" - onde exibir as bordas entre as células. Pode assumir os seguintes valores:
- all - uma linha é desenhada ao redor de cada célula da tabela
- grupos - a linha é exibida entre os grupos que são formados por tags , , ,
ou
- cols - a linha é exibida entre as colunas
- nenhum - todas as bordas estão ocultas
- linhas - a borda é desenhada entre as linhas da tabela criadas por meio da tag
12. Largura da propriedade = "número" - define a largura da tabela: em pixels ou em porcentagem.
13. Property class = "class_name" - você pode especificar o nome da classe à qual a tabela pertence.
14. Property style = "styles" - os estilos podem ser definidos individualmente para cada tabela.
Agora é a hora de mergulhar na tabela e examinar os atributos das células da tabela. Esses atributos devem ser escritos na tag de abertura.
.
Atributos e propriedades e |
1. Propriedade align = "parâmetro" - define o alinhamento de uma célula de tabela separada. Pode assumir os seguintes valores:
- esquerda - alinhamento à esquerda
- centro - alinhamento central
- certo - alinhamento certo
2. Fundo da propriedade = "URL" - define a imagem de fundo da célula. Em vez do URL, deve ser escrito o endereço da imagem de fundo.
3. Propriedade bgcolor = "color" - define a cor de fundo da célula.
4. Propriedade bordercolor = "color" - define a cor da borda da célula.
5. Property char = "letter" - define a letra a partir da qual o alinhamento deve ser feito. O valor do atributo align deve ser definido como char.
6. Propriedade colspan = "número" - define o número de células horizontais a serem combinadas.
7. Altura da propriedade = "número" - define a altura da tabela: em pixels ou em porcentagem%.
8. Largura da propriedade = "número" - define a largura da tabela: em pixels ou em porcentagem%.
9. Propriedade rowspan = "número" - define o número de células verticais mescladas.
10. Propriedade valign = "parâmetro" - alinhamento vertical do conteúdo da célula.
- topo - alinha o conteúdo da célula ao topo da linha
- meio - alinhamento do meio
- inferior - alinhar com o fundo
- linha de base - alinhamento da linha de base
Nota 1 Para tag | as mesmas opções estão disponíveis para | ... Parâmetros para uma tag | será hierarquicamente aplicado a todos dentro dele
Como evitar que as células da tabela grudem umas nas outras
No caso de usar borda (borda das células) e preenchimento de zero entre as células, eles ainda estão colados e você obtém uma borda dupla. Para evitar isso, você precisa registrar a tabela border-collapse: collapse na folha de estilo:
...
Caro leitor, agora você aprendeu muito mais sobre a tag html table. Agora, eu o aconselho a passar para a próxima lição.
Código-fonte de uma tabela HTML simples
Célula 1 |
Célula 2 |
Célula 3 |
Célula 4 |
Célula 5 |
Célula 6 |
Célula 7 |
Célula 8 |
Célula 9 |
Cabeçalhos de tabela HTML
Existem 2 tipos de células nas tabelas HTML. A tag define uma célula do tipo usual. Se uma célula atua como um título, ela é identificada com uma tag.
Exemplo de tabela HTML com o título
| Volkswagen AG |
Daimler AG |
BMW Group |
|---|
| Audi |
Mercedes-Benz |
BMW |
| Skoda |
Mercedes-AMG |
Mini |
| Lamborghini |
Inteligente |
Rolls Royce |
Código-fonte da tabela HTML com os cabeçalhos th
Volkswagen AG |
Daimler AG |
BMW Group |
|---|
Audi |
Mercedes-Benz |
BMW |
Skoda |
Mercedes-AMG |
Mini |
Lamborghini |
Inteligente |
Rolls Royce |
Concatenar células em uma tabela HTML
As tabelas HTML têm a capacidade de combinar células horizontal e verticalmente.
Para mesclar células horizontalmente use o atributo colspan = " NS", na célula ou, onde x
Para mesclar células verticalmente use o atributo rowspan = " NS", na célula ou, onde x- o número de células a combinar.
As células podem ser mescladas horizontal e verticalmente ao mesmo tempo. Para fazer isso, use os atributos colspan e rowspan para a célula desejada:
Texto da célula |
Observe que o número de itens na linha muda quando você mescla células. Por exemplo, se uma tabela tem 3 colunas com células, e combinamos a primeira e a segunda células, então haverá 2 elementos dentro da tag que define esta linha, o primeiro deles conterá o atributo colspan = "2".
Exemplo de tabela HTML com concatenação de células
Fonte da tabela HTML com células mescladas
Nissan |
|---|
Modelo |
Equipamento |
Disponibilidade |
|---|
Nissan Qashqai |
VISIA |
+ |
TEKNA |
+ |
Nissan x-trail |
ACENTA |
+ |
CONNECTA |
- |
Cabeçalhos e rodapés e assinatura em tabelas HTML
As tabelas HTML podem ser divididas em 3 áreas: cabeçalho, corpo, rodapé.
Isso é feito envolvendo as linhas da parte selecionada da tabela com tags. define a área do cabeçalho, - a área do rodapé, - o corpo da tabela.
Por padrão, cabeçalhos e rodapés não são estilizados (isso pode ser feito via CSS, se necessário), mas podem ser usados por navegadores. Por exemplo, ao imprimir uma tabela de várias páginas, os cabeçalhos e rodapés podem ser duplicados em cada página impressa.
A ordem correta de colocação das tags de área no código HTML da tabela é a seguinte: primeiro o cabeçalho, depois o rodapé e, por fim, o corpo principal. Neste caso, a parte principal da página será exibida entre os cabeçalhos e rodapés.
Você pode adicionar uma assinatura à mesa conforme necessário. Para fazer isso, use uma tag.
Exemplo de tabela HTML com cabeçalhos e rodapés e assinatura
Código-fonte para tabela com cabeçalhos e rodapés e assinatura
Conjunto completo Renault Sandero Stepway
Característica |
SUTA 09H 6R |
SUTA 09HR6R |
SUTA 15H 5R |
|---|
Disponibilidade |
+ |
+ |
+ |
|---|
Poder do motor |
0,9 (90 HP) |
0,9 (90 HP) |
1,5 (90 HP) |
|---|
Combustível |
gasolina |
gasolina |
diesel |
|---|
Taxa de toxicidade |
Euro 6 |
Euro 6 |
Euro 5 |
|---|
Colunas e grupos de colunas
A tabela HTML pode ser dividida em colunas e grupos de colunas usando as tags e.
Essa separação permite definir estilos para a tabela usando um número mínimo de propriedades CSS, reduzindo assim a quantidade de código da tabela (em vez de definir estilos para cada célula em uma coluna, você pode definir estilos para uma ou mais colunas de uma vez).
Tags e colocados dentro da tag antes das tags, AKP6 (EDC) Transmissão |
Fonte da tabela c HTML e
ZEN 2E2C AL A |
ZEN 2E2C J5 A |
INTENSO 2E3C AL A |
Característica |
|---|
1,5 (90 HP) |
1,2 (115 cv) |
1,5 (90 HP) |
Poder do motor |
|---|
diesel |
gasolina |
diesel |
Combustível |
|---|
AKP6 (EDC) |
AKP6 (EDC) |
AKP6 (EDC) |
Transmissão |
|---|
Tabelas no layout da página do site
Em sites modernos, é importante exibir corretamente as páginas em computadores e dispositivos móveis. Não é aconselhável usar tabelas para criar o esqueleto de uma página HTML, pois a capacidade de adaptar o conteúdo a telas de diferentes tamanhos (computadores, smartphones, tablets) é perdida.
As tags do grupo Tabela são mais bem usadas em uma página para exibir o conteúdo formatado em tabela.
| |
|
| | |
| | |
