Lektion 9
Februar 29, 2012
Tabellen
Tabellen in HTML zu bauen mag am Anfang schwierig aussehen. Aber wenn Sie Schritt für Schritt vorgehen, ist es eigentlich ganz logisch. So wie alles andere bei HTML auch.
<table width=”300px” border=“1px“>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
</tr>
<tr>
<td>Zelle 3</td>
<td>Zelle 4</td>
</tr>
</table>
Im Browser sehen Sieht es dann so aus:
| Zelle 1 | Zelle 2 |
| Zelle 3 | Zelle 4 |
Wo ist der Unterschied zwischen <tr> und <td>?
Werfen Sie einen nochmal einen kurzen Blick auf das obige Beispiel, dies ist wohl das bisher schwerste. Lassen Sie uns kurz den Code auseinandernehmen und die Tags erklären:
Drei verschiedene Elemente werden benötigt, um Tabellen zu erzeugen:
- Der Start-Tag <table> öffnet und der End-Tag </table> schließt die Tabelle. Logisch.
- Eine Tabellenzeile wird durch <tr> (steht für “table row”, also Tabellenzeile) und </tr> geöffnet bzw. geschlossen. Auch logisch.
- Ein Eintrag in der Tabelle (Tabellenzelle) wird mit <td> und </td> umschlossen. td steht für “table data”, was man mit Tabellendaten übersetzen kann. Sie sehen, alles einfach und logisch.
Gibt es auch Attribute?
Natürlich! Z.B. gibt es das Attribut „border“ (engl. für Grenze, Begrenzung). Dieses wird verwendet um die Dicke der Rahmen (Begrenzungslinien) der Tabelle anzugeben:
<table width=”300px” border=“1px“>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
</tr>
<tr>
<td>Zelle 3</td>
<td>Zelle 4</td>
</tr>
</table>
Im Browser :
| Zelle 1 | Zelle 2 |
| Zelle 3 | Zelle 4 |
Mehr Attribute?
Es gibt viele Attribute für Tabellen.
align gibt die horizontale Ausrichtung (alignment) des Inhaltes in der Tabelle, einer Tabellenspalte oder einer einzelnen Zelle an. Werte für dieses Attribut sind left (links), center (zentriert) oder right (rechts).
valign gibt die vertikale Ausrichtung (vertical alignment) des Inhaltes in einer Tabellenzelle an. Werte für dieses Attribut sind z.B. top (oben), middle (in der Mitte) oder bottom (unten).
Die beiden Attribute colspan und rowspan. Diese werden dazu verwendet, um besondere Tabellen zu erstellen.
colspan bedeutet “Spalten-Spanweite” überset. colspan wird im <td>-Tag benutzt und gibt an, über wieviele Spalten die Zelle aufgespannt werden soll.
rowspan kann man mit “Zeilen-Spannweite” übersetzen und wie Sie sich vielleicht schon gedacht haben, gibt rowspan an, über wieviele Zeilen eine Zelle reichen soll.
<table width=”300px” border=“1px“>
<tr>
<td rowspan=“3″>Zelle 1</td>
<td colspan=“2″>Zelle 2</td>
</tr>
<tr>
<td>Zelle 3</td>
<td>Zelle 4</td>
<td >Zelle 5</td>
</tr>
</table>
Im Browser sehen Sieht es dann so aus:
| Zelle 1 | Zelle 2 | |
| Zelle 3 | Zelle 4 | Zelle 5 |
