Inhalt des Dokuments
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.
Ansprechpartner/in
Corporate Design & Online-Design: PressestelleE-Mail-Anfrage [3]
Technik: ZE Campusmanagement
E-Mail-Anfrage [4]
E-Mail-Anfrage [4]
00710/Dokumentationen/Styleguide/Markup/tabellen.gif
terial/corporate_design_designvorgaben/online_styleguid
e/markup/module_der_website/blaetternavigation/paramete
r/de/font2/minhilfe/
nfrage/parameter/de/font2/minhilfe/id/4592/?no_cache=1&
amp;ask_mail=Yr8rzAAIApwAcgRv0D%2FxfEbej73Es9gBa1xhDVus
41WgS3%2FbG2omXA%3D%3D&ask_name=Corporate%20Design%
20&%20Online-Design%3A%20Pressestelle=
nfrage/parameter/de/font2/minhilfe/id/4592/?no_cache=1&
amp;ask_mail=Yr8rzAAIJtJoiQfo0OupsawpEdr5kYMjzshel2tmyN
go350dP777dA%3D%3D&ask_name=Technik%3A%20ZE%20Campu
smanagement
Zusatzinformationen / Extras
Direktzugang
Schnellnavigation zur Seite über Nummerneingabe
Hilfsfunktionen
Diese Seite verwendet Matomo für anonymisierte Webanalysen. Mehr Informationen und Opt-Out-Möglichkeiten unter Datenschutz.
Copyright TU Berlin 2008