Notă: Tabel în modul „hassum”

Acest studiu de caz utilizează tabelul cu opțiunea „hassum”.

Prezentare generală

Transformați un tabel cu informații nutriționale într-un tabel HTML nu se poate face direct. De ce? pur și simplu relația dintre date și antet nu este clar definită și atunci când nevoia de a fi compatibil cu WCAG Nivelul AA devine mai dificilă.

Acest studiu de caz necesită citirea documentației despre conceptul de utilizare a tabelului

Acest studiu de caz nu se referă la modul în care creați o masă HTML compatibilă cu nivelul AA WCAG, ci este activat cum se aplică conceptul de utilizare a tabelului.

Sursa de date originală

informații

Rezultatul

Per 2 chipsuri (25 g)

Analiza tabelului

Inainte de.

Înainte de a începe analiza tabelului, este important să înțelegeți toate informațiile incluse în tabel.

Legendă

Aproape întotdeauna acolo, legenda tabelului este adesea prima informație furnizată. Titlul tabelului este considerat a fi o celulă de antet de grup la nivelul 1.

Descrierea tabelului/Rezumatul tabelului

Există o diferență între un rezumat de tabel și un rezumat de grup. Rezumatul tabelului este o descriere a tabelului. Rezumatul grupului este adesea reprezentat de un rând numit „Total” după un grup de date.

Secțiunea antet grup de rânduri

Un tabel poate conține doar un titlu de grup de rânduri. Locația sa este întotdeauna înaintea oricărui grup de rânduri de date. Titlul grupului de rânduri conține întotdeauna coloana antetului tabelului cu descrierea celulelor sale, dacă există. Dacă un tabel are două sau mai multe titluri de grup de rânduri, faceți o îmbinare sau împărțiți tabelul. Este posibil ca un tabel să nu aibă un titlu de grup de rânduri.

Coloanele definite în antetul grupului de rânduri trebuie să aibă o reprezentare bună a structurii fiecărei celule din toate grupurile de rânduri ulterioare.

Row Group

Găsiți toate datele și grupul de rânduri rezumate care au o legătură directă cu subtitrarea din tabel. Divizați fiecare grup separat de o linie

Identificați și aplicați o categorie pentru fiecare grup de rânduri

Grupul de rânduri rezumate are o dimensiune mai mică (numărul de rânduri) decât un grup de rânduri de date. Un grup de rânduri rezumate trebuie să fie asociat cel puțin unui grup de rânduri de date. Uneori, grupul de rânduri rezumate are un antet/celulă de date patern diferit pentru un rând comparativ cu un rând din grupul de rânduri de date. Uneori, grupul de rânduri rezumate este combinat/combinat cu celula antetului grupului.

Grup de rânduri de date

Primul grup de rânduri este identificat cu litera A și al doilea cu litera B.

Rezumat grup rând

Identificați și găsiți nivelul de date al oricărui grup de sub rânduri

Acesta este un pas important, deoarece rândul de date și secvența grupului de rânduri de date din tabel vor fi influențate pentru a ilustra nivelul de date. De asemenea, prezența datelor rezumative într-un grup de sub rânduri ar schimba designul tabelului.

Grupul de rânduri "A"

Există două grupuri de sub rânduri. primul grup de sub rânduri este identificat cu litera AA și al doilea cu litera AB. Ambele sunt la nivelul 2.

Fiecare grup de sub rânduri are un grup de rânduri rezumate.

În ceea ce privește celălalt rând din grupul rând A, relația sa aparține grupului rând A de la nivelul 1.

Grupul de rânduri "B"

Grupul de rânduri "B", la nivelul 1, nu conține niciun grup de rânduri secundare.

Analiza tipului de celulă de date

Aici ne uităm la tipul celulei de date. Acest lucru ar ajuta la definirea și validarea grupului de rânduri de antet.

O celulă de date poate fi identificată de una sau mai multe celule de antet. O celulă de date este adesea calificată printr-o măsură unitară. Uneori, o celulă de date poate fi ascunsă într-un antet sau într-o altă celulă de date.

  1. Celula de date măsurată în "unitate"
  2. Celula de date măsurată în „g/mg”
  3. Celula de date măsurată în „%”

Completați informațiile din tabel

Antetul coloanei

În exemplul nostru, celula de date măsurată în unitate asociată antetului „Calorii” este considerată a fi un grup rezumat pentru toate datele din tabel

Cu identificarea celulei de date avem:

  • „Suma de”: antetul coloanei pentru antetul rândului, deja furnizat. Pentru claritate și tabel mai ușor, citiți cuvântul „de” este adăugat.
  • „Greutate”: titlu de coloană nouă emis din cel de-al doilea tip de celulă de date.
  • „% Valoare zilnică”: cunoașteți deja titlul coloanei și reprezintă al treilea tip de celulă de date

Antetul grupului de rânduri

În acest exemplu, am găsit două grupuri de rânduri de date la nivelul 1 și ambelor le lipsește o celulă de antet de grup. Grupul de rând rezumat este exclus aici deoarece partajează o celulă comună de antet de grup. O căutare despre Tabelul Fapte Nutritive a dezvăluit acest nume următor pentru fiecare grup de rânduri: „Minerale și vitamine” pentru grupul rând B și „Elemente nutritive” pentru grupul rând A.

Creați tabelul HTML

Cu analiza tabelului și informațiile despre tabel, acum putem codifica tabelul cu HTML. Conținutul francez a fost eliminat pentru claritate.

Un grup de rânduri rezumate este întotdeauna după un grup de rânduri de date. Ordinea pentru nivelul grupului de rânduri de date trebuie să fie de la cel mai scăzut nivel la cel mai înalt nivel.

Detaliile HTML5 și elementul rezumat sunt utilizate pentru a adăuga descrierea subtitrării din tabel. Este deschis în mod implicit

Aici, celula goală nu este o celulă de aspect, deoarece reprezintă absența datelor.

Inainte de

Per 2 chipsuri (25 g)

Vizualizare rapidă despre nivelul de date reprezentat cu antetul celulei

Același tabel, dar textul fiecărui antet de celulă a fost înlocuit cu nivelul de date