HTML Tutorial

[ Inhaltsverzeichnis ]
[ 1.1 ] [ 1.2 ] [ 1.3 ] [ 1.4 ] [ 1.5 ] [ 1.6 ] [ 1.7 ] [ 2.0 ] [ 2.1] [ 2.2 ] [ 2.3 ] [ 2.4 ] [ 2.5 ] ] [ 2.6 ] [ 2.7 ] [ 2.8 [ 2.9 ] [ 3.0 ] [ 3.1 ] [ 3.2 ] [ 3.3 ]

Tabellen in HTML Teil I

Tabellen sind allgemein ein sehr wichtiges Darstellungs- und Strukturierungsmittel. Daten können übersichtlich präsentiert werden, aber auch andere Auflistungen, Vergleiche, Gegenüberstellungen usw. In HTML gibt es das Element <table>, mit dem Tabellen erstellt werden können. Es ein sehr wichtiges HTML-Element. Sie werden neben der Darstellung von Tabellen auch oft als Layout- und Strukturierungsmittel eingesetzt.

HTML Quellcode:

<html>
<head>
<title>Mustermanns Blumentips</title>
<style type="text/css">
<!--
body { background-color:#33EE00; color:#002000; font-family:Times; }
.zentriert { text-align:center; }
.hervorgehoben { font-family:Arial; font-size:200%; color:navy; }
-->
</style>
</head>
<body>
<!-------- tabellenanfang-------------------->
<table align="center" style="width:700px" border="2">
<tr>
<th>Nummer</th>
<th>Tipp</th>
</tr>
<tr>
<td style="width:200px">Blumentip 1</td>
<td>
Vergessen Sie nie Ihre Blumen zu gie&szlig;en!
</td>
</tr>
<tr>
<td>Blumentip 2 </td>
<td>Nachtschattengew&auml;chse im Dunkeln lagern</td>
</tr>
</table>
<!---------tabellenende---------------------->
</body>
</html>

So sieht's im Browser aus...

Erklärung:

Eine Tabelle wird mit dem table-Element erzeugt. Das table-Element enthält mindestens ein Kindelement <tr> für table row, also Tabellenzeile, das tr-Element wiederum beinhaltet mindestens ein Kindelement <th> für table head (Tabellenkopf) oder <td> für table data (Tabellendaten, also eine Zelle). th und td-Elemente sind gleichberechtigt, sie unterscheiden sich nur darin, dass th-Elemente den Text standardmä&szli;ig zentriert und fett darstellen, td-Elemente dagegen linksbündig und normal. Der Grundaufbau eines table-Elements ist also stets:

<table>
<tr>
<th> ... </th>
...
</tr>
<tr>
<td> ... </td>
...
</tr>
</table>

Diese Verschachtelung muss unbedingt eingehalten werden. Die Anzahl der Zeilen ergeben sich aus der Anzahl der tr-Elemente, während die Spaltenanzahl sich aus der maximalen Anzahl von td und th-Elementen je Zeile ergibt. Unsere Beispieltabelle hat also 3 Zeilen mit jeweils 2 Spalten.

Innerhalb des table-Tags können verschiedene Attribute gesetzt werden. Drei häufig verwendete Attribute wurden im Quellcode bereits angewendet.

align="center" : Tabelle wird zentriert angezeigt
width="700" : Tabellenbreite wird auf 700 Pixel gesetzt
border="2" : Tabellenrahmen mit 2 Pixel Dicke (ohne Rahmen also border="0")

Die Standardvorgaben für die Tabelleneinträge sehen wie folgt aus:

  • Die Breite der Spalten richtet sich nach der breitesten Tabellenzelle innerhalb dieser Spalte.
  • Die Höhe richtet sich nach der höchsten Tabellenzelle innerhalb dieser Reihe.
  • Die Ausrichtung des Zelleninhaltes ist linksbündig und vertikal zellenzentriert.

[ Inhaltsverzeichnis ]
[ 1.1 ] [ 1.2 ] [ 1.3 ] [ 1.4 ] [ 1.5 ] [ 1.6 ] [ 1.7 ] [ 2.0 ] [ 2.1] [ 2.2 ] [ 2.3 ] [ 2.4 ] [ 2.5 ] ] [ 2.6 ] [ 2.7 ] [ 2.8 [ 2.9 ] [ 3.0 ] [ 3.1 ] [ 3.2 ] [ 3.3 ]

©2003 de Vries