Vejledning Tabeller (data tabeller)

Transkript

1 . Vejledning Tabeller (data tabeller) Datatabeller vs. Layouttabeller Beskrivelse af en tilgængelig datatabel Opret en tilgængelig (simpel) tabel indsæt eller fjern en række eller kolonne Indsæt spænd over kolonner og rækker Komplicerede tilgængelige datatabeller Ensartede layout/design på alle datatabeller ( Version 1.2 dato: ) Skrevet af: René R. Bode

2 1.0 Datatabeller vs. Layout tabeller En datatabel er en tabel, hvor indholdets placering og relationer i de anvendte rækker og kolonner formidler information. Tommelfingerregel: hvis din tabel giver mening som Excel-regneark, vil der sandsynligvis være tale om en datatabel. Hvis en tabel udelukkende anvendes til at opnå en bestemt sideopsætning, er der derimod tale om en layouttabel. Denne vejledning beskriver, hvordan du opretter og vedligeholder en tilgængelig datatabel. 1.1 Beskrivelse af en tilgængelig datatabel Tabeller er ikke tilgængelige for alle, især ikke brugere med skærmlæsere. Det er ikke så svært at forestille sig, hvorfor brugere af skærmlæsere ofte har store problemer med tabeller. Prøv selv at forestille dig, at du skal holde rede på en stor mængde informationer og deres indbyrdes relationer, og det skal du gøre med lukkede øjne og kun ud fra, at du hører, at hvert element bliver læst op løsrevet fra hinanden. Heldigvis er der teknikker i HTML-standarden, der gør opgaven mulig ved at fortælle om dataenes indbyrdes relationer. For tilgængelige datatabeller er der følgende retningslinjer - anvend: Summary til at give en beskrivelse af tabellens indhold. Tabeloverskrifter (table headers: <th>) til at identificere række- og kolonneoverskrifter. Scope til at angive kolonner og rækkers virkefelt. Her er HTML-koden for en (simpel) tilgængelig datatabel, hvor summary, th og scope er lagt på. 2

3 1.2 Opret en tilgængelig (simpel) tabel Opret f.eks. en tabel med 3 kolonner og 4 rækker Indtast indhold i tabel. 3

4 Højreklik i tabel og vælg Set Table Properties Gå til fanebladet Accessibility. I feltet Heading rows indtastes 1 for at lave en enkelt række (den første) til tabeloverskrifter. Indtast en forklaring af hvad tabellen indeholder i feltet Summary. Afslut med at klikke på Ok 4

5 Til sidst skal du skifte til visning af HTML i bunden af editoren. I koden skal du lokalisere hvert tableheadertag <th> og tilføje scope= col. Ved første kolonne i tabellen, skal der for hver tabeldatacelle <td> i denne kolonne tilføjes scope= row. Tabellen ser sådan ud: 5

6 1.3 indsæt eller fjern en række eller kolonne. Det er altid muligt at ændre på en eksisterende tabel. Højreklik i tabellen og vælg: Insert Row Above indsætter en række over den række hvor musemarkøren er sat Insert Row Below indsætter en række under den række hvor musemarkøren er sat Delete Row sletter den række hvor musemarkøren er sat Insert Column to the Left indsætter en kolonne til venstre for den kolonne, der hvor musemarkøren er sat Insert Column to the Right indsætter en kolonne til højre for den kolonne, der hvor musemarkøren er sat Delete Column sletter kolonnen hvor musemarkøren er sat 6

7 1.4 Indsæt spænd over kolonner og rækker Højreklik i tabel og vælg: Merge Cells Horizontally fletter cellen som musemarkøren står på sammen med cellen til højre Merge Cells Vertically fletter cellen som musemarkøren står på sammen med cellen nedenfor 1.5 Komplicerede tilgængelige datatabeller Komplicerede datatabeller kan være lidt vanskelige at gøre tilgængelige. It og Telestyrelsen har lavet en vejledning der beskriver hvordan, komplicerede datatabeller skal opbygges. Digital kommunikation vil altid være behjælpelig med at tilrette en kompliceret datatabel, så den bliver tilgængelig for alle. 7

8 2.0 Ensartede layout/design på alle datatabeller I forbindelse med at det nye hoveddesign til ssi.dk blev udviklet, blev der også fastlagt et design til datatabeller. For at ssi.dk bliver et ensartet og visuelt homogent site er det vigtigt at alle datatabeller styles ens. Dvs. at I ikke selv skal opsætte celle spacing, celle padding, border, baggrundsfarve, Alignment, overskrifts style olign. Stylingen af datatabeller er styret et centralt sted. 8