htm l mit Adi Prinz

HTML-Tabellen / Tabellen Aufbau

table tr th td

Eine Tabelle in HTML öffnen sie mit dem table-Tag. Das table-Element ist ein Block-Element und definiert immer einen rechteckigen Bereich. Eine Tabelle besteht im Prinzip aus Zeilen, Spalten und Zellen. Mit dem tr-Tag erstellen sie eine neue Zeile, mit dem td-Tag öffnen sie eine neue Zelle. Die Anzahl der Spalten ergibt sich dadurch automatisch.

Eine Standardtabelle mit table tr td

<table>
<tr>
<td>Adi Prinz</td>          
<td>5630</td>          
<td>Bad Hofgastein</td>        
</tr>        
<tr>          
<td>Max Mustermann</td>          
<td>1234</td>          
<td>Entenhausen</td>        
</tr>        
</table>

Logischer Aufbau einer HTML-Tabelle

  • Spaltengruppen: colgroup
  • Spalten: col
  • Zeilengruppen: thead, tbody, tfoot
  • Zeilen: tr
  • Zellen: th, td

table-Element

Mit <table>..</table> erzeugen sie eine Tabelle. In dieser Tabelle können unterschiedlich viele Zeilen und Spalten erzeugt werden.

Das table-Tag kennt außer Universalattribute keine weiteren Eigenschaften.

tr-Element

Mit <tr>..</tr> erzeugen sie eine Tabellenzeile. In dieser Zeile können unterschiedlich viele Zellen erzeugt werden.

Das tr-Tag kennt außer Universalattribute keine weiteren Eigenschaften.

td-Element

Mit <td>..</td> erzeugen sie eine Zelle der Tabelle.

Folgende Attribute stehen zur Verfügung

  • colspan: Zellen verbinden (horizontal)
  • rowspan: Zellen verbinden (vertikal)
  • headers: ID der Kopfzellen

th-Element

Mit dem th-Element können sie ihrer Tabelle auch eine oder mehrere Kopfzellen hinzufügen. Standardmäßig wird der Zellinhalt mit fett Schrift und zentriert ausgerichtet.

Eine Tabelle mit Kopfzeile (th)

<table>
<tr>
<th>Name</th>          
<th>PLZ</th>          
<th>Ort</th>        
</tr> 
<tr>
<td>Adi Prinz</td>          
<td>5630</td>          
<td>Bad Hofgastein</td>        
</tr>        
<tr>          
<td>Max Mustermann</td>          
<td>1234</td>          
<td>Entenhausen</td>        
</tr>        
</table>

Folgende Attribute stehen zur Verfügung

  • colspan: Zellen verbinden (horizontal)
  • rowspan: Zellen verbinden (vertikal)
  • headers: ID der Kopfzellen

Ergänzung

Standardmäßig wird für Tabellen kein Rahmen angezeigt. Wenn sie diesen Code testen möchten, schreiben sie im öfnenden table-tag das Attribut "border" und definieren sie die Rahmenbreite in Pixel.

<table border="1">

Das border-Attribut und viele andere Tabellenattribute früherer Versionen gelten in HTML5 als obsolet und sollten (dürfen) nicht mehr verwendet werden. Für einen Testlauf spielt das aber keine Rolle!!

Tabellen Bereiche

thead tbody tfoot caption

Sie können ihre Tabelle in Bereiche unterteilen (z.B. in einen Kopf- Body- und Fußbereich). Die Elemente tbody, thead und tfoot teilen Tabellen in Bereiche, wobei thead und tfoot in einer Tabelle nur einmal vorkommen dürfen. Diese Elemente machen optisch gar nichts, nur beim Drucken von solchen HTML-Dateien werden Kopf und Fußzeile auf jeder Seite wiederholt (Zumindest in der Theorie). Ein weiterer Vorteil: Sie können diese Bereiche mit Stylesheets formatieren.

Mit dem caption-Element wird eine Tabellenüberschrift definiert. Die Deklaration muss unmittelbar nach dem einleitenden table-Tag erfolgen. Achten sie auf die Reihenfolge der Deklarationen:

  • caption: für die Tabellenüberschrift
  • thead: definiert den Kopfbereich
  • tfoot: definiert den Fußbereich
  • tbody: kann mehrfach in einer Tabelle vorkommen

Tabellenbereiche mit thead tbody tfoot caption

<table>
<caption>Meine Adressen</caption>
<thead>
<tr>
<th>Name</th>          
<th>PLZ</th>          
<th>Ort</th>        
</tr>
</thead>
<tfoot>
<tr>
<td><em>Firmenname</em></td>          
<td><em>Email</em></td>          
<td><em>Webadresse</em></td>           
</tr>
</tfoot>
<tbody>
<tr>
<td>Adi Prinz</td>          
<td>5630</td>          
<td>Bad Hofgastein</td>        
</tr>        
<tr>          
<td>Max Mustermann</td>          
<td>1234</td>          
<td>Entenhausen</td>        
</tr>
</tbody>
</table>

thead tfoot tbody-Element

Mit diesen Elementen teilen sie ihre Tabellen in Bereiche auf wobei thead und tfoot in einer Tabelle nur einmal vorkommen dürfen. Achten sie auf die Reihenfolge! tfoot muss vor tbody geschrieben werden.

Die thead tfoot tbody-Elemente kennen außer Universalattribute keine weiteren Eigenschaften.

caption-Element

Mit <caption>...</caption> wird eine Tabellenüberschrift definiert. Die Deklaration muss unmittelbar nach dem einleitenden table-Tag erfolgen.

Das caption-Element kennt außer Universalattribute keine weiteren Eigenschaften.

Tabellen-Spalten

col colgroup

Mit dem colgroup-Element und dem class-Attribut bestimmen sie die Breite der Spalten. Die Klasse bekommt einen Attributwert, mit dem wir mit CSS u.a. die Breite bestimmen. Mit dem span-Attribut teilen sie dem Browser die Anzahl der Spalten mit.

Tabellenbreite mit colgroup

<table>
<colgroup class="Spaltenbreite" span="3"></colgroup>
<tr>
<td>Adi Prinz</td>          
<td>5630</td>          
<td>Bad Hofgastein</td>        
</tr>        
<tr>          
<td>Max Mustermann</td>          
<td>1234</td>          
<td>Entenhausen</td>        
</tr>
</table>

colgroup-Element

Mit <colgroup>..</colgroup> leiten sie hinter dem table-Tag eine Vorab-Definition der Tabellenspalten ein. Sie können dieses Element verwenden, müssen aber nicht. Angeblich kann der Browser mit colgroup die Tabbelle schneller aufbauen? Mit dem class-Attribut definieren sie mittels CSS die Spaltenbreiten. Mit dem span-Attribut bestimmen sie die Anzahl der Spalten. 

<colgroup class="Spaltenbreite" span="3"></colgroup>

Folgende Attribute stehen zur Verfügung

  • span: Spaltenanzahl

col-Element

Mit dem col-Element und dem class-Attribut bestimmen sie die Breite der einzelnen Spalten. Die Klasse bekommt einen Attributwert, mit dem wir mit CSS u.a. die Breite bestimmen. Das col-Tag muss nicht in ein colgroup-Tag eingeschlossen werden.
Achtung: das col-Tag ist Inhaltsleer (Standalone) und muss dementsprechend geschrieben werden.

Spaltenbreite mit col

<table>
<colgroup>
<col class="Spaltenbreite1">
<col class="Spaltenbreite2">
<col class="Spaltenbreite3">
</colgroup>
<tr>
<td>Adi Prinz</td>          
<td>5630</td>          
<td>Bad Hofgastein</td>        
</tr>        
<tr>          
<td>Max Mustermann</td>          
<td>1234</td>          
<td>Entenhausen</td>        
</tr>
</table>

Folgende Attribute stehen zur Verfügung

  • span: Spaltenanzahl

Auch so eine Angabe ist valide. 

<col class="Spaltenbreite" span="5">

Beispieltabelle

Abschließend habe ich hier noch eine kleine Beispieltabelle. Wie ihr seht, werden hier bereits einige einfache CSS-Einstellungen verwendet, die ihr beim Arbeiten mit HTML5 unbedingt lernen müsst.

Anschauen

Ein einfaches Beispiel mit CSS

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>EDV mit Adi Prinz</title>
<style>
table {
margin:100px auto;
}
.spaltenbreite1 {
width:200px;
}
.spaltenbreite2 {
width:100px;
}
.spaltenbreite3 {
width:200px;
}
th, td {
border: 1px solid gray;
padding:5px;
}
caption {
font-size:22px;
text-decoration:underline;
}
</style>
</head>
<body>
<table>
<caption>Adressen</caption>
<colgroup>
<col class="spaltenbreite1">
<col class="spaltenbreite2">
<col class="spaltenbreite3">
</colgroup>
<thead>
<tr>
<th>Name</th>          
<th>PLZ</th>          
<th>Ort</th>        
</tr>
</thead>
<tfoot>
<tr>
<td><em>info@adiprinz.at</em></td>          
<td><em></em></td>          
<td><em>http://www.adiprinz.at</em></td>           
</tr>
</tfoot>
<tbody>
<tr>
<td>Adi Prinz</td>          
<td>5630</td>          
<td>Bad Hofgastein</td>        
</tr>        
<tr>          
<td>Max Mustermann</td>          
<td>1234</td>          
<td>Entenhausen</td>        
</tr>
</tbody>
</table>
</body>
</html>

Für weitere Informationen über HTML-Tabellen schauen sie sich folgende Scripts an!

w3schools.com