Hva er viktigheten av tabelltekster?
'Tabell bildetekster' brukes til å gi titler til tabeller slik at brukeren kan definere hva hver tabell betyr og hvordan de skal bruke dataene i den. Bildetekster kan også bidra til å nummerere tabellene på en nettside for å gjøre dataene i dem mer tilgjengelige.
Bildetekster gir nøyaktig kontekst til hver tabell i et dokument eller en nettside der det er et stort antall tabeller. Dessuten sørger strukturerte bildetekster for at leserne raskt forstår hvilke data som finnes i hver tabell.
Hvordan bruke en tabelltekst i Tailwind CSS?
I Tailwind CSS legges en bildetekst til en tabell ved å bruke '
Eksempel: Legge til en tabelltekst på både toppen og bunnen av tabellen
I den følgende koden vil vi legge til en 'bildetekst' til både toppen og bunnen av tabellen som følger:
< bord >
< bord klasse = 'min-v-full kant kant-grå-300 divider-y divider-grå-300' >
< thead >
< tr >
< th klasse = 'py-2 px-4 bg-gray-100 border-b' >
Navn
< / th >
< th klasse = 'py-2 px-4 bg-gray-100 border-b' >
E-post
< / th >
< th klasse = 'py-2 px-4 bg-gray-100 border-b' >
ID
< / th >
< th klasse = 'py-2 px-4 bg-gray-100 border-b' >
Kontakt
< / th >
< / tr >
< / thead >
< kroppen >
< tr >
< td klasse = 'py-2 px-4 border-b' > James < / td >
< td klasse = 'py-2 px-4 border-b' > james@tsl.com < / td >
< td klasse = 'py-2 px-4 border-b' > 61101-1234567-8 < / td >
< td klasse = 'py-2 px-4 border-b' > 123-456-7890 < / td >
< / tr >
< tr >
< td klasse = 'py-2 px-4 border-b' > Michael < / td >
< td klasse = 'py-2 px-4 border-b' > michael@tsl.com < / td >
< td klasse = 'py-2 px-4 border-b' > 61101-8765432-1 < / td >
< td klasse = 'py-2 px-4 border-b' > 098-765-4321 < / td >
< / tr >
< tr >
< td klasse = 'py-2 px-4 border-b' > David < / td >
< td klasse = 'py-2 px-4 border-b' > David@TSL.com < / td >
< td klasse = 'py-2 px-4 border-b' > 54791-1234567-8 < / td >
< td klasse = 'py-2 px-4 border-b' > 123-786-4290 < / td >
< / tr >
< tr >
< td klasse = 'py-2 px-4 border-b' > Peter < / td >
< td klasse = 'py-2 px-4 border-b' > peter@tsl.com < / td >
< td klasse = 'py-2 px-4 border-b' > 54300-1234567-8 < / td >
< td klasse = 'py-2 px-4 border-b' > 611-239-7890 < / td >
< / tr >
< / kroppen >
< bildetekst >
Personlig informasjon om ansatte
< / bildetekst >
< / bord >
< bildetekst >
Navn på firma
< / bildetekst >
Følg disse trinnene i koden ovenfor:
- Lag en tabell ved å bruke '
' stikkord. - Spesifiser tabellformateringen via verktøyklassen.
- Definer tabelloverskriftene for 'Navn', 'E-post', 'ID' og 'Kontakt' via ' ' stikkord.
- Definer dataene for alle 4 av personellet i tabellen ved å bruke ' ' og '
'-tagger. - Deretter spesifiser tabellteksten ved å bruke '
” tag og lukk bordet. - Til slutt legger vi til en annen «
»-tag på slutten for å bruke en tabelltekst nederst i tabellen. - Merk : Det er slik at tabellens bildetekst øverst i tabellen er spesifisert i «
»-taggen, mens den nederste bildeteksten må spesifiseres etter tabellens avsluttende tag.
Produksjon
Konklusjon
Bildetekster til tabeller er avgjørende for å gi mer informasjon om tabeller og dataene i dem. Følgelig er tilgjengeligheten til tabellene økt mangfoldig for både brukere og lesere. Bildeteksten gir en ekstra bit informasjon om en tabell på en kortfattet måte som også kan sees i den elektroniske beskrivelsen.
- Definer dataene for alle 4 av personellet i tabellen ved å bruke ' ' og '