Existem diferentes maneiras de representar dados e informações, como gráficos, gráficos, pictográficos ou formulários tabulares. A tabela organiza dados em linhas e colunas, tornando os dados mais legíveis e claros. Os dados tabulados também economizam tempo e espaço. Para fazer tabelas em html, usamos
etiqueta com
marcação,
tag para o cabeçalho e
para dados da tabela.
Os resultados de aprendizado deste artigo serão:
O que é html
Marcação?
Como criar uma tabela em html?
Quais são os atributos de
Marcação?
Como criar tabela de cabeçalho vertical?
O que é html
Marcação?
O html
tag especifica uma linha em uma tabela, o
A tag é usada para o cabeçalho da tabela e
tag é para dados de tabela.
Sintaxe
..
A tag HTML TR tem uma tag de partida
e uma tag de fechamento
.
Como criar uma tabela em html?
O exemplo abaixo demonstrará como podemos criar uma tabela em html. Para fazer isso, primeiro, adicione um
Tag e depois especifique uma legenda usando a tag:
Informações dos alunos
Dentro do elemento da tabela, adicione
tag após a legenda. A primeira linha conterá o título de cada coluna. Por esta
Tags são usadas:
Núm. da lista
Nome do aluno
Dob
Depois de criar três colunas, vamos adicionar dados às colunas. Os dados serão adicionados a cada linha em correspondência aos títulos na próxima linha. Então, para adicionar dados, o
A tag é utilizada:
1
John
23-05-1997
Da mesma forma, crie mais duas linhas, como mostrado no trecho de código abaixo:
2
William
02-9-1995
3
Margarida
12-03-1998
A saída correspondente do código mencionado acima ficará assim:
Aplicando estilos na tabela com CSS
Nesta seção, aplicaremos algumas propriedades de estilo à tabela que criamos acima.
Tag de legenda de estilo
Legenda tamanho da fonte: 30px; preenchimento: 7px; Decoração de texto: 2px sublinhado #182747;
A tag de legenda usada no arquivo HTML terá as propriedades listadas abaixo:
““tamanho da fonte”Propriedade define o tamanho da fonte.
““preenchimento”A propriedade é utilizada para aplicar espaço em torno do conteúdo do elemento.
““decoração de texto”A propriedade aplica decoração ao texto.
Estilo
,
,
Tag Table, th, td Background-Color: #d8d9cf; borda: 1px sólido #5d6462; Size da fonte: 25px;
O
,
, e
As tags são estilizadas com as propriedades CSS descritas abaixo:
““cor de fundo”A propriedade é utilizada para dar cor de fundo à mesa.
““fronteira”Propriedade define uma borda ao redor da mesa com uma largura, tipo de linha e cor.
““tamanho da fonte”A propriedade é utilizada para definir o tamanho da fonte como 25px.
““margem”Propriedade com valor“auto”Coloca a mesa no espaçamento central igual de cada lado.
““largura”A propriedade é utilizada para definir a largura da tabela.
““altura”Propriedade define a altura da tabela.
Saída
Quais são os atributos de
Marcação?
Existem muitos atributos associados ao HTML
tag, como:
Expansão de linha
Colspan
Atributo: lobra
Este atributo contém um valor não negativo que especifica o número de linhas que a célula se estende. Seu valor padrão é 1.
Exemplo: como adicionar o atributo lobmpan a uma linha de tabela? Então, a partir do exemplo acima, tomamos a segunda fila. Adicione o atributo linespan com o valor 2 aos dados da terceira tabela:
2
William
02-9-1995
Pode ser visto a partir da imagem abaixo, os terceiros dados da segunda linha ocuparam espaço de duas linhas:
Atributo: Colspan
Este atributo contém um valor não negativo que especifica o número de colunas que a célula se estende. O valor padrão do Colspan é 1. Maiores que 1000 valores serão definidos como padrão porque são considerados incorretos.
Exemplo: como adicionar atributo colspan à linha da tabela? No arquivo html, o
A tag é adicionada abaixo da tag e é fornecida com o atributo colspan com um valor de 3:
Escola Linuxhint
Da imagem abaixo, pode -se ver que o cabeçalho da tabela ocupou espaço para três colunas:
Como criar tabela de cabeçalho vertical?
Em HTML, adicione três
Tag. Dentro de cada um, as outras tags são colocadas, como
, então
Tag. De tal maneira, uma tabela com títulos verticais pode ser criada:
Nome
Tom
Andrew
Cidade
Estados Unidos
China
Profissão
Instrutor
Doutor
Salve o arquivo HTML e abra o arquivo em um navegador da web:
Pode -se observar que o cabeçalho da tabela é colocado verticalmente.
Conclusão
Para criar uma tabela para o nosso aplicativo da web, o HTML nos fornece tags diferentes para tabelas, linhas e colunas como
,
, e
, respectivamente. Então, este blog explicou o html
tag, seu atributo e o método para criar uma tabela de cabeçalho simples e vertical.
