Cookie

Der beste Weg, eine HTML-Tabelle erstellen

Veröffentlicht von TheJoe am

Geschätzte Lesezeit: 5 Minuten

Vorsicht


Dieser Artikel wurde mehr als vor einem Jahr veröffentlicht, Es gab Entwicklungen können.
Bitte berücksichtigen Sie dies.

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:

AutoTypVerdrängung
OpelCorsa1.2
Citroenc21.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:

AutoTypVerdrängung
OpelCorsa1.2
Citroenc21.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:

AutoTypVerdrängung
OpelCorsa1.2
Citroenc21.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:

MarkierungTypVerdrängung
OpelCorsa1.2
Citroenc21.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:

Schau hier:  Tutorial: Unschärfe "Fogging Linsen" mit Gimp
TypVerdrängung
OpelCorsa1.2
Citroenc21.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 DatenTyp
VerdrängungDiät
Opel1.2GPLCorsa
Citroen1.1Gasc2

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.


TheJoe

Ich halte diesen Blog als ein Hobby von 2009. Ich bin begeistert von Grafik, Technologie, Open Source Software. Unter meinen Artikel wird nicht schwierig sein, über die Musik finden, und einige persönliche Reflexionen, aber ich bevorzuge die direkte Linie des Blogs vor allem auf Technologie. Weitere Informationen Kontaktieren Sie mich.

0 Kommentare

Hinterlasse eine Antwort

Avatar-Platzhalter

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.