TU Berlin

Online-StyleguideTabellen

Page Content

to Navigation

There is no English translation for this web page.

Tabellen

HTML

  • Struktur: Tabellen bestehen aus den HTML-Elementen Head (thead) und Body (tbody)
  • Caption: Mit dem Caption wird der Typ/Zweck der Tabelle beschrieben, z.B. Lebenslauf
  • Summary: Idealerweise sind Tabellen im table-Element mit kurzen Zusammenfassungen versehen, die kompakt und informativ beschreiben, um was es in der Tabelle geht
  • Mehrere Angaben: Stehen mehrere Angaben (z.B. Links) in einer td, werden die Informationen einzeln in einer Liste aufbereitet
    <table summary="Kurze Beschreibung
des Inhalts der Tabelle">
<caption>Titel der Tabelle </caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col"
abbr="###ausführleicher Titel###">
Spalte 1
</th>
<th scope="col">Spalte 2</th>
<th scope="col">Spalte 3</th>
<th scope="col">Spalte 4</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<th scope="row">Rubrik</th>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<th scope="row">Rubrik</th>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
<tr class="odd">
<th scope="row">Rubrik </th>
<td>Lorem Ipsum </td>
<td>Lorem Ipsum </td>
<td>Lorem Ipsum </td>
<td>Lorem Ipsum </td>
</tr>
<tr>
<th scope="row">Rubrik</th>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
</tbody>
</table>

CSS

Durch die Klassen "first" und "second", die die CSS-Eigenschaft width: 12% haben, wird bei den betreffenden Spalten eine Minimal-Breite erzeugt. So wird einer automatischen Verteilung des Browsers entgegengewirkt und die Flexibilität für andere Spalten vorbehalten.

Tabelle
Lupe

nächstes Kapitel:

Navigation

Quick Access

Schnellnavigation zur Seite über Nummerneingabe