Qual è l'importanza delle didascalie delle tabelle?
Le 'didascalie delle tabelle' vengono utilizzate per dare titoli alle tabelle in modo che l'utente possa definire cosa significa ciascuna tabella e come utilizzare i dati in essa contenuti. Le didascalie possono anche aiutare a numerare le tabelle su una pagina Web per rendere i dati al loro interno più accessibili.
Le didascalie forniscono un contesto esatto a ciascuna tabella in un documento o in una pagina Web in cui è presente un numero elevato di tabelle. Inoltre, i sottotitoli strutturati assicurano che i lettori capiscano rapidamente quali dati sono contenuti all'interno di ciascuna tabella.
Come utilizzare una didascalia di tabella in Tailwind CSS?
In Tailwind CSS, una didascalia viene aggiunta a una tabella utilizzando il '
Esempio: aggiunta di una didascalia della tabella sia in alto che in basso della tabella
Nel codice seguente, aggiungeremo una 'didascalia' sia in cima che in fondo alla tabella come segue:
< tavolo >
< tavolo classe = 'min-w-bordo intero bordo-grigio-300 dividi-y dividi-grigio-300' >
< testa >
< tr >
< th classe = 'py-2 px-4 bg-grigio-100 bordo-b' >
Nome
< / th >
< th classe = 'py-2 px-4 bg-grigio-100 bordo-b' >
< / th >
< th classe = 'py-2 px-4 bg-grigio-100 bordo-b' >
ID
< / th >
< th classe = 'py-2 px-4 bg-grigio-100 bordo-b' >
Contatto
< / th >
< / tr >
< / testa >
< tbody >
< tr >
< td classe = 'py-2 px-4 bordo-b' > Giacomo < / td >
< td classe = 'py-2 px-4 bordo-b' > james@tsl.com < / td >
< td classe = 'py-2 px-4 bordo-b' > 61101-1234567-8 < / td >
< td classe = 'py-2 px-4 bordo-b' > 123-456-7890 < / td >
< / tr >
< tr >
< td classe = 'py-2 px-4 bordo-b' > Michael < / td >
< td classe = 'py-2 px-4 bordo-b' > michael@tsl.com < / td >
< td classe = 'py-2 px-4 bordo-b' > 61101-8765432-1 < / td >
< td classe = 'py-2 px-4 bordo-b' > 098-765-4321 < / td >
< / tr >
< tr >
< td classe = 'py-2 px-4 bordo-b' > Davide < / td >
< td classe = 'py-2 px-4 bordo-b' > David@TSL.com < / td >
< td classe = 'py-2 px-4 bordo-b' > 54791-1234567-8 < / td >
< td classe = 'py-2 px-4 bordo-b' > 123-786-4290 < / td >
< / tr >
< tr >
< td classe = 'py-2 px-4 bordo-b' > Peter < / td >
< td classe = 'py-2 px-4 bordo-b' > peter@tsl.com < / td >
< td classe = 'py-2 px-4 bordo-b' > 54300-1234567-8 < / td >
< td classe = 'py-2 px-4 bordo-b' > 611-239-7890 < / td >
< / tr >
< / tbody >
< didascalia >
Informazioni personali dei dipendenti
< / didascalia >
< / tavolo >
< didascalia >
Nome dell'azienda
< / didascalia >
Segui questi passaggi nel codice sopra:
- Crea una tabella usando il '
etichetta '. - Specificare la formattazione della tabella tramite la classe di utilità.
- Definire le intestazioni della tabella di 'Nome', 'E-mail', 'ID' e 'Contatto' tramite il '
etichetta '. - Definire i dati per tutti e 4 i membri del personale all'interno della tabella utilizzando il '
' e il ' ” tag. - Quindi, specifica la didascalia della tabella utilizzando '
tagga e chiudi il tavolo. - Infine, aggiungiamo un altro tag '
' alla fine per applicare una didascalia alla parte inferiore della tabella. - Nota : È tale che la didascalia della tabella nella parte superiore della tabella è specificata all'interno del tag '
' mentre la didascalia inferiore deve essere specificata dopo il tag di chiusura della tabella.
Produzione
Conclusione
Le didascalie delle tabelle sono fondamentali per fornire maggiori informazioni sulle tabelle e sui dati in esse contenuti. Di conseguenza, l'accessibilità delle tabelle è aumentata sia per gli utenti che per i lettori. La didascalia fornisce in modo conciso ulteriori informazioni su una tabella che possono essere visualizzate anche nella descrizione online.
- Quindi, specifica la didascalia della tabella utilizzando '