Deine erste Homepage
Kapitel 12
Tabellen

Wenn Listen zum Strukturieren von Daten nicht ausreichen, dann kann eventuell eine Datentabelle für Übersichtlichkeit sorgen.

Anmerkung:
Diese Lektion kannst du auch überspringen und bei Bedarf später studieren.

Ein Beispiel für eine ganz einfache Datentabelle

	Mentalität der Einwohner	Sprache
München	nett	bayrisch
Wuppertal	freundlich	deutsch

Hier der Quelltext zu dieser Tabelle:


<table>

<tr>
<th></th>
<th>Einwohner</th>
<th>Sprache</th>
</tr>

<tr>
<th>München</th>
<td>nett</td>
<td>bayrisch</td>
</tr>

<tr>
<th>Wuppertal</th>
<td>freundlich</td>
<td>deutsch</td>
</tr>

</table>

Die Bedeutung der verschiedenen Tags

<table> = Beginn der Tabelle
</table> = Ende der Tabelle
<tr> = Beginn einer Zeile (englisch: table row)
</tr> = Ende der Zeile
<th> = Beginn Zeilen- oder Spaltenkopf (englisch: table head)
</th> = Ende Zeilen- oder Spaltenkopf
<td> = Beginn Tabellenzelle (englisch: table data)
</td> = Ende Tabellenzelle

Die Struktur einer Datentabelle

Schau dir bitte anhand des Quelltextes genau die Struktur einer typischen Tabelle an:

Die erste Zeile <tr> beinhaltet die Überschriften für die Spalten, die sogenannten Spaltenköpfe.
Diese erste Zeile beinhaltet ausschließlich <th> als Kennzeichnung für Spaltenköpfe.
Die weiteren Zeilen beginnen mit einem Zeilenkopf <th>, dann folgen die Tabellendaten <td>.
Jede Zeile muss die gleiche Anzahl Zellen enthalten. Deshalb beginnt die erste Zeile unseres Beispiels mit einer leeren Zelle <th>. Hast du den Sinn dieser leeren Zelle verstanden?
Tabellendaten können grundsätzlich alles beinhalten: Text, Hyperlinks, Bilder usw.

Übung

Baue eine einfache Datentabelle in deine Homepage ein.

Vorschlag:
Wie wäre es denn, wenn du deine Kontaktdaten zur Übung als Datentabelle gestaltest?
Verständnisfragen:
Eignen sich die Kontaktdaten, um als Datentabelle dargestellt zu werden?
Falls ja: Wie sieht es in diesem Fall mit den Spalten- und Zeilenköpfen aus?

Wenn du glaubst, dass zur Strukturierung deiner Kontaktdaten eine Liste besser geeignet ist, dann füge deine Übungstabelle einfach in eine andere, vielleicht sogar neu erstellte Seite ein.

Vorsicht, Falle!
Bei deiner Wahl, ob du deine Daten mittels Listen oder Tabellen strukturierst, darf keinesfalls das Aussehen entscheiden. Sowohl Listen als auch Tabellen lassen sich mit CSS ansehnlich gestalten. Entscheidend ist vielmehr die Art der Daten.

Die Datentabelle mit CSS gestalten

Damit die Datentabelle auch ordentlich aussieht, muss unsere CSS Datei style.css um einige Anweisungen ergänzt werden.

Hier der CSS Quelltext für unsere Datentabelle:

table{
border-collapse:collapse;
text-align:center;
margin-bottom: 2em;
}

th {
padding: .2em .5em;
}

td {
border: 1px solid;
padding: .2em .3em;
background: #333;
}

Bitte kopiere den obigen Quelltext, und füge ihn einfach am Ende deiner CSS Datei style.css ein

Anmerkung:
Unsere Beispieltabelle ist wirklich nur "ganz einfach". Diese Struktur genügt nur für Tabellen mit ganz wenigen (maximal 3 oder 4) Spalten und Zeilen.
Zur Vertiefung empfiehlt sich Artikel bei www.einfach-fuer-alle.de

Was haben wir in dieser Lektion gelernt?

Wir haben gelernt, eine einfache Datentabelle zu erstellen.

Deine erste HomepageKapitel 12Tabellen