HTML - Elemente - Tabellen- Sonstiges

1. Spalten festlegen

Browser haben so ihre Probleme bei der Darstellung von Tabellen. Normalerweise werden die erst komplett erfasst und dann dargestellt. Und das kann je nach Größe schon ein wenig dauern. Daher hat man die Möglichkeit, schon zu Beginn zu sagen, wie viele Spalten die Tabelle hat und wie breit die jeweils sind.

<table>
  <colgroup>
    <col width="60">
    <col width="90">
    <col width="70">
  </colgroup>
  <tr>
    <td>Zelle 1</td>
    <td>Zelle 2</td>
    <td>Zelle 3</td>
  </tr>
  ... usw.
</table>

So weiß der Browser schon zu Beginn der Tabelle, wie sie auszusehen hat und kann sie entsprechend schnell darstellen. Hier werden zwar Tags zur optischen Auszeichnung genutzt, aber ich denke, dass in diesem Fall die Vorteile überwiegen. Ach, noch etwas, bei XHTML muss man zwingend <col ... /> schreiben.

2. Überschriften

Eine Überschrift in einer Tabelle setzt man nicht mit <h(irgendwas)>, sondern so:

<table>
  <caption>Tabellenüberschrift</caption>
  <tr>
    ...
  </tr>
</table>

Aber aufgepasst, diese Überschrift darf nur einmalig an den Anfang einer Tabelle gesetzt werden, sollten sich bereits Zeilen (<tr>) davor befinden, so wird sie nicht dargestellt.

3. Bezüge herstellen

Dies ist nur bei barrierefreien (-armen) Auftritten vorgeschrieben. Ich denke aber mal, dass auch Suchmaschinen davon profitieren könnten, darum zeige ich es mal. Bei Tabellen ist es für Blinde sehr schwer, zum Beispiel einen Bezug von den Kopfspalten zu den dazugehörigen Zellen zu erfassen. Daher hat man folgende Möglichkeit.

<table>
  <tr>
    <th id="sprachen">Programmiersprachen</th>
    <th id="os">Betriebssysteme</th>
    <th id="computer">Computer</th>
  </tr>
  <tr>
    <td headers="sprachen">BASIC</td>
    <td headers="os">Linux</td>
    <td headers="computer">Schneider CPC</td>
  </tr>
  <tr>
    <td headers="sprachen">C++</td>
    <td headers="os">Windows</td>
    <td headers="computer">Amiga 500</td>
  </tr>
</table>

Den Kopfspalten verpasst man mit dem Attribut id einen Namen. Und den einzelnen Zellen weist man diesen Namen mittels headers zu. So wissen zum Beispiel Screenreader ganz genau, was wo zugehört.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt