{"id":76,"date":"2022-07-29T16:14:34","date_gmt":"2022-07-29T14:14:34","guid":{"rendered":"https:\/\/digital.hfh.ch\/eaccessibility\/?post_type=chapter&p=76"},"modified":"2025-10-21T13:36:13","modified_gmt":"2025-10-21T11:36:13","slug":"tabellen","status":"publish","type":"chapter","link":"https:\/\/digital.hfh.ch\/eaccessibility\/chapter\/tabellen\/","title":{"raw":"Tabellen","rendered":"Tabellen"},"content":{"raw":"
\r\n

Regel<\/p>\r\n\r\n<\/header>\r\n

\r\n\r\nTabellen inklusive \u00dcberschriften von Spalten und Zeilen sind als solche definiert.\r\n\r\n<\/div>\r\n<\/div>\r\n

Hintergrund<\/h2>\r\nEine Tabelle muss als solches definiert sein, damit sie vom Screenreader richtig benannt wird. Zudem m\u00fcssen Titelzeilen bzw. -spalten richtig beschrieben werden, dass sie ebenfalls als solches erkannt werden und auch ein Eintrag in einer Zelle dem \/ den richtigen Titel \/ Titeln zugeordnet werden kann.\r\n

Anleitungen<\/h2>\r\n

Drupal: hfh.ch<\/h3>\r\nZu Beginn w\u00e4hlst du das Tabellen-Symbol.\r\n\r\n\"Visualisierung<\/a>\r\n\r\nDann kannst du verschiedene Tabellen-Eigenschaften festlegen. Unter anderem die Kopfzeilen (2). Dort kannst du zwischen \u00abKeine\u00bb, \u00abErste Zeile\u00bb, \u00abErste Spalte\u00bb und \u00abBeide\u00bb ausw\u00e4hlen. Diversere Tabellentitel m\u00fcssen im Quellcode eingegeben werden.\r\n\r\n\"Visualisierung<\/a>\r\n

Zuugs.hfh.ch \/ digital.hfh.ch<\/h3>\r\nUm eine Tabelle hinzuzuf\u00fcgen, w\u00e4hlst du im Bearbeitungsmodus das Tabellen-Symbol (1). Im Dropdownmenu auf \u00abTabelle\u00bb und dann kannst du die Anzahl Zeilen und Spalten ausw\u00e4hlen.\r\n\r\n\"Visualisierung<\/a>\r\n\r\nUm eine Zeile als Titelzeile zu definieren, muss man die gew\u00fcnschte Zeile anklicken und wieder auf das Tabellen-Symbol > Zeile > Zeileneigenschaften.\r\n\r\n\"Visualisierung<\/a>\r\n\r\nUnter Zeilentyp (2) kann nun \u00abKopfzeile\u00bb ausgew\u00e4hlt werden. Dann \u00abOK\u00bb dr\u00fccken. F\u00fcr Spalten ist dies in der visuellen Ansicht auf Pressbooks nicht m\u00f6glich. Dies muss in der Textansicht mit dem HTML-Code gel\u00f6st werden.\r\n\r\n\"Visualisierung<\/a>\r\n

<\/h2>\r\n

HTML-Code und visuelle Beispiele<\/h2>\r\nDie Beispielbilder sind dreigeteilt. Zuerst sieht man denn Code, gefolgt von einem visuellen Beispiel einer Tabelle von Drupal und zum Schluss eine Tabelle von zuugs.hfh.ch \/ digital.hfh.ch.\r\n

Tabelle mit einer Titelzeile<\/h3>\r\n\"Das<\/a>\r\n\r\n[h5p id=\"2\"]\r\n

Tabelle mit einer Titelzeile und -spalten<\/h3>\r\n\"Das<\/a>\r\n\r\n[h5p id=\"3\"]\r\n

Tabelle mit irregul\u00e4ren Titeln<\/h3>\r\n\"Das<\/a>\r\n\r\n[h5p id=\"4\"]\r\n

Tabellen mit mehreren Zeilen pro Titelspalte<\/h3>\r\n\"Das<\/a>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
Titelzeile 1<\/th>\r\nTitelzeile 2<\/th>\r\n<\/tr>\r\n<\/thead>\r\n
Titelspalte 1<\/th>\r\nNormale Zeile 1<\/td>\r\n<\/tr>\r\n
Normale Zeile 2<\/td>\r\n<\/tr>\r\n
Titelspalte 2<\/th>\r\nNormale Zeile 3<\/td>\r\n<\/tr>\r\n
Normale Zeile 4<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n[h5p id=\"7\"]\r\n\r\nWeitere Beispiele und Anleitungen findest du hier: https:\/\/www.w3.org\/WAI\/tutorials\/tables\/<\/a>. Bei Fragen kannst du dich an das DLC (dlc@hfh.ch<\/a>) wenden.","rendered":"
\n
\n

Regel<\/p>\n<\/header>\n

\n

Tabellen inklusive \u00dcberschriften von Spalten und Zeilen sind als solche definiert.<\/p>\n<\/div>\n<\/div>\n

Hintergrund<\/h2>\n

Eine Tabelle muss als solches definiert sein, damit sie vom Screenreader richtig benannt wird. Zudem m\u00fcssen Titelzeilen bzw. -spalten richtig beschrieben werden, dass sie ebenfalls als solches erkannt werden und auch ein Eintrag in einer Zelle dem \/ den richtigen Titel \/ Titeln zugeordnet werden kann.<\/p>\n

Anleitungen<\/h2>\n

Drupal: hfh.ch<\/h3>\n

Zu Beginn w\u00e4hlst du das Tabellen-Symbol.<\/p>\n

\"Visualisierung<\/a><\/p>\n

Dann kannst du verschiedene Tabellen-Eigenschaften festlegen. Unter anderem die Kopfzeilen (2). Dort kannst du zwischen \u00abKeine\u00bb, \u00abErste Zeile\u00bb, \u00abErste Spalte\u00bb und \u00abBeide\u00bb ausw\u00e4hlen. Diversere Tabellentitel m\u00fcssen im Quellcode eingegeben werden.<\/p>\n

\"Visualisierung<\/a><\/p>\n

Zuugs.hfh.ch \/ digital.hfh.ch<\/h3>\n

Um eine Tabelle hinzuzuf\u00fcgen, w\u00e4hlst du im Bearbeitungsmodus das Tabellen-Symbol (1). Im Dropdownmenu auf \u00abTabelle\u00bb und dann kannst du die Anzahl Zeilen und Spalten ausw\u00e4hlen.<\/p>\n

\"Visualisierung<\/a><\/p>\n

Um eine Zeile als Titelzeile zu definieren, muss man die gew\u00fcnschte Zeile anklicken und wieder auf das Tabellen-Symbol > Zeile > Zeileneigenschaften.<\/p>\n

\"Visualisierung<\/a><\/p>\n

Unter Zeilentyp (2) kann nun \u00abKopfzeile\u00bb ausgew\u00e4hlt werden. Dann \u00abOK\u00bb dr\u00fccken. F\u00fcr Spalten ist dies in der visuellen Ansicht auf Pressbooks nicht m\u00f6glich. Dies muss in der Textansicht mit dem HTML-Code gel\u00f6st werden.<\/p>\n

\"Visualisierung<\/a><\/p>\n

<\/h2>\n

HTML-Code und visuelle Beispiele<\/h2>\n

Die Beispielbilder sind dreigeteilt. Zuerst sieht man denn Code, gefolgt von einem visuellen Beispiel einer Tabelle von Drupal und zum Schluss eine Tabelle von zuugs.hfh.ch \/ digital.hfh.ch.<\/p>\n

Tabelle mit einer Titelzeile<\/h3>\n

\"Das<\/a><\/p>\n

\n