Mikä on taulukon kuvatekstien merkitys?
Taulukon otsikoilla taulukoille annetaan otsikoita, jotta käyttäjä voi itse määritellä, mitä kukin taulukko tarkoittaa ja miten sen sisältämää tietoa hyödynnetään. Kuvatekstit voivat myös auttaa numeroimaan verkkosivun taulukot, jotta niiden sisältämät tiedot ovat helpommin käytettävissä.
Kuvatekstit antavat tarkan kontekstin jokaiselle asiakirjan tai verkkosivun taulukolle, jossa on suuri määrä taulukoita. Lisäksi jäsennellyt kuvatekstit varmistavat, että lukijat ymmärtävät nopeasti, mitä dataa kussakin taulukossa on.
Kuinka käyttää taulukon otsikkoa Tailwind CSS:ssä?
Tailwind CSS:ssä taulukkoon lisätään kuvateksti '
Esimerkki: Taulukon otsikon lisääminen sekä taulukon ylä- että alaosaan
Seuraavassa koodissa lisäämme 'otsikon' sekä taulukon ylä- että alaosaan seuraavasti:
< pöytä >
< pöytä luokkaa = 'min-w-full border border-grey-300 jako-y jakaa-harmaa-300' >
< thead >
< tr >
< th luokkaa = 'py-2 px-4 bg-grey-100 border-b' >
Nimi
< / th >
< th luokkaa = 'py-2 px-4 bg-grey-100 border-b' >
Sähköposti
< / th >
< th luokkaa = 'py-2 px-4 bg-grey-100 border-b' >
ID
< / th >
< th luokkaa = 'py-2 px-4 bg-grey-100 border-b' >
Ottaa yhteyttä
< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td luokkaa = 'py-2 px-4 border-b' > James < / td >
< td luokkaa = 'py-2 px-4 border-b' > james@tsl.com < / td >
< td luokkaa = 'py-2 px-4 border-b' > 61101-1234567-8 < / td >
< td luokkaa = 'py-2 px-4 border-b' > 123-456-7890 < / td >
< / tr >
< tr >
< td luokkaa = 'py-2 px-4 border-b' > Michael < / td >
< td luokkaa = 'py-2 px-4 border-b' > michael@tsl.com < / td >
< td luokkaa = 'py-2 px-4 border-b' > 61101-8765432-1 < / td >
< td luokkaa = 'py-2 px-4 border-b' > 098-765-4321 < / td >
< / tr >
< tr >
< td luokkaa = 'py-2 px-4 border-b' > David < / td >
< td luokkaa = 'py-2 px-4 border-b' > David@TSL.com < / td >
< td luokkaa = 'py-2 px-4 border-b' > 54791-1234567-8 < / td >
< td luokkaa = 'py-2 px-4 border-b' > 123-786-4290 < / td >
< / tr >
< tr >
< td luokkaa = 'py-2 px-4 border-b' > Peter < / td >
< td luokkaa = 'py-2 px-4 border-b' > peter@tsl.com < / td >
< td luokkaa = 'py-2 px-4 border-b' > 54300-1234567-8 < / td >
< td luokkaa = 'py-2 px-4 border-b' > 611-239-7890 < / td >
< / tr >
< / tbody >
< kuvateksti >
Työntekijöiden henkilötiedot
< / kuvateksti >
< / pöytä >
< kuvateksti >
Yrityksen nimi
< / kuvateksti >
Noudata näitä vaiheita yllä olevassa koodissa:
- Luo taulukko käyttämällä '
' -tunniste. - Määritä taulukon muotoilu apuohjelmaluokan kautta.
- Määritä taulukon otsikot 'Nimi', 'Sähköposti', 'ID' ja 'Yhteystiedot' ' ' -tunniste.
- Määritä tiedot kaikille neljälle taulukossa olevalle henkilölle käyttämällä ' ' ja '
”tunnisteet. - Määritä sitten taulukon otsikko '
” -tagia ja sulje taulukko. - Lopuksi lisäämme toisen '
' -tunnisteen, jotta taulukon alareunaan lisätään taulukon otsikko. - Huomautus : Se on sellainen, että taulukon yläosassa oleva taulukon otsikko määritetään
-tunnisteen sisällä, kun taas alateksti on määritettävä taulukon sulkevan tagin jälkeen.
Lähtö
Johtopäätös
Taulukoiden kuvatekstit ovat tärkeitä, jotta ne antavat lisätietoja taulukoista ja niiden sisältämistä tiedoista. Näin ollen taulukoiden saavutettavuus moninkertaistuu sekä käyttäjien että lukijoiden kannalta. Kuvateksti tarjoaa tiiviisti lisätietoa taulukosta, joka on nähtävissä myös verkkokuvauksessa.
- Määritä tiedot kaikille neljälle taulukossa olevalle henkilölle käyttämällä ' ' ja '