Com utilitzar el subtítol de taula a Tailwind

Com Utilitzar El Subtitol De Taula A Tailwind



A ' Títol de la taula ” s'utilitza per donar un títol o nom a una taula concreta. Aquest subtítol facilita que l'usuari torni a la taula de destinació quan maneja grans quantitats de dades contingudes en nombroses taules. Els subtítols són títols breus que mostren què signifiquen i amb què es relacionen les dades contingudes a la taula. El subtítol es pot col·locar a la part superior de la taula o a sota segons el tema de format de l'usuari.

Quina és la importància dels subtítols de les taules?

Els 'títols de taula' s'utilitzen per donar títols a les taules perquè l'usuari pugui definir què significa cada taula i com utilitzar les dades que hi conté. Els subtítols també poden ajudar a numerar les taules d'una pàgina web per fer-ne més accessibles les dades.

Els subtítols donen el context exacte a cada taula d'un document o pàgina web on hi ha un gran nombre de taules. A més, els subtítols estructurats asseguren que els lectors entenguin ràpidament quines dades hi ha a cada taula.







Com utilitzar un títol de taula a Tailwind CSS?

A Tailwind CSS, s'afegeix un títol a una taula utilitzant el ' ' etiqueta. Aquest títol especifica un títol i més informació sobre les dades de la taula.



Exemple: afegir un títol de taula tant a la part superior com a la part inferior de la taula
Al codi següent, afegirem un 'títol' tant a la part superior com a la part inferior de la taula de la següent manera:



< taula >
< taula classe = 'mínim-w-bord complet border-gris-300 divide-y divideix-gris-300' >
< el cap >
< tr >
< th classe = 'py-2 px-4 bg-grey-100 vora-b' >
Nom
< / th >
< th classe = 'py-2 px-4 bg-grey-100 vora-b' >
Correu electrònic
< / th >
< th classe = 'py-2 px-4 bg-grey-100 vora-b' >
ID
< / th >
< th classe = 'py-2 px-4 bg-grey-100 vora-b' >
Contacte
< / th >
< / tr >
< / el cap >
< el cos >
< tr >
< td classe = 'py-2 px-4 vora-b' > Jaume < / td >
< td classe = 'py-2 px-4 vora-b' > James@TSL.com < / td >
< td classe = 'py-2 px-4 vora-b' > 61101-1234567-8 < / td >
< td classe = 'py-2 px-4 vora-b' > 123-456-7890 < / td >
< / tr >
< tr >
< td classe = 'py-2 px-4 vora-b' > Miquel < / td >
< td classe = 'py-2 px-4 vora-b' > Michael@TSL.com < / td >
< td classe = 'py-2 px-4 vora-b' > 61101-8765432-1 < / td >
< td classe = 'py-2 px-4 vora-b' > 098-765-4321 < / td >
< / tr >
< tr >
< td classe = 'py-2 px-4 vora-b' > David < / td >
< td classe = 'py-2 px-4 vora-b' > David@TSL.com < / td >
< td classe = 'py-2 px-4 vora-b' > 54791-1234567-8 < / td >
< td classe = 'py-2 px-4 vora-b' > 123-786-4290 < / td >
< / tr >
< tr >
< td classe = 'py-2 px-4 vora-b' > Pere < / td >
< td classe = 'py-2 px-4 vora-b' > Peter@TSL.com < / td >
< td classe = 'py-2 px-4 vora-b' > 54300-1234567-8 < / td >
< td classe = 'py-2 px-4 vora-b' > 611-239-7890 < / td >
< / tr >
< / el cos >
< subtítol >
Informació personal dels empleats
< / subtítol >
< / taula >
< subtítol >
Nom de l'empresa
< / subtítol >

Seguiu aquests passos al codi anterior:





  • Creeu una taula amb el ' ' etiqueta.
  • Especifiqueu el format de la taula mitjançant la classe d'utilitat.
  • Definiu les capçaleres de la taula de 'Nom', 'Correu electrònic', 'ID' i 'Contacte' mitjançant el ' ' etiqueta.
  • Definiu les dades dels 4 membres de la taula mitjançant el ' ' i la ' etiquetes.
  • A continuació, especifiqueu el títol de la taula amb el botó “ Etiqueta i tanca la taula.
  • Finalment, afegim una altra etiqueta '' al final per aplicar un títol de taula a la part inferior de la taula.
  • Nota : és tal que el títol de la taula a la part superior de la taula s'especifica dins de l'etiqueta '', mentre que el subtítol inferior s'ha d'especificar després de l'etiqueta de tancament de la taula.

Sortida

Conclusió

Els subtítols de les taules són vitals per donar més informació sobre les taules i les dades que hi conté. En conseqüència, l'accessibilitat de les taules s'incrementa moltíssim tant per als usuaris com per als lectors. El subtítol proporciona una informació addicional sobre una taula de manera concisa que també es pot veure a la descripció en línia.