No mundo moderno de hoje, quase tudo está online, seja comprando, vendendo, gerenciando contas, etc. devido ao qual uma enorme quantidade de dados é necessária para ser organizada. Mas aqui a questão é como organizamos essa enorme quantidade de dados? Portanto, a resposta para esse problema é muito simples, podemos organizar dados com a ajuda de tabelas. No HTML, as tabelas desempenham um papel vital na organização dos dados que melhora a interatividade da interface.
Este artigo o orienta a criar tabela em HTML e serve os seguintes resultados: este artigo informará
Como criar uma tabela em html
Cabeçalho de mesa
Table Cellspacacing e CellPadding
Table linepan e Colspan
Legenda da mesa
Cabeçalho, corpo e rodapé da mesa
Como criar uma tabela em html
Uma tabela HTML é usada para organizar dados em linhas e colunas. Para criar uma tabela em html, usamos
tag e criar linhas em uma tabela
A tag é usada para criar células em uma tabela que usamos
marcação. O exemplo a seguir oferece uma visão clara de como criar uma tabela em html.
Exemplo
MESA
Manteiga
3 kg
Leite
3 litros
No exemplo acima, criamos uma tabela simples com duas linhas e células. Uma tabela é criada usando
tag junto com o atributo de fronteira. Então dentro de um
tag que usamos
tag para criar a linha da tabela e dentro
tag que usamos
tag para criar colunas dentro de uma linha.
Saída
Como você vê, temos uma mesa com duas linhas e colunas como esperado.
Cabeçalho de mesa
Nós usamos
tag para inserir o cabeçalho em uma mesa. O exemplo a seguir explica claramente
Exemplo
MESA
produtos
Quantidade
Manteiga
3 kg
Leite
3 litros
Neste exemplo, usamos o
tag para dar títulos à coluna.
Saída
É assim que adicionamos um título a uma mesa.
Table Cellspacacing e CellPadding
Esses dois atributos são usados para o ajuste do espaçamento das células.
Cellspacing: Este atributo adiciona espaços entre as células.
CellPadding: Este atributo especifica a distância do conteúdo celular da borda celular.
Esses atributos podem ser usados com o
Somente tag. O exemplo a seguir ajuda você a entender melhor esses atributos.
Exemplo 1
produtos
Quantidade
Manteiga
3 kg
Leite
3 litros
Neste exemplo, usamos o atributo CellSpacacing no
tag e defina seu valor como 10, que adiciona espaços entre as células da tabela.
Saída
A saída mostra claramente o resultado do espanto de células que adiciona espaços entre as células.
Exemplo 2
O código a seguir faz uso do CellPadding para uma célula de tabela.
produtos
Quantidade
Manteiga
3 kg
Leite
3 litros
Neste exemplo, usamos o atributo CellPadding em
tag e defina seu valor como 10, que adiciona espaços entre o conteúdo da célula e a border de célula da tabela.
Saída
Esta saída mostra o resultado do CellPadding.
Table linepan e Colspan
Esses dois atributos são usados para mesclar linhas e colunas.
Expansão de linha: Duas ou mais linhas podem ser mescladas usando este atributo.
Colspan: Duas ou mais colunas podem ser mescladas usando este atributo.
Esses atributos podem ser usados com o
Somente tag. O exemplo a seguir ajuda você a entender melhor esses atributos.
Exemplo
produtos
Sabores
Leite
Amêndoa
manga
Chocolate
Estes são sabores exclusivos
No exemplo acima, usamos atributos de linhas de linhas e colsspan com
tag para mesclar as linhas e colunas em uma tabela.
Saída
A saída acima mostra que os três marrons são mesclados devido a linhas de linhas e duas colunas são mescladas devido ao uso de Colspan
Legenda da mesa
Em html A tag é usada para dar a legenda a uma tabela. Legenda fornece uma informação resumida sobre a tabela. O exemplo a seguir o ajuda a entender melhor.
Exemplo
Informação do produto
produtos
Sabores
Leite
Amêndoa
manga
Chocolate
Estes são sabores exclusivos
Na saída acima, usamos tag para adicionar uma legenda com uma tabela em html.
Saída
Esta saída mostra que Informação do produto é exibido acima da tabela devido ao marcação.
Mesa Cabeçalho, corpo e rodapé
As tabelas podem ser distribuídas em três partes se os dados complexos precisarem ser organizados. Essas peças são cabeçalho, rodapé e um corpo. A tag é usada para criar o cabeçalho de uma tabela, a tag é usada para criar o rodapé da tabela e
A tag contém o conteúdo principal da tabela. O exemplo a seguir ajuda você a entender melhor.
Exemplo
produtos
Sabores
Leite
Amêndoa
manga
Chocolate
Estes são sabores exclusivos
No exemplo acima, usamos Para especificar o cabeçalho da tabela, então usamos para especificar o conteúdo principal do corpo e depois é usado para especificar o rodapé da tabela.
Saída
A saída mostra que o cabeçalho da tabela está escrito interno, nome e descrição do produto estão escritos dentro
tag enquanto contém uma mensagem curta.
Conclusão
Em html,
A tag está envolvida
tag e
tag para criar uma tabela, enquanto
tag especifica as linhas e
tag especifica as colunas da tabela. Principalmente, este artigo tem como objetivo demonstrar como criar uma tabela em html. Além disso, também, também explicamos exemplos sobre espaçamento celular, acionamento de células, abanação de linhas, abanação de colunas, tabela de tabela, cabeçalho de tabela, corpo de tabela e tabela de tabela.
