Qual é a importância das legendas de tabela?
As “legendas das tabelas” são usadas para dar títulos às tabelas para que o usuário possa definir o que cada tabela significa e como utilizar os dados nela contidos. As legendas também podem ajudar a numerar as tabelas em uma página da Web para tornar os dados nelas mais acessíveis.
As legendas fornecem o contexto exato para cada tabela em um documento ou página da Web onde há um grande número de tabelas. Além disso, as legendas estruturadas garantem que os leitores entendam rapidamente quais dados estão contidos em cada tabela.
Como usar uma legenda de tabela no Tailwind CSS?
No Tailwind CSS, uma legenda é adicionada a uma tabela usando o “
Exemplo: adicionar uma legenda de tabela à parte superior e inferior da tabela
No código a seguir, adicionaremos uma “legenda” na parte superior e inferior da tabela da seguinte forma:
< mesa >
< mesa aula = 'min-w-borda cheia border-gray-300 divide-y divide-gray-300' >
< cabeça >
< tr >
< º aula = 'py-2 px-4 bg-gray-100 borda-b' >
Nome
< / º >
< º aula = 'py-2 px-4 bg-gray-100 borda-b' >
< / º >
< º aula = 'py-2 px-4 bg-gray-100 borda-b' >
EU IA
< / º >
< º aula = 'py-2 px-4 bg-gray-100 borda-b' >
Contato
< / º >
< / tr >
< / cabeça >
< corpo >
< tr >
< td aula = 'py-2 px-4 borda-b' > James < / td >
< td aula = 'py-2 px-4 borda-b' > james@tsl.com < / td >
< td aula = 'py-2 px-4 borda-b' > 61101-1234567-8 < / td >
< td aula = 'py-2 px-4 borda-b' > 123-456-7890 < / td >
< / tr >
< tr >
< td aula = 'py-2 px-4 borda-b' > Michael < / td >
< td aula = 'py-2 px-4 borda-b' > michael@tsl.com < / td >
< td aula = 'py-2 px-4 borda-b' > 61101-8765432-1 < / td >
< td aula = 'py-2 px-4 borda-b' > 098-765-4321 < / td >
< / tr >
< tr >
< td aula = 'py-2 px-4 borda-b' > Davi < / td >
< td aula = 'py-2 px-4 borda-b' > David@TSL.com < / td >
< td aula = 'py-2 px-4 borda-b' > 54791-1234567-8 < / td >
< td aula = 'py-2 px-4 borda-b' > 123-786-4290 < / td >
< / tr >
< tr >
< td aula = 'py-2 px-4 borda-b' > Peter < / td >
< td aula = 'py-2 px-4 borda-b' > peter@tsl.com < / td >
< td aula = 'py-2 px-4 borda-b' > 54300-1234567-8 < / td >
< td aula = 'py-2 px-4 borda-b' > 611-239-7890 < / td >
< / tr >
< / corpo >
< rubrica >
Informações pessoais dos funcionários
< / rubrica >
< / mesa >
< rubrica >
Nome da companhia
< / rubrica >
Siga estas etapas no código acima:
- Crie uma tabela usando o “
' marcação. - Especifique a formatação da tabela por meio da classe de utilitário.
- Defina os cabeçalhos da tabela de “Nome”, “Email”, “ID” e “Contato” por meio do “ ' marcação.
- Defina os dados para todos os 4 funcionários da tabela usando o botão “
' e a ' ' Tag. - Em seguida, especifique a legenda da tabela usando o “
” e feche a tabela. - Por fim, adicionamos outra tag “
” no final para aplicar uma legenda na parte inferior da tabela. - Observação : é tal que a legenda da tabela na parte superior da tabela é especificada dentro da tag “
”, enquanto a legenda inferior precisa ser especificada após a tag de fechamento da tabela.
Saída
Conclusão
As legendas das tabelas são vitais para fornecer mais informações sobre as tabelas e os dados contidos nelas. Consequentemente, a acessibilidade das tabelas é aumentada tanto para os usuários quanto para os leitores. A legenda fornece um pouco mais de informação sobre uma tabela de forma concisa, que também pode ser visualizada na descrição online.
- Defina os dados para todos os 4 funcionários da tabela usando o botão “