Tabellen

Ein weiteres grundlegendes Gestaltungselement von Webseiten sind Tabellen. In der Zeit, als sich CSS noch nicht durchgesetzt hatte, wurden Tabellen verwendet, um die Inhalte auf einer HTML-Seite anzuordnen.

Der Grundlegende Aufbau einer Tabelle in sieht wie folgt aus:

HTML-Element	Bedeutung
`<table>`	öffnender Tag Tabelle
`<tr>`	öffnender Tag einer Tabellenzeile (tr - table row)
`<th>...</th><th>...</th>`	Tags für die Tabellenzeilen der Kopfzeile (optional) (th - table head)
`</tr>`	schließender Tag einer Tabellenzelle
`<tr>`	öffnender Tag einer Tabellenzeile
`<td>...</td><td>...</td>`	Tags für die Tabellenzeilen (td - table data)
`</tr>`	schließender Tag einer Tabellenzelle
`</table>`	schließender Tag Tabelle

Innerhalb des Tabellentags <table>...</table> stehen die einzelnen Tabellenzeilen <tr>...</tr>. In jeder Tabellenzeile müssen gleich viele Tabellenzellen <td>...</td> stehen oder es muss das Attribut multicolumn (Siehe Unten!) gesetzt werden. In der ersten Zeile können anstatt der Zellen Kopfzellen <th>...</th> stehen. Sie setzen die Überschriften der einzelnen Spalten ab. Innerhalb der Zellen bzw. Kopfzellen stehen nun die einzelnen Inhalte.

Beispiel:

tabelle1.html

<!DOCTYPE html>
 
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Einfache Tabellenbeispiele</title>
</head>
<body>
    <h2>Einfache Tabellenbeispiele</h2>
 
    <h3>Tabelle ohne Kopfzeile</h3>
    <table>
        <tr><td>1. Zeile/ 1.Zelle</td><td>1. Zeile/ 2.Zelle</td></tr>
        <tr><td>2. Zeile/ 1.Zelle</td><td>2. Zeile/ 2.Zelle</td></tr>
    </table>
 
    <h3>Tabelle mit Kopfzeile und Linien</h3>
    <table border = '1'>
        <tr><th>Kopfzeile/ 1.Zelle</th><th>Kopfzeile/ 1.Zelle</th></tr>
        <tr><td>1. Zeile/ 1.Zelle</td><td>1. Zeile/ 2.Zelle</td></tr>
        <tr><td>2. Zeile/ 1.Zelle</td><td>2. Zeile/ 2.Zelle</td></tr>
    </table>
 
</body>
</html>

Erklärvideo

Attribute in Tabellen

Bisher sehen unsere Tabellen noch sehr unspektakulär aus. Deshalb folgen jetzt einige Attribute, mit denen man die Tabelle gestalten kann. Die Auswahl ist dabei nicht vollständig.

Attribut	Wirkung
`<table border='n'>`	Tabellenlinie der Breite n zeichnen
`<table width='b'>`, `<td width='b'>`, `<tr width='b'>`	Element mit der Breite b darstellen, b kann dabei in Prozent und in Pixeln angegeben werden
`<table height='h'>`, `<td height='h'>`, `<tr height='h'>`	Element mit der Höhe darstellen, h wird dabei in Pixeln angegeben
`<td align='ausrichtung'>`, `<table align='ausrichtung'>`	horizontale Ausrichtung in einer Tabelle bzw. Tabellenzelle, ausrichtung kann die Werte left, center, right und justify annehmen
`<td valign='ausrichtung'>`, `<table valign='ausrichtung'>`	vertikale Ausrichtung in einer Tabelle bzw. Tabellenzelle, ausrichtung kann die Werte top, middle, bottom und baseline annehmen
`<td rowspan='z'`>	Zellen über z Zeilen verbinden
`<td colspan='s'`>	Zellen über s Spalten verbinden

Aufgaben

Aufgabe 1

Teste den HTML-Quelltext des Beispiels 1!

Aufgabe 2

Erstelle eine Tabelle nach der folgenden Vorlage!

Aufgabe 3

Informiere dich dich unter https://wiki.selfhtml.org/wiki/HTML/Tabellen über weitere Tabellenattribute und teste sie!

>> Tabellen (Lösungen)

>> Hyperlinks