th, scope ja caption-elementti
Antakaa taulukolle otsikko ja asianmukaiset otsikkosolut.
th, scope ja caption-elementti on ilmainen Web Accessibility Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Web Accessibility Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Web Accessibility Academy-kurssilla on yhteensä 4 oppituntia.
Tietotaulukot välittävät merkityksen
Aito tietotaulukko näyttää rivien ja sarakkeiden väliset suhteet. Kun merkitset sen oikein, ruudunlukija voi ilmoittaa, mihin otsikkoon kukin arvo kuuluu.
Pelkkä taulukko hämmentää
Jos jokainen solu on vain td, ruudunlukija lukee numerot ilman asiayhteyttä. Käyttäjä kuulee arvot, mutta ei koskaan opi, mitä ne tarkoittavat.
<table>
<tr><td>Name</td><td>Score</td></tr>
<tr><td>Ada</td><td>92</td></tr>
</table>Otsikkosoluissa käytetään th-elementtiä
Vaihda otsikkosolut td-elementeistä th-elementeiksi. Nyt selain tietää, että solut nimeävät tiedot eivätkä sisällä niitä, ja käsittelee ne otsikkoina.
<tr><th>Name</th><th>Score</th></tr>Miksi th muuttaa kaiken
th-elementti ilmoitetaan otsikkona, ja se voidaan yhdistää kuvaamiinsa soluihin. Tämä yhteys antaa irrallisille numeroille niiden merkityksen.
scope-attribuutti
Lisää jokaiseen th-elementtiin scope-attribuutti ja kerro, mitkä solut se kattaa. Arvo col tarkoittaa sarakeotsikkoa ja row riviotsikkoa.
<th scope="col">Score</th>scope=col yläotsikoille
Käytä sarakkeen yläosassa olevassa otsikossa arvoa scope=col. Jokainen sen alapuolinen solu perii tämän otsikon käyttäjän siirtyessä alaspäin.
<th scope="col">City</th>scope=row sivuotsikoille
Käytä rivin ensimmäisessä solussa arvoa scope=row, kun solu nimeää kyseisen rivin, esimerkiksi vasemmassa reunassa olevan henkilön tai päivämäärän.
<th scope="row">Ada</th>caption nimeää taulukon
caption-elementti antaa koko taulukolle otsikon. Ruudunlukijaa käyttävät kuulevat sen ensin ja tietävät, mitä he ovat tutkimassa.
<table>
<caption>Quiz scores by student</caption>
</table>caption tulee ensimmäiseksi
Sijoita caption taulukon ensimmäiseksi lapseksi heti avaavan tagin jälkeen. Muut sijainnit ovat virheellisiä, ja selain saattaa jättää elementin huomiotta.
caption on otsikkoa parempi
Pelkkä lähellä oleva h2 ei riitä. caption on ohjelmallisesti yhdistetty taulukkoon, joten käyttäjät löytävät otsikon myös siirtyessään taulukosta toiseen.
Täydellinen yksinkertainen taulukko
caption, th-elementeistä koostuva scope-määritteillä varustettu otsikkorivi ja sen jälkeen tietorivit. Tämä perusta tekee useimmista yksinkertaisista taulukoista täysin saavutettavia ilman ARIAa.
<table>
<caption>Scores</caption>
<tr><th scope="col">Name</th><th scope="col">Score</th></tr>
<tr><th scope="row">Ada</th><td>92</td></tr>
</table>Pikatarkistus
Merkitset taulukon yläosassa olevaa sarakeotsikkoa.
Kertaus: kolme rakennuspalikkaa
Opit saavutettavien taulukoiden kolmikon: th otsikoille, scope kohdistamaan ne ja caption nimeämään taulukon. Suurin osa työstä on näin tehty.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”th, scope ja caption-elementti” ilmainen?
Kyllä – oppitunnin ”th, scope ja caption-elementti” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Web Accessibility Academy-kurssin, päivitä CoddyKit PROhon. Web Accessibility Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”th, scope ja caption-elementti”?
Antakaa taulukolle otsikko ja asianmukaiset otsikkosolut. Harjoittelet Web Accessibility Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Web Accessibility Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Web Accessibility Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”th, scope ja caption-elementti”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Web Accessibility Academy-oppitunnilla?
Kyllä. Jokainen Web Accessibility Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- th, scope ja caption-elementti
- Rivi- ja sarakeotsikot oikein tehtynä
- Monimutkaiset taulukot: headers- ja id-yhdistelmät
- Asettelutaulukot ovat ansa