Online HTML-Kurs (Teil 15): Elemente innerhalb von Tabellen
Nachdem der Weihnachts- und Neujahresstress rum ist und hoffentlich jeder seine Bilanzen, Steuererklärungen und Inventuren durchgeführt hat, fahren wir fort mit dem Online-HTML-Kurs.
Im folgenden wollen wir uns den Elementen widmen, die innerhalb einer Tabelle und damit des <table>...</table>-Containers vorkommen können.
Zunächst schauen wir uns die Elemente <thead>, <tbody> und <tfoot> an. Mit diesen Elementen ist es möglich, wenn man es möchte, seine Tabelle in 3 Teile zu unterteilen. Und zwar in einen Tabellenkopf, einen Tabellenkörper und einen Tabellenfuß.
Im folgenden Beispiel kann man sehen wie die drei Tags verwendet werden können:
<html>
<head>
<title>Dies ist der Titel</title>
</head>
<body>
<table border="2">
<thead><tr><td>Vorname</td><td>Name</td></tr></thead>
<tbody><tr><td>Karl-Michael</td><td>Dosenwurst</td></tr>
<tr><td>Lisa-Roberta</td><td>Mülleimer</td></tr></tbody>
<tfoot><tr><td>Lustige Namen</td></tr></tfoot>
</table>
</body>
</html>
Und so siehts aus:
| Vorname | Name |
| Karl-Michael | Dosenwurst |
| Lisa-Roberta | Mülleimer |
| Lustige Namen |
Möchte man auf diese Art und Weise seine Tabelle unterteilen, so sollte man stets berücksichtigen, dass man immer alle drei Elemente verwenden sollte. Sinn und Zweck der Geschichte ist eigenlich, dass zum Beispiel Tabellenkopf und Tabellenfuß immer sichtbar sind, der Tabellenkörper aber nur einen Ausschnitt der Tabelle zeigt und der Rest durch "Scrollen" angezeigt werden kann.
Auch <thead>, <tbody> und <tfoot> haben eigene Attribute. Die beiden wichtigsten sind "align" für die horizontale Ausrichtung und "valign" für die vertikale Ausrichtung des Zelleninhalts. Die möglichen Werte für "align" sind: "left", "center", "right" und "justify". Für "valign" sind die möglichen Werte: "top", "middle", "bottom" und "baseline".
Viel wichtiger als diese drei Elemente sind allerdings die nächsten drei: <td>, <th> und <tr>. <td> und <tr> haben wir schon im letzten Kapitel kennengelernt. Nun wollen wir uns anschauen, wie wir diese beiden Elemente mit Attributen ausstatten können, um so die Zeilen und die einzelnen Zellen zu manipulieren.
Zunächst wollen wir uns anschauen wie wir das <tr>-Tag manipulieren können:
<html>
<head>
<title>Dies ist der Titel</title>
</head>
<body>
<table border="2">
<tr><td>Vorname des Mitarbeiters</td><td>Nachname des Mitarbeiters</td></tr>
<tr align="middle" valign="right" bgcolor="#00FF00"><td>Karl-Michael</td><td>Dosenwurst</td></tr>
</table>
</body>
</html>
Und so siehts aus:
| Vorname des Mitarbeiters | Nachname des Mitarbeiters |
| Karl-Michael | Dosenwurst |
Die drei wichtigsten Attribute für <tr> haben wir hier verwendet. Für die horizontale Ausrichtung mit "align" kann man die gleichen Werte wie für <thead>, <tbody> und <tfoot> einsetzen. Das gleiche gilt für die vertikale Ausrichtung mit "valign". Zusätzlich können wir noch mit "bgcolor" eine Hintergrundfarbe definieren. Der Link zu den Farbtabellen befindet sich im dritten Kapitel.
Außer dem <tr>-Tag hat auch das <td>-Tag, welches eine einzelne Zelle generiert, einige Attribute. Dazu gehören zum Einen die gleichen wie bei <tr>, nämlich "align", "valign" und "bgcolor" und zum Anderen "height", "width", "nowrap", "colspan" und "rowspan". Es gibt noch eine Reihe anderer Attribute die dem W3C-Standard entsprechen, welche aber eher selten benutzt werden.
Mit den Attributen "height" und "width" kann man in Pixel oder Prozent angeben wie groß eine Zelle werden soll:
<html>
<head>
<title>Dies ist der Titel</title>
</head>
<body>
<table border="2">
<tr><td height="50" width="300">Zelle 1</td><td>Zelle 2</td></tr>
<tr><td>Zelle 3</td><td>Zelle 4</td></tr>
</table>
</body>
</html>
Und so siehts aus:
| Zelle 1 | Zelle 2 |
| Zelle 3 | Zelle 4 |
Die Prozentangabe bezieht sich natürlich wie bereits erwähnt auf die Breite des übergeordneten Containers.
Mit dem Attribut "nowrap" kann man verhindern, dass der Browser den Inhalt einer Tabellenzelle automatisch umbricht. Erlaubter Wert hierfür ist "nowrap" (Ja der Wert heißt genau gleich wie das Attribut).
Mit den Attributen "colspan" und "rowspan" kann man Zellen wie in Excel verbinden. "colspan" verbindet dabei Zellen in Zeilen und "rowspan" verbindet Zellen in Spalten:
<html>
<head>
<title>Dies ist der Titel</title>
</head>
<body>
<table border="2">
<tr><td>Zelle 1</td><td colspan="3">Zelle 2</td><td>Zelle 3</td><td>Zelle 4</td></tr>
<tr><td rowspan="2">Zelle 5</td><td>Zelle 6</td><td>Zelle 7</td><td>Zelle 8</td></tr>
<tr><td>Zelle 9</td><td>Zelle 10</td><td>Zelle 11</td><td>Zelle 12</td></tr>
<tr><td>Zelle 13</td><td>Zelle 14</td><td>Zelle 15</td><td>Zelle 16</td></tr>
</table>
</body>
</html>
Und so siehts aus:
| Zelle 1 | Zelle 2 | Zelle 3 | Zelle 4 | ||
| Zelle 5 | Zelle 6 | Zelle 7 | Zelle 8 | ||
| Zelle 9 | Zelle 10 | Zelle 11 | Zelle 12 | ||
| Zelle 13 | Zelle 14 | Zelle 15 | Zelle 16 | ||
Die Werte die die beiden Attribute annehmen dürfen sind einfach, wie im Beispiel zu sehen, ganze Zahlen. Berücksichtigen sollte man aber, dass andere Zellen einfach nach rechts verschoben werden. Lässt man diese Weg, so erhält man ein schönes Gesamtbild:
<html>
<head>
<title>Dies ist der Titel</title>
</head>
<body>
<table border="2">
<tr><td>Zelle 1</td><td colspan="3">Zelle 2</td></tr>
<tr><td rowspan="2">Zelle 5</td><td>Zelle 6</td><td>Zelle 7</td><td>Zelle 8</td></tr>
<tr><td>Zelle 9</td><td>Zelle 10</td><td>Zelle 11</td></tr>
<tr><td>Zelle 13</td><td>Zelle 14</td><td>Zelle 15</td><td>Zelle 16</td></tr>
</table>
</body>
</html>
Und so siehts aus:
| Zelle 1 | Zelle 2 | ||
| Zelle 5 | Zelle 6 | Zelle 7 | Zelle 8 |
| Zelle 9 | Zelle 10 | Zelle 11 | |
| Zelle 13 | Zelle 14 | Zelle 15 | Zelle 16 |
Zu guterletzt fehlt noch das <th>-Tag, welches genauso eingesetzt werden kann wie das <td>-Tag. Der einzige Unterschied besteht darin, dass das <th>-Tag eher für Spaltenüberschriften eingesetzt werden sollte.
Kategorien
HTML , Step-by-Step1 TrackBacks
Folgende Einträge anderer Blogs beziehen sich auf den Eintrag Online HTML-Kurs (Teil 15): Elemente innerhalb von Tabellen
TrackBack-URL dieses Eintrags: http://www.undertec.de/mt-cgi/mt-tb.cgi/251
Morgen beginnt wie bereits hier im Blog angekündigt der Online HTML-Kurs. Diese Seite soll dazu dienen ein Inhaltsverzeichnis zu allen Kursseiten bereitzustellen. Im Laufe der Zeit wird das Inhaltsverzeichnis ergänzt. Jeder Artikel kann kommentier... Mehr
Jetzt kommentieren