Os designers da web podem personalizar layouts de página utilizando tabelas aninhadas, projetando tabelas maiores e menores com vários tamanhos de células, para que cada um mostre texto, gráficos ou ambos. Mais particularmente, as tabelas aninhadas habilitaram layouts colunares em páginas da web sem o uso de quadros irritantes.
Este post indicará:
Como criar/fazer uma tabela em html?
Como criar uma tabela aninhada em HTML?
Como criar/fazer uma tabela em html?
Para projetar uma tabela em html, o “
”A tag é utilizada. Então, tente as instruções declaradas.
Etapa 1: Crie um contêiner div
Inicialmente, crie um recipiente de div, implantando o “”Elemento e adicione um atributo de identificação com um nome específico de acordo com sua escolha.
Etapa 2: Adicionar cabeçalho
Em seguida, use a tag de título de "" para "”Para adicionar um título dentro do contêiner Div. Para esse fim, usamos o “H1”Tag de título e texto incorporado dentro da tag de abertura e fechamento de“ H1 ”.
etapa 3: Criar a tabela
Para criar uma tabela em html, insira um “
”Tag e adicione uma classe dentro da tag de tabela com um nome específico. Em seguida, adicione os elementos listados abaixo entre as tags da tabela:
““
Ӄ utilizado para definir as linhas na tabela.
““
”O elemento é usado para adicionar os dados dentro da tabela.
Para fazer isso, incorpore os dados de texto entre
:
Site do tutorial Linuxhint
Primeira organização
Segunda organização
Terceira organização
Quarta organização
Como resultado, uma tabela simples foi criada no HTML com sucesso:
Etapa 4: estilo o contêiner div
Para estilizar o contêiner Div, primeiro acesse -o com a ajuda de “#conteúdo principal”E aplique o estilo CSS de acordo com sua preferência:
#conteúdo principal preenchimento: 20px 30px; margem: 40px 140px; Fronteira: 3px verde pontilhado;
Para fazer isso, aplicamos as propriedades abaixo da lista:
““preenchimento”Determina o espaço em branco ao redor do elemento dentro do limite definido.
““margem”É usado para especificar o espaço fora da fronteira.
““fronteira”É utilizado para definir um limite ao redor do elemento definido.
Saída
Etapa 5: aplique o estilo na mesa
Acesse a tabela com a ajuda da classe da tabela e aplique o estilo com a ajuda das propriedades do CSS:
.Tabela principal Fronteira: 4px Ridge Blue; preenchimento: 20px 30px; Background-Color: RGB (135, 197, 247);
Nesse caso, aplicamos o “fronteira","preenchimento", e "cor de fundo”Propriedades. O "cor de fundo”Propriedade determina a cor na parte traseira do elemento definido.
Etapa 6: Aplique o estilo em linhas de mesa e colunas
Acesse o "mesa", Junto com linhas"tr"E dados"TD”:
Tabela TR TD borda: 3px verde sólido;
Então, aplique o “fronteiraPropriedade CSS para adicionar o limite ao redor das linhas de mesa e células.
Saída
Mova -se em direção à próxima seção se quiser tornar a mesa aninhada.
Como criar/fazer uma tabela aninhada em html?
Para fazer uma tabela aninhada em HTML, primeiro, crie uma tabela com o “
”Elemento e defina linhas dentro da tabela. Então, adicione o “
”Elemento para adicionar os dados dentro dos dados. Dentro de "
”Abertura e fechamento da tag, insira“
”Para criar uma mesa aninhada dentro da mesa.
Para implicações práticas, você deve tentar as instruções declaradas abaixo.
Etapa 1: Crie um contêiner "div"
Primeiro, crie um contêiner usando o “”Com um atributo de classe dentro da tag div.
Etapa 2: Insira o cabeçalho
Em seguida, adicione um título utilizando o “”Tag e incorporar texto entre a tag.
Etapa 3: Faça a mesa
Crie uma tabela com a ajuda do “
”Tag e adicione“
" e "
”.Para adicionar o texto dentro da tabela.
Etapa 4: Crie uma tabela aninhada
Dentro de "
”Elemento, defina outro“
”Elemento para criar uma tabela aninhada dentro da tabela principal. Depois disso, adicione dados de acordo com sua necessidade:
Site do tutorial Linuxhint
Primeira organização
Segunda organização
Empregado 1
Empregado 2
Funcionário 3
Funcionário 4
Terceira organização
Quarta organização
Empregado 1
Empregado 2
Funcionário 3
Funcionário 4
Observação: Os usuários podem adicionar o maior número possível de tabelas
elemento da tabela principal.
Pode ser visto na saída a seguir que a tabela aninhada foi criada com sucesso:
Etapa 4: Tabela aninhada de estilo
Acesse a tabela aninhada usando o ID com o seletor. No nosso caso, para acessar a tabela utilizando o ““#mesa aninhada”E aplique o estilo com a ajuda das propriedades do CSS:
Nós aplicamos o “fronteira","cor", e "cor de fundoPropriedades e defina o valor de acordo com o desejo na tabela aninhada.
Saída
Isso se tratava de criar uma tabela aninhada em HTML.
Conclusão
Para fazer uma tabela aninhada em HTML, primeiro, crie uma tabela utilizando o “
" marcação. Em seguida, defina as linhas com a ajuda do “
”Tag e adicione dados usando“
”. Depois disso, dentro do “
”Tag, crie outra tabela tentando o mesmo método. Os usuários também podem aplicar propriedades CSS para estilizar a tabela e a tabela aninhada. Este post demonstrou o método para criar a tabela aninhada em HTML.
