Cookie

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, il layout si fa con 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. È possibile mostrare la didascalia sopra o sotto la tabella, 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:

Wie viele Autos sind in meiner Garage geparkt?
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>Le auto del mio 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:

Wie viele Autos sind in meiner Garage geparkt?
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>Le macchine del mio 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>Le auto del mio 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:

Wie viele Autos sind in meiner Garage geparkt?
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>Le auto del mio 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 definisce una cella di intestazione e fornisce informazioni di intestazione per una colonna o riga:

  • col: intestazione per la colonna
  • row: intestazione per la riga

Aggiungendo scope con il valore col alle intestazioni della prima riga andiamo a indicare che sono le intestazioni per le celle sotto elencate.

Viceversa usando row indicheremo che le intestazioni si riferiscono alle celle della riga corrispondente (a destra).

das Attribut scope supporta anche altri due valori:

  • colgroup: intestazioni per il gruppo di colonne che la contiene
  • rowgroup: intestazioni per il gruppo di righe che la contiene

Per i gruppi di colonne si utilizza l’elemento colgroup, mentre per i gruppi di righe possiamo usare thead, tfoot und tbody (che vedremo più avanti).

Un’altra tecnica per collegare i dati di una cella con le appropriate intestazione è imputare ad ogni intestazione un id univoco, poi aggiungere l’attributo header a ogni dato. Questo attributo contiene una lista separata da spazi degli id di ogni cella di intestazione che si applica ai dati di quella cella. Questa tecnica è più complicata e dovrebbe essere utilizzata solo quando ci sono dati che debbano essere collegati a più di due celle di intestazione, quando l’attributo scope è insufficiente ad esempio in tabelle molto complesse o irregolari.

Per illustrare questo esempio ho modificato la tabella.

Wie viele Autos sind in meiner Garage geparkt?
Dati tecniciTyp
VerdrängungAlimentazione
Opel1.2GPLCorsa
Citroen1.1Benzinac2

Chiaramente questo metodo diventa complicato piuttosto in fretta, meglio usare l’attributo scope quando possibile.

Gruppi di righe: thead, tfoot und tbody

Le righe della tabella possono essere raggruppate in intestazioni (thead), pié di pagina (tfoot) e uno o più corpi (tbody). Ovviamente ogni gruppo di righe deve contenere una o più righe della tabella.

Se una tabella contiene una instestazione (thead), deve apparire prima delle sezioni footer (tfoot) e body (tbody). Se decidiamo di non usare l’intestazione o il footer l’elementotbody es ist nicht zwingend (ma neanche vietato, quindi lo usiamo a piacimento). La struttura della tabella con gruppi di righe somiglierà a questa:

<Tisch>
   <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
</Tisch>

Raggruppare le righe può essere vantaggioso per diverse ragioni:

  • semplifica applicare gli stili (CSS) delle sezioni thead, tfoot und tbody in modo indipendente, senza aggiungere classi o altro,
  • quando lanciamo la stampa di tabelle particolarmente lunghe alcuni browser (ad esempio quelli basati su gecko) ripetono l’informazione contenuta in thead und tfoot su ogni pagina stampata, rendendone più semplice la lettura,
  • separare le sezioniheader” und “Fußzeile” dal body della tabella rende possibile per i browser di visualizzare lo scrolling del solo body.

Quali benefici

Può sembrare un lavoraccio creare delle tabelle accessibili in HTML, e in effetti per le tabelle complesse lo è. A volte è impossibile poterle creare a mano. Per le tabelle più semplici, comunque usare le celle di intestazione con l’attributo scope è più veloce e semplice.

Pare ovvio che chi utilizza tecnologie assistive come ad esempio gli screen reader ottengano un beneficio assoluto dalle tabelle ottimizzate per l’accessibilità. Provare a dare un senso a una tabella di dati grande e complessa semplicemente ascoltando una voce sintetizzata può essere molto difficile o addirittura impossibile. Semplificare e renderle accessibili è un dovere.

Meno ovvio è il beneficio ottenuto dal designer e dall’utente medio, ma una tabella accessibile è piena di markup a cui poter applicare stili CSS. Una tabella accattivante e ben visualizzata può rendere la tabella più semplice da leggere per tutti.

Questo articolo è apparso per la prima volta in inglese nel 2004 ed è abbastanza impressionante il fatto che sia ancora attuale nonostante i suoi 14 Jahre.

Zu wenig?


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

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.