Tags de tabela HTML - Aprenda os exemplos de tags de tabela HTML com sintaxe

• Introdução às tags de tabela HTML

Introdução às tags de tabela HTML

A tabela HTML fornece uma maneira de derivar ou definir os dados, como texto, imagens, links etc. em termos de linhas e colunas de células. As tabelas HTML podem ser criadas usando

tag. Por padrão, os dados da tabela são deixados alinhados. Neste tópico, vamos aprender sobre tags de tabela HTML.

A tabela pode ser criada usando

Tag.

• o

A tag especifica as linhas da tabela que são usadas para criar uma linha.

Os dados da tabela podem ser estruturados dentro de

,	e
A tag define um cabeçalho para a tabela. o	tag especifica as células de dados da tabela que são usadas para criar a coluna. o

conteúdo da tabela com vários elementos de tabela.

Sintaxe

Título da tabela 1	Cabeçalho da tabela 2
Célula de dados 1	Célula de dados 2
Célula de dados 3	Célula de dados 4

Exemplos de tags de tabela HTML

Aqui estão os exemplos de tags de tabela HTML fornecidos abaixo

1. Uso básico da tabela



HTML Table Tag Usage



Nome	País
Dhoni	Índia
David Miller	África do Sul
Joe Root	Inglaterra

Salve o código com a extensão .html e abra-o no navegador. Ele exibirá a seguinte saída:

2. Legenda da Tabela

A legenda da tabela pode ser especificada usando a tag < caption > .

Exemplo



HTML Table Tag Usage



Esta é a legenda da tabela

Nome	País
Dhoni	Índia
David Miller	África do Sul
Joe Root	Inglaterra

O código acima exibirá a saída abaixo:

3. Espaçamento das Células da Tabela

O espaço das células da tabela pode ser definido usando o atributo cellpacing. O atributo cellpacing especifica o espaço entre as células da tabela.

Exemplo



HTML Table Tag Usage



Nome	País
Dhoni	Índia
David Miller	África do Sul
Joe Root	Inglaterra

O código acima exibirá a seguinte saída:

4. Padding Cell Cell

O preenchimento das células da tabela pode ser definido usando o atributo cellpadding. A distância do atributo cellpadding entre a borda da célula da tabela e os dados.

Exemplo



HTML Table Tag Usage



Nome	País
Dhoni	Índia
David Miller	África do Sul
Joe Root	Inglaterra

O código acima exibirá a saída abaixo:

5. Atributos de coluna e extensão de linha

As duas ou mais linhas da tabela podem ser mescladas em uma única linha usando o atributo rowspan e as colunas da tabela podem ser mescladas em uma única coluna usando o atributo colspan.

Exemplo



HTML Table Tag Usage



Coluna Um	Coluna Dois	Coluna Três
Linha Um	Linha dois	Linha três
	Linha quatro	Linha cinco
Linha seis

O código exibirá a seguinte saída:

6. Antecedentes da Tabela

O plano de fundo da tabela pode ser criado usando o atributo bgcolor. A borda da célula da tabela pode ser especificada usando o atributo border-color.

Exemplo



HTML Table Tag Usage



Nome	País
Dhoni	Índia
David Miller	África do Sul
Joe Root	Inglaterra

Execute o código acima e ele exibirá a saída abaixo:

7. Altura e largura da mesa

A altura e a largura da tabela podem ser definidas usando os atributos width e height.

Exemplo



HTML Table Tag Usage



Nome	País
Dhoni	Índia
David Miller	África do Sul
Joe Root	Inglaterra

O código acima exibirá a seguinte saída:

8. Células de mesa de estilo

Exemplo



HTML Table Tag Usage

table, th, td (
border: 1px solid red;
border-collapse: collapse;
)
th, td (
padding: 15px;
)
table#mytable tr:nth-child(even) (
background-color: #FAD7A0;
)
table#mytable tr:nth-child(odd) (
background-color: #E67E22;
)
table#mytable th (
color: white;
background-color: teal;
)



Nome	País
Dhoni	Índia
David Miller	África do Sul
Joe Root	Inglaterra

Execute o código acima, você terá a saída abaixo:

8. Tabelas aninhadas

Você pode usar uma tabela dentro de outra tabela chamada tabela aninhada.

Vamos considerar o exemplo abaixo para a tabela aninhada:

Exemplo



HTML Table Tag Usage



Nome País Dhoni Índia David Miller África do Sul Joe Root Inglaterra

O código acima exibirá a seguinte saída:

Atributos da tabela

• align: esse atributo fornece o alinhamento do conteúdo dentro de um elemento.
• bgcolor: este atributo especifica a cor de fundo da tabela.
• border: Este atributo especifica a borda para as células da tabela.
• cellpadding: esse atributo exibe o preenchimento entre as células da tabela e o conteúdo da tabela.
• cellpacing: esse atributo exibe o espaço entre as células da tabela.
• quadro: especifica quais partes das bordas externas são visíveis.
• rules: Isso especifica quais partes das bordas internas são visíveis.
• classificável: este atributo informa que a tabela é classificável.
• resumo: fornece que tipo de conteúdo de tabela está presente.
• width: este atributo informa a largura da tabela.
• height: este atributo especifica a altura da tabela.

Conclusão

Até agora, estudamos os diferentes tipos de tags de tabela em HTML. Os exemplos mostraram o uso de estilizar a tabela, aninhar uma tabela dentro de outra tabela, definir altura e largura da tabela, adicionar espaçamento e preenchimento para as células da tabela, aplicar cor de fundo na tabela e muito mais.

Artigos recomendados

Este é um guia para tags de tabela HTML. Aqui discutimos os exemplos de tags de tabela HTML com sintaxe e atributos da tabela. Você também pode consultar os seguintes artigos para saber mais -

1. Elementos do formulário HTML
2. Criar tabelas em HTML
3. Tags de imagem HTML
4. O que é HTML
5. Quadros HTML
6. Blocos HTML
7. Definir uma cor de plano de fundo em HTML com exemplo