Geschätzte Lesezeit: 5 Minuten

Es scheint trivial, aber es gibt bestimmte Aspekte von Computern, und damit auch des HTML-Code, sollte gelegentlich überprüft werden. Es soll beachtet werden, dass der W3C empfehlen dringend, gegen Tabellen mit dem Layout der Website zu entwerfen. Die Tabellen werden für die Dateneingabe verwendet, Das Layout erfolgt mit i div.

Tabellen sollten nicht den Inhalt der Grafik zu definieren, verwendet werden, da es Probleme für Screen-Reader darstellen könnte (sondern auch für Bots). in mehr, wenn Sie verwendet, um die Grafik zu definieren, Tabellen können Benutzer dazu zwingen, horizontal zu scrollen eine Tabelle Seite für einen größeren Bildschirm entworfen, um anzuzeigen. Zur Minimierung dieser Probleme sollten die Autoren CSS das Layout zu steuern, anstelle von Tabellen.

Interessanterweise verwendet das W3C nie den Imperativ (sollte, sollte nicht…), sie wissen, dass gute Manieren.

Heute sehen wir einen Tabellenartikel (als Tabelle und nicht als Layout zu dienen) und Variationen davon. Sie können ihre eigenen Schlüsse ziehen.

Der Tag für den Header: “th“

Der Tag “th” Es dient den Tabellenkopf zu definieren,: In der ersten Zeile und / oder die erste Spalte. Die einfachste Struktur nun in Vergessenheit geraten (ohne “th“) Es ist wie folgt:

<Tisch>  
  <tr>  
    <td>Auto</td>  
    <td>Typ</td>  
    <td>Verdrängung</td>  
  </tr>  
  <tr>  
    <td>Opel</td>  
    <td>Corsa</td>  
    <td>1.2</td>  
  </tr>  
  <tr>  
    <td>Citroen</td>  
    <td>c2</td>  
    <td>1.1</td>  
  </tr>  
</Tisch>

Was wird dieses Ergebnis produzieren:

Auto	Typ	Verdrängung
Opel	Corsa	1.2
Citroen	c2	1.1

Für diejenigen, die nicht große Sehvermögen ist es leicht zu verstehen, was wir reden, aber wer auf einem Bildschirmleseprogramm für die Interpretation der Webseite verlassen müssen, würde es erheblich benachteiligt. Aus diesem Grund wir die Tags eingeführt “th“, steht für “Tabellenkopf“. Dieser Tag definiert den Tabellenkopf und trennt sie von den Tabellendatum (“td” – Tabellendaten) und wird auf diese Weise verwendet:

<Tisch>  
  <tr>  
    <th>Auto</th>  
    <th>Typ</th>  
    <th>Verdrängung</th>  
  </tr>  
  <tr>  
    <td>Opel</td>  
    <td>Corsa</td>  
    <td>1.2</td>  
  </tr>  
  <tr>  
    <td>Citroen</td>  
    <td>c2</td>  
    <td>1.1</td>  
  </tr>  
</Tisch>

Das wird dieses Ergebnis erzeugen:

Auto	Typ	Verdrängung
Opel	Corsa	1.2
Citroen	c2	1.1

Die Tags für Beschriftungen: “caption“

Genau wie die Fotografien, Auch für die Tabellen gibt es eine Beschriftung. Sie können die Beschriftung über oder unter der Tabelle anzeigen, das CSS-Element, das die Positionierung erlaubt ist “caption-side” und nimmt als Argument “top” die “bottom“. Doch der Tag “caption” es ist nicht zwingend, je nach den Umständen kann es verwendet oder weniger werden.

Wenn verwendet, sollte unmittelbar nach dem öffnenden Tag platziert werden “table“.

<Tisch>
  <Bildbeschriftung>Wie viele Autos sind in meiner Garage geparkt?</Bildbeschriftung>
  <tr>  
    <th>Auto</th>  
    <th>Typ</th>  
    <th>Verdrängung</th>  
  </tr>  
  <tr>  
    <td>Opel</td>  
    <td>Corsa</td>  
    <td>1.2</td>  
  </tr>  
  <tr>  
    <td>Citroen</td>  
    <td>c2</td>  
    <td>1.1</td>  
  </tr>  
</Tisch>

Was wird dieses Ergebnis produzieren:

Auto	Typ	Verdrängung
Opel	Corsa	1.2
Citroen	c2	1.1

Das Attribut den Inhalt der Tabelle zusammenfassen: “summary“

Zusätzlich zu dem Tag “caption” Sie können das Attribut verwenden “summary” (den Tag zu binden, “table“) kurz den Inhalt der Tabelle zu erklären. Diese Option ist für den Benutzer nicht sichtbar, der die Tabelle sieht, diejenigen, dient dazu, die sieht nicht einen Bildschirmleser sofort zu verstehen, wenn die Tabelle, ob beeinflussen kann oder nicht.

Die rechte Struktur ist wie folgt:

<Tabelle Zusammenfassung ="Markierung, Modell und Motorleistung Autos in meiner Garage geparkt">
  <Bildbeschriftung>Die Autos in meiner Garage</Bildbeschriftung>
  <tr>
    <th>Markierung</th>
    <th>Typ</th>
    <th>Verdrängung</th>
  </tr>
  <tr>
    <td>Opel</td>
    <td>Corsa</td>
    <td>1.2</td>
  </tr>
  <tr>
    <td>Citroen</td>
    <td>c2</td>
    <td>1.1</td>
  </tr>
</Tisch>

Das Ergebnis dieser Zeilen Code mit dem Stil angewandt global zu dieser Website ist, dass:

Markierung	Typ	Verdrängung
Opel	Corsa	1.2
Citroen	c2	1.1

Es ist wichtig, dass das Attribut darauf hinzuweisen, “summary” Es ist nicht sichtbar für das Auge derjenigen, die surfen, Es wird jedoch als ergänzende Informationen, die von Bots und besseren Indizes der Tabelle aufgezeichnet und wird von Screenreadern gelesen Benutzern mit Sehbehinderungen helfen.

Headers abgekürzt mit dem Attribut “abbr“

das Attribut “abbr” Es ist ein weiteres optionales Attribut, wenn das nicht wirkt sich nicht auf die Struktur oder den Betrieb der Tisch. Der Inhalt wird von Screenreadern gelesen eine knappe Definition für diejenigen zu geben, die Sehprobleme haben, dass es auf diese Weise Gefühl Header mit kleinen Unterschieden vermeiden. das Attribut “abbr” Es wird auf diese Weise verwendet:

<Tabelle Zusammenfassung ="Markierung, Modell und Motorleistung Autos in meiner Garage geparkt">
  <Bildbeschriftung>Die Autos in meiner Garage</Bildbeschriftung>
  <tr>
    <th abbr ="Markierung">Die Automarke</th>
    <th abbr ="Typ">Das Fahrzeugmodell</th>
    <th abbr ="Verdrängung">Der Automotor</th>
  </tr>
  <tr>
    <td>Opel</td>
    <td>Corsa</td>
    <td>1.2</td>
  </tr>
  <tr>
    <td>Citroen</td>
    <td>c2</td>
    <td>1.1</td>
  </tr>
</Tisch>

Relate-Header und Daten: “scope“, “id” und “headers“

Die Tische sind weit genug banale Ansichten, Dies ist, wie es auf den Bildschirm Leser die Korrelation zwischen Kopf- und Daten deutlich zu machen,. Wir beseitigen den Header “Markierung” Das in unserer Tabelle, und ändern Sie die Einträge für die Marke, so dass sie ein Header werden.

<Tabelle Zusammenfassung ="Markierung, Modell und Motorleistung Autos in meiner Garage geparkt">
  <Bildbeschriftung>Die Autos in meiner Garage?</Bildbeschriftung>
  <tr>
    <td></td>
    <th>Typ</th>
    <th>Verdrängung</th>
  </tr>
  <tr>
    <th>Opel</th>
    <td>Corsa</td>
    <td>1.2</td>
  </tr>
  <tr>
    <th>Citroen</th>
    <td>c2</td>
    <td>1.1</td>
  </tr>
</Tisch>

Das Ergebnis wird:

	Typ	Verdrängung
Opel	Corsa	1.2
Citroen	c2	1.1

Wir fügen das Attribut “scope” die Arbeit an den Bildschirmleser zu erleichtern:

<Tabelle Zusammenfassung ="Markierung, Modell und Motorleistung Autos in meiner Garage geparkt">
  <Bildbeschriftung>Die Autos in meiner Garage</Bildbeschriftung>
  <tr>
    <td></td>
    <th scope ="col">Typ</th>
    <th scope ="col">Verdrängung</th>
  </tr>
  <tr>
    <th scope ="Reihe">Opel</th>
    <td>Corsa</td>
    <td>1.2</td>
  </tr>
  <tr>
    <th scope ="Reihe">Citroen</th>
    <td>c2</td>
    <td>1.1</td>
  </tr>
</Tisch>

das Attribut scope definiert eine Header-Zelle und stellt Header-Informationen für eine Spalte oder Zeile bereit:

• col: Überschrift für die Spalte
• row: Kopfzeile für die Zeile

Beim Hinzufügen scope Mit dem Wert col in den Überschriften der ersten Zeile zeigen wir an, dass es sich um die Überschriften für die unten aufgeführten Zellen handelt.

Umgekehrt verwenden row Wir werden angeben, dass sich die Überschriften auf die Zellen der entsprechenden Zeile beziehen (Auf der rechten Seite).

das Attribut scope es unterstützt auch zwei andere Werte:

• colgroup: Überschriften für die enthaltende Spaltengruppe
• rowgroup: Überschriften für die Gruppe von Zeilen, die sie enthalten

Für Spaltengruppen wird das Element verwendet colgroup, während wir für Gruppen von Zeilen verwenden können thead, tfoot und tbody (was wir später sehen werden).

Eine andere Technik zum Verknüpfen der Daten einer Zelle mit dem entsprechenden Header besteht darin, jedem Header a zuzuweisen id einzigartig, fügen Sie dann das Attribut hinzu header zu irgendwelchen Daten. Dieses Attribut enthält eine durch Leerzeichen getrennte Liste von id jeder Header-Zelle, die für die Daten in dieser Zelle gilt. Diese Technik ist komplizierter und sollte nur verwendet werden, wenn Daten mit mehr als zwei Header-Zellen verknüpft werden müssen, wenn das Attribut scope es reicht beispielsweise bei sehr komplexen oder unregelmäßigen Tabellen nicht aus.

Zur Veranschaulichung dieses Beispiels habe ich die Tabelle modifiziert.

	Technische Daten	Typ
Verdrängung	Diät
Opel	1.2	GPL	Corsa
Citroen	1.1	Gas	c2

Offensichtlich wird diese Methode ziemlich schnell kompliziert, besser das Attribut verwenden scope Wenn möglich.

Zeilengruppen: thead, tfoot und tbody

Die Zeilen der Tabelle können in Überschriften gruppiert werden (thead), Fusszeile (tfoot) und ein oder mehrere Körper (tbody). Offensichtlich muss jede Gruppe von Zeilen eine oder mehrere Zeilen der Tabelle enthalten.

Wenn eine Tabelle eine Kopfzeile enthält (thead), es muss vor den Fußzeilenabschnitten erscheinen (tfoot) Der Körper (tbody). Wenn wir uns entscheiden, die Kopf- oder Fußzeile nicht zu verwenden, wird das Elementtbody es ist nicht zwingend (aber nicht einmal verboten, also verwenden wir es nach Belieben). Die Struktur der Zeilengruppentabelle sieht folgendermaßen aus:

<table>
   <thead>
      <tr></tr>
      … righe relative all'header
   </thead>
   <tfoot>
      <tr></tr>
      … righe relative al footer
   </tfoot>
   <tbody>
      <tr></tr>
      … righe relative al body
   </tbody>
   <tbody>
      <tr></tr>
      … righe relative al body della seconda tabella
   </tbody>
   … altre sezioni body se necessarie
</table>

Das Gruppieren von Zeilen kann aus mehreren Gründen vorteilhaft sein:

• erleichtert das Anwenden von Stilen (CSS) Abschnitte thead, tfoot und tbody unabhängig, ohne Klassen oder irgendetwas hinzuzufügen,
• Wenn wir anfangen, besonders lange Tabellen zu drucken, einige Browser (zum Beispiel die auf Gecko basierenden) wiederholen Sie die darin enthaltenen Informationen thead und tfoot auf jeder gedruckten Seite, erleichtert das Lesen,
• getrennte Abschnitte “Header” und “Fußzeile” aus dem Hauptteil der Tabelle ermöglicht es Browsern, nur das Scrollen des Hauptteils anzuzeigen.

Welche Vorteile

Es mag wie eine lästige Pflicht erscheinen, barrierefreie Tabellen in HTML zu erstellen, und in der Tat ist es für komplexe Tabellen. Manchmal ist es unmöglich, sie von Hand zu erstellen. Für einfachere Tische, Verwenden Sie jedoch die Kopfzeilenzellen mit dem Attribut scope es ist schneller und einfacher.

Es scheint offensichtlich, dass diejenigen, die unterstützende Technologien wie Screenreader verwenden, einen absoluten Nutzen aus Tabellen ziehen, die auf Barrierefreiheit optimiert sind. Der Versuch, eine große und komplexe Datentabelle zu verstehen, indem man einfach einer synthetisierten Stimme zuhört, kann sehr schwierig oder sogar unmöglich sein.. Sie zu vereinfachen und zugänglich zu machen, ist ein Muss.

Weniger offensichtlich ist der Nutzen für den Designer und den durchschnittlichen Benutzer, Eine barrierefreie Tabelle ist jedoch voller Markups, auf die Sie CSS-Stile anwenden können. Eine attraktive und gut dargestellte Tabelle kann die Lesbarkeit der Tabelle für alle erleichtern.

Dieser Artikel es erschien zuerst auf Englisch in 2004 und es ist ziemlich beeindruckend, dass es trotz seiner eigenen immer noch relevant ist 14 Jahre.