Qual é o propósito da célula da tabela no Tailwind

Qual E O Proposito Da Celula Da Tabela No Tailwind



Ao lidar com grandes conjuntos de dados, é importante criar um sistema de compreensão. Isso ajuda a gerenciar todos os valores e nos permite fazer inferências valiosas de nossos dados coletados e tomar decisões informadas. Existem muitas técnicas eficientes de representação de dados e uma das mais importantes é na forma de tabelas.

Finalidade da Tabela-Célula

Uma Table-Cell é uma entrada individual dentro de uma tabela que é composta por várias outras células iguais a ela. O principal objetivo de uma célula de tabela é registrar dados de maneira ordenada para facilitar a compreensão e compreensão. Significa uma posição particular dentro de uma tabela na qual uma entrada está contida.

Tipos de Tabela-Células

Uma tabela em HTML tem principalmente dois tipos de células. Estes são ' Células de Cabeçalho ' e ' Células de dados ”. Mais detalhes sobre suas diferenças e semelhanças são dados abaixo.







Células de Cabeçalho

As células de cabeçalho são representadas por “ ” em HTML Tailwind CSS. Estes compõem os títulos das colunas em uma tabela. Os cabeçalhos definem quais serão todos os valores na coluna específica. Exemplos de cabeçalhos são Nome, Endereço de e-mail, Número de contato, CPF, etc.



A célula de cabeçalho de uma tabela estará no topo da coluna e as entradas abaixo serão as células de dados. Essas células também possuem formatação específica para diferenciá-las das células de dados que seguem abaixo. As células de cabeçalho são especificadas para ter um tamanho de fonte maior e letras em negrito para adicionar significado ao conteúdo nas células de dados.



Exemplo
No código abaixo, criamos uma célula de cabeçalho da tabela por meio da tag “”:





< mesa >
< cabeça >
< tr >
< º > Cabeçalho Célula 01 < / º >
< / tr >
< / cabeça >
< / mesa >

Neste bloco de código:

  • Crie uma tabela através da tag “”.
  • Agora, use a tag “
  • ”.
  • Por fim, feche as tags “
  • ”, “” e “
    ” para criar uma célula de cabeçalho da tabela.
  • Em seguida, defina a entrada da célula “ Cabeçalho Célula 01 ” usando a tag “
  • ” dentro da tag “
    ”, respectivamente, para completar a célula da tabela.

Saída



Como visto, a célula do cabeçalho é exibida em negrito por padrão.

Células de dados

As Células de Dados são representadas pelo “ ” em HTML Tailwind CSS. Essas células contêm todas as informações dentro de uma tabela. Eles estão listados abaixo das células do cabeçalho e contêm dados para todas as entradas de um cabeçalho específico. Por exemplo, se a célula do cabeçalho for intitulada “Nome”, as células de dados abaixo dela conterão os nomes de todas as pessoas para as quais os dados são registrados.

As células de dados também têm uma formatação específica. Eles têm um tamanho de fonte menor do que as células do cabeçalho e contêm texto simples ou números, conforme os requisitos. É tal que as células de dados sob a célula de cabeçalho 'Nome' terão os nomes dos indivíduos em questão, por exemplo, John, David, Michael e James.

Exemplo
O código para criar uma célula de dados da tabela usando o “

” é fornecida abaixo: < cabeça >
< estilo >
mesa {
colapso de fronteira: colapso;
}
td {
fronteira : 1px preto sólido;
preenchimento: 10px;
}
< / estilo >
< / cabeça >
< corpo >
< mesa >
< tr >
< td >Tabela-Célula< / td >
< / tr >
< / mesa >

As etapas a seguir explicam o código para criar uma célula de dados da tabela:

  • A tag “