Kaip pagerinti HTML lentelės prieinamumą su žymėjimu
Interneto prieinamumas - tai interneto programų projektavimas taip, kad žmonėms, turintiems regėjimo negalią, jį būtų lengva naudoti. Kai kurie iš šių vartotojų pasitiki ekrano skaitytuvai skaityti tinklalapių turinį. Ekrano skaitytuvai interpretuoti puslapyje esantį kodą ir skaityti jo turinį vartotojui.
yra plačiai naudojamas HTML elementas, rodantis duomenis struktūrizuotu būdu tinklalapiuose. Jo dizainas svyruoja nuo paprastų iki sudėtingų, pilnas su eilių antraštėmis, sujungtomis antraštėmis ir kt.
Jei lentelė nėra sukurta atsižvelgiant į prieinamumą, ekrano skaitytojams bus sunku išversti duomenis sudėtingose lentelėse naudotojams. Taigi, norint, kad sudėtingos HTML lentelės būtų lengviau suprantamos, prieinamumui, turime užtikrinti, kad antraštės, stulpelių grupės, eilių grupės ir tt būtų aiškiai apibrėžtos. Toliau matysime, kaip tai yra pasiektas žymėjimas.
Taikymo sritis
Net ir paprastas stalas su
žyma, kuri aiškiai apibrėžia antraštes, galite pagerinti jos prieinamumą taikymo sritis atributas ir nesuteikia jokios painiavos, kuri gali kilti dėl panašių tipų duomenų ląstelėse.
Darbuotojo vardas
Darbuotojų kodas
Projekto kodas
Darbuotojų paskyrimas
John Doe
32456
456789
Direktorius
Miriam Luther
78902
456789
Direktoriaus pavaduotojas
Ką daro apimties atributas? Pagal W3C:
Kitaip tariant, ji padeda susieti duomenų langelius su jų atitinkamomis antraštėmis.
Atkreipkite dėmesį, kad aukščiau pateiktame pavyzdyje galite perjungti
dėl
. Tol, kol jos taikymo sritis turi vertę col, ji bus aiškinama kaip atitinkama stulpelio antraštė.
The taikymo sritis atributas gali turėti bet kurią iš šių keturių reikšmių; col, eilutė, eilutės grupė, colgroup nukreipti į stulpelio antraštę, eilutės antraštę, stulpelių grupę ir antraščių grupę.
Sudėtingos lentelės
Dabar pereikime prie sudėtingesnės lentelės.
Aukščiau yra lentelė, kurioje išvardyti klasėje esantys studentai ir jų klasė praktiškai ir teoriškai trims dalykams.
Čia yra HTML kodas. Lentelė naudojama eilutės ir colspan sukurti sujungtas antraštes duomenų langeliams.
Studento vardas
Biologija
Chemija
Fizika
Praktinis
Teorija
Praktinis
Teorija
Praktinis
Teorija
John Doe
A
A+
B
A
A
A-
Miriam Luther
A
A
C
C+
A
A-
Pirmiau pateiktoje lentelėje kiekvienas duomenų langelis, ty kiekvienas lentelės langelis rodomas įvertinimas, yra susieta su trimis informacija:
Kuris studentas priklauso šiai kategorijai?
Kuris dalykas priklauso šiai kategorijai??
Ar ši klasė priskiriama praktiniam ar teoriniam skyriui?
Šios trys informacija struktūriškai ir vizualiai apibrėžta trimis skirtingais antraštės elementų tipais:
Studento vardas
Dalyko pavadinimas
Praktinis ar teorinis
Nustatykite tą patį prieinamumui.
Studento vardas
Biologija
Chemija
Fizika
Praktinis
Teorija
Praktinis
Teorija
Praktinis
Teorija
John Doe
A
A+
B
A
A
A-
Miriam Luther
A
A
C
C+
A
A-
Minėtame žymėjime pridėjome taikymo sritis ląstelėse, kuriose yra informacijos apie duomenų langelius.
Stulpelių grupė
Biologijos, chemijos ir fizikos ląstelės turi būti susietos su dviejų stulpelių grupe (teorija ir praktika). Tiesiog pridėkite colspan = "2" nesukuria stulpelių grupių, tai tik rodo, kad konkreti ląstelė turi užimti dvi ląstelių vertės erdvę.
Norėdami sukurti stulpelių grupę, turite naudoti colgroup ir tada pridėkite span priskirti jam, nurodant, kiek stulpelių yra stulpelių grupė.
The
Studento vardas
žymėjimas su taikymo sritis = "col" padeda pagalbinei technologijai nustatyti, kad toje pačioje skiltyje pateiktos ląstelės yra studentų pavadinimai.
Panašiai ir ląstelės
Biologija
kurių sudėtyje yra taikymo sritis = "colgroup" padeda vartotojams nustatyti, kad duomenys, esantys ląstelių grupėje, esančioje stulpelio grupėje, kurią jis perneša, yra susiję su tuo konkrečiu objektu.
Tada yra
John Doe
žymėjimas su Apimtis = "eilutė" kuris apibrėžia, kad ląstelės, kurios ją seka toje pačioje eilutėje, yra “klasė” informacija apie tą konkrečią studento vardą.
Eilutės grupės
Dabar leiskite mums pereiti į kitą pavyzdį, šiame pavyzdyje bus beveik ta pati lentelė, kaip ir aukščiau, išskyrus tai, kad pakeisime eilutės ir stulpelio antraštes, todėl galėsime dirbti su eilutės grupėmis.
Tema
John Doe
Miriam Luther
Biologija
Praktinis
A
A
Teorija
A+
A
Chemija
Praktinis
B
C
Teorija
A
C+
Fizika
Praktinis
A
A
Teorija
A-
A-
Dabar, kai mes turime pavyzdį, kad galėtume dirbti, pradėkime nuo eilės grupių kūrimo, kaip ir ankstesnių pavyzdžių stulpelių grupėms.
Tačiau eilutės grupės negali būti sukurtos naudojant tokį žymą colgroup nes nėra eilutės grupė elementas.
HTML eilutės paprastai sugrupuojamos naudojant , ir elementus. Vienas HTML
elementas gali turėti vieną , vienas ir daug . Mes naudojame kelis tbody mūsų lentelėje, norėdami sukurti eilutės grupes ir pridėti atitinkamą taikymo sritį antraštėms.
Tema
John Doe
Miriam Luther
Biologija
Praktinis
A
A
Teorija
A+
A
Chemija
Praktinis
B
C
Teorija
A
C+
Fizika
Praktinis
A
A
Teorija
A-
A-
Pridėjome eilutes “Praktinis” ir “Teorija” kiekviename tbody sukurti eilių grupes su dviem eilėmis kiekvienoje. Mes taip pat pridėjome Apimtis = "eilutė" langeliuose, kuriuose yra antraštės informacija apie šias dvi eilutes (tai yra temos pavadinimas, kuris priklauso šioje byloje).
Dabar perskaitykite: vienodas stulpelio aukštis su CSS
