direkt zum Inhalt springen

direkt zum Hauptnavigationsmenü

Sie sind hier

TU Berlin

Inhalt des Dokuments

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:

Zusatzinformationen / Extras

Direktzugang

Schnellnavigation zur Seite über Nummerneingabe

Diese Seite verwendet Piwik für anonymisierte Webanalysen. Mehr Informationen und Opt-Out-Möglichkeiten unter Datenschutz.

Ansprechpartner/in

Corporate Design & Online-Design: Pressestelle

Technik: tubIT