Koduleht » Kodeerimine » HTML-tabeli juurdepääsetavuse parandamine märgistusega

    HTML-tabeli juurdepääsetavuse parandamine märgistusega

    Veebi juurdepääsetavus viitab veebirakenduste kavandamisele nii, et nägemispuudega inimesed saavad seda hõlpsasti kasutada. Mõned neist kasutajatest toetuvad ekraanilugejad veebilehtede sisu lugemiseks. Ekraani lugejad tõlgendada leheküljel olevat koodi ja lugeda selle sisu kasutajale.

    on laialdaselt kasutatav HTML-element andmete struktureeritud kuvamiseks veebilehtedel. Selle disain ulatub lihtsatest kuni keerulisteni, koos rea pealkirjadega, ühendatud pealkirjadega jne.

    Kui tabelit pole silmas peetud juurdepääsetavusega, on ekraani lugejatele raske keerulisi tabeleid kasutajate jaoks mõttekas tõlkida. Seega, et muuta keerulised HTML-tabelid hõlpsamini arusaadavaks, peame me kättesaadavuse tagamiseks veenduge, et päised, veergu rühmad, reagrupid jne on selgelt määratletud. Me näeme allpool, kuidas see on märgistuses.

    Scope atribuut

    Isegi lihtsa laua jaoks

    märgistus koos ulatus = "col" aitab abitehnoloogial tuvastada, et samas veerus olevad lahtrid on õpilaste nimed.

    Samamoodi nagu rakud

    sisaldavad ulatus = "colgroup" aitab kasutajatel tuvastada, et need lahtrid, mis järgnevad kolonnirühmale, on seotud selle konkreetse objektiga.

    Siis on olemas

    märgistus koos ulatus = "rida" mis määrab, et samasse rida järgnevad lahtrid, mis sisaldavad “klassi” teavet selle konkreetse õpilase nime kohta.

    Rühmarühmad

    Nüüd liigume teise näite juurde, sellel näitel on peaaegu sama tabel nagu ülaltoodud, välja arvatud juhul, kui vahetame rea ja veeru päiseid, nii et saame töötada reagruppidega.

     
    sildi, mis määratleb selgelt päised, saate selle kättesaadavust parandada reguleerimisala atribuut ja ei anna teed segadusele, mis võib tekkida sarnast tüüpi andmetest rakkudes.

    Töötaja nimi Töötajate kood Projekti kood Töötaja määramine
    John Doe 32456 456789 Direktor
    Miriam Luther 78902 456789 Asedirektor

    Mida teeb ulatuse atribuut? Vastavalt W3C-le:

    Teisisõnu aitab see andmesidemeid seostada nende vastavate päisrakkudega.

    Pange tähele, et ülaltoodud näites saab lülituda

    jaoks . Niikaua kui see on reguleerimisala on väärtus col, seda tõlgendatakse vastava veeru päisena.

    The reguleerimisala atribuudil võib olla üks neist neljast väärtusest; col, rida, rühma rühm, colgroup viidata veeru päisele, rea päisele, veergude päisele ja rea ​​ridade päisele.

    Keerulised tabelid

    Nüüd lähme edasi keerulisemale tabelile.

    Ülal on tabel, mis loetleb klassis olevad õpilased ja nende klassid praktikas ja teoorias kolme teema kohta.

    Siin on selle HTML-kood. Tabelit on kasutatud rida ja colspan luua andmelementide jaoks ühendatud päised.

    Õpilase nimi Bioloogia Keemia Füüsika
    Praktiline Teooria Praktiline Teooria Praktiline Teooria
    John Doe A A+ B A A A-
    Miriam Luther A A C C+ A A-

    Ülaltoodud tabelis on iga andmeelement, mis on iga tabeli rakk klassi kuvamine, on seotud kolme teabega:

    • Milline õpilane see klass kuulub??
    • Milline teema kuulub sellele klassile??
    • Kas see klass on praktilise või teooria osa jaoks?

    Need kolm teavet määratletakse struktuurselt ja visuaalselt kolme eri tüüpi päisrakkudes:

    • Õpilase nimi
    • Teema nimi
    • Praktiline või teoreetiline

    Määratleme sama juurdepääsetavuse jaoks.

    Õpilase nimi Bioloogia Keemia Füüsika
    Praktiline Teooria Praktiline Teooria Praktiline Teooria
    John Doe A A+ B A A A-
    Miriam Luther A A C C+ A A-

    Ülaltoodud märgistusena oleme lisanud reguleerimisala lahtritesse, mis sisaldavad andmeelementide pealkirjainfot.

    Veerg Grupp

    Bioloogia, keemia ja füüsika rakud seotakse iga kahe veeruga (teooria ja praktiline). Lihtsalt lisades colspan = "2" ei tekita veergu, see näitab ainult seda, et konkreetne rakk peab hõivama kaks lahtri väärtust.

    Veerude grupi loomiseks peate kasutama colgroup ja seejärel lisa span omistage sellele, märkides, mitu veergu veerg grupp sisaldab.

    The

    Õpilase nimi Bioloogia John Doe
    Teema John Doe Miriam Luther
    Bioloogia Praktiline A A
    Teooria A+ A
    Keemia Praktiline B C
    Teooria A C+
    Füüsika Praktiline A A
    Teooria A- A-

    Nüüd, kui meil on näidis, et koos töötada, loome alguses rida rühmade loomist, nagu me eelmise näite veerühmade jaoks.

    Samas ei saa rea ​​gruppe luua sellist märgist kasutades nagu colgroup sest ei ole rühma rühm element.

    HTML ridad on tavaliselt rühmitatud , ja elemente. Üks HTML

    elemendil võib olla üks , üks ja mitu . Me kasutame mitu tbody meie tabelis, et luua rühmi, ja lisage päisrakkudele vastav rakendusala.

    Teema John Doe Miriam Luther
    Bioloogia Praktiline A A
    Teooria A+ A
    Keemia Praktiline B C
    Teooria A C+
    Füüsika Praktiline A A
    Teooria A- A-

    Oleme lisanud read “Praktiline” ja “Teooria” igas tbody rida rühmade loomine kahe reaga. Oleme lisanud ka kohaldamisala = "reagrupp" lahtritesse, mis sisaldavad nende kahe rea pealkirjainfot (mis on antud juhul nende klasside nimed).

    Nüüd loe: võrdne veeru kõrgus CSS-ga