Vad är betydelsen av tabelltexter?
'Tabell bildtexter' används för att ge titlar till tabeller så att användaren kan definiera vad varje tabell betyder och hur man använder data som finns i den. Bildtexter kan också hjälpa till att numrera tabellerna på en webbsida för att göra data i dem mer tillgängliga.
Bildtexter ger exakt sammanhang till varje tabell i ett dokument eller webbsida där det finns ett stort antal tabeller. Dessutom ser strukturerade bildtexter till att läsarna snabbt förstår vilken data som finns i varje tabell.
Hur man använder en tabelltext i Tailwind CSS?
I Tailwind CSS läggs en bildtext till en tabell med hjälp av '
Exempel: Lägga till en tabelltext i både toppen och botten av tabellen
I följande kod kommer vi att lägga till en 'caption' till både toppen och botten av tabellen enligt följande:
< tabell >
< tabell klass = 'min-v-full kant kant-grå-300 dividera-y dividera-grå-300' >
< thead >
< tr >
< th klass = 'py-2 px-4 bg-gray-100 border-b' >
namn
< / th >
< th klass = 'py-2 px-4 bg-gray-100 border-b' >
E-post
< / th >
< th klass = 'py-2 px-4 bg-gray-100 border-b' >
ID
< / th >
< th klass = 'py-2 px-4 bg-gray-100 border-b' >
Kontakt
< / th >
< / tr >
< / thead >
< kroppen >
< tr >
< td klass = 'py-2 px-4 border-b' > James < / td >
< td klass = 'py-2 px-4 border-b' > james@tsl.com < / td >
< td klass = 'py-2 px-4 border-b' > 61101-1234567-8 < / td >
< td klass = 'py-2 px-4 border-b' > 123-456-7890 < / td >
< / tr >
< tr >
< td klass = 'py-2 px-4 border-b' > Michael < / td >
< td klass = 'py-2 px-4 border-b' > michael@tsl.com < / td >
< td klass = 'py-2 px-4 border-b' > 61101-8765432-1 < / td >
< td klass = 'py-2 px-4 border-b' > 098-765-4321 < / td >
< / tr >
< tr >
< td klass = 'py-2 px-4 border-b' > David < / td >
< td klass = 'py-2 px-4 border-b' > David@TSL.com < / td >
< td klass = 'py-2 px-4 border-b' > 54791-1234567-8 < / td >
< td klass = 'py-2 px-4 border-b' > 123-786-4290 < / td >
< / tr >
< tr >
< td klass = 'py-2 px-4 border-b' > Peter < / td >
< td klass = 'py-2 px-4 border-b' > peter@tsl.com < / td >
< td klass = 'py-2 px-4 border-b' > 54300-1234567-8 < / td >
< td klass = 'py-2 px-4 border-b' > 611-239-7890 < / td >
< / tr >
< / kroppen >
< rubrik >
Personlig information om anställda
< / rubrik >
< / tabell >
< rubrik >
Företagets namn
< / rubrik >
Följ dessa steg i koden ovan:
- Skapa en tabell med hjälp av '
'-tagg. - Ange tabellformateringen via verktygsklassen.
- Definiera tabellrubrikerna för 'Namn', 'E-post', 'ID' och 'Kontakt' via '
'-tagg. - Definiera data för alla 4 av personalen i tabellen med hjälp av ' ' och den '
'-taggar. - Ange sedan tabelltexten med hjälp av '
” tagga och stäng bordet. - Slutligen lägger vi till en annan '
'-tagg i slutet för att tillämpa en tabelltext längst ner i tabellen. - Notera : Det är så att tabellens bildtext överst i tabellen anges i taggen '
', medan den nedre bildtexten måste anges efter tabellens avslutande tagg.
Produktion
Slutsats
Bildtexter till tabeller är viktiga för att ge mer information om tabeller och de data som finns i dem. Följaktligen ökar tillgängligheten till tabellerna mångfaldigt för både användare och läsare. Bildtexten ger lite extra information om en tabell på ett kortfattat sätt som också kan ses i onlinebeskrivningen.
- Ange sedan tabelltexten med hjälp av '