×
HTML
HTML
Der Anfang
Tabellen
Block
Inline
Formate
Noch mehr?
Beispiele
 
HTML
HTML
Der Anfang
Tabellen
Block
Inline
Formate
Noch mehr?
Beispiele
 
CSS ist valide!
Herzlich willkommen auf meiner Homepage!
Heute ist der

Tabellen!

Die ersten Schritte sind gemacht und ich hoffe, du hast ver­standen, um was es geht und erkennst die Syste­matik, die sich hinter HTML verbirgt.
Die 'Auszeichnung' eines Elements erfolgt immer mit einem öff­nenden HTML- Tag in der Form <'Name des Elements'>.
Die meisten Elemente brauchen einen schließenden HTML- Tag in der Form </'Name des Elements'>. Der Inhalt des Elements wird dann zwischen dem öffnenden und schließ­enden Tag notiert - soweit ver­standen und ok?

Gut... dann werden wir dieses Ver­ständ­nis jetzt noch um ein weiteres Element erweitern. Eine Tabelle.

Eine Tabelle (engl. table) wird mit dem Tag <table> geöffnet und mit dem Tag </table> wieder ge­schloss­en - nichts Neues also!
Innerhalb einer Tabelle gibt es dann beliebig viele Zeilen/ Reihen, die jeweils mit <tr> und </tr> ge­kenn­zeichnet sind (tr für engl. table row).
Innerhalb dieser Tabellen­reihen gibt es jetzt beliebig viele Daten­zellen, die jeweils mit <td>...</td> ge­kenn­zeich­net sind (td für engl. table data).

Für eine 3x3 Tabelle (3 Zeilen mit je 3 Daten­zellen) sieht das dann so aus!

der code einer 3x3 Tabelle
mit etwas CSS...

<style>
td {
border: 1px solid #000;
margin: 1px;
}
</style>

<table>
<tr>
<td>R 1 / Z 1</td>
<td>R 1 / Z 2</td>
<td>R 1 / Z 3</td>
</tr>
<tr>
<td>R 2 / Z 1</td>
<td>R 2 / Z 2</td>
<td>R 2 / Z 3</td>
</tr>
<tr>
<td>R 3 / Z 1</td>
<td>R 3 / Z 2</td>
<td>R 3 / Z 3</td>
</tr>
</table>
so sieht es aus
R 1 / Z 1 R 1 / Z 2 R 1 / Z 3
R 2 / Z 1 R 2 / Z 2 R 2 / Z 3
R 3 / Z 1 R 3 / Z 2 R 3 / Z 3

so sieht es ohne CSS Formatierung Ergänzung aus
R 1 / Z 1 R 1 / Z 2 R 1 / Z 3
R 2 / Z 1 R 2 / Z 2 R 2 / Z 3
R 3 / Z 1 R 3 / Z 2 R 3 / Z 3

Bei diesem Beispiel musste ich jetzt ein kleines bisschen schummeln, um auch optisch sichtbar zu machen, was die Struktur einer Tabelle ausmacht. Schau dir mal den mit <style> </style> gekennzeichneten Bereich direkt vor dem Tabellencode an.
Mit diesem <style> </style> wird ein internes Stylesheet eingefügt, in dem für das Tabellenelement td festgelgt wird, dass es einen Rahmen mit 1 Pixel Breite, durchgehend und mit der Farbe schwarz haben soll (border: 1px solid #000;).
Mit der zweiten Zeile in diesem Stylesheet (margin: 1px;) wird festgelegt, dass diese Datenzellen rundherum 1 Pixel Abstand zu den Nachbarelementen haben soll.
Dieses interne Styesheet würde in einem HTML Dokument im <head> </head> Bereich eingefügt werden und würde dann für alle <td> in diesem Dokument wirksam sein.
Wenn für das Dokument eine frühere HTML Version verwende wird (zB HTML 4.01), kann dieses Sichtbarmachen der Tabellen­struktur auch durch den Code <table border="1"> erzielt werden. Diese border="1" ist eine sogenannte Tag- Ergänzug und bewirkt, dass die Rahmen­linien der Tabelle sichtbar werden.
Tag- Ergänzungen gibt es zu allen HTML- Tags und bewirken die unter­schied­lichsten Dinge. Zu beachten ist hier allerdings, dass einige dieser Tag-Ergänzungen im HTML 5 Standard als 'veraltet' gelten und besser mit CSS umgesetzt werden sollten - aber dazu später mehr! Auch dieses border="1" zählt als veraltet und sollte in einem HTML 5 Dokument nicht vorkommen. Richtig wäre es also hier auf entsprechende CSS Formatierungen zurückzugreifen.

Zurück zur Tabelle!
Wir können in einer Tabelle eine beliebige Anzahl von Reihen und in einer Reihe eine beliebige Anzahl von Daten­zellen definieren. Aber - die Anzahl von Daten­zellen muss in jeder Reihe gleich sein. Wenn ich also, wie in obigem Beispiel, in der ersten Reihe 3 Daten­zellen einge­setzt habe, dann muss in jeder folgen­den Reihe dieser Tabelle auch genau diese Anzahl (3) Daten­zellen definiert werden!

Manchmal ist dieses strikte Schema aber für meinen Zweck unge­eignet und ich möchte einen etwas anderen Aufbau meiner Tabelle.
Dafür gibt es in HTML die Möglichkeit Zellen in der Tabelle zu­sammen­zu­fassen. Dieses geschieht wieder mit einer Tag- Ergänzung und zwar wird hierzu der <td> Tag mit der Ergänzung rowspan="x" und/oder colspan="x" erweitert.
Wobei rowspan (frei übersetzt - Reihen­spannweite) Daten­zelle über mehrere Reihen und dem ent­sprech­end colspan (frei übersetzt - Spalten­spannweite) Daten­zelle über mehrere Spalten (engl. column) zu­sammen­fasst.
Der Faktor 'x' in der Anweisung ist dann die gewünschte Anzahl der zu­sammen­zu­fassenden Daten­zellen.

rowspan="x" sagt dem Browser also, ich möchte eine Daten­zelle, die x Reihen über­spannt.
colspan="x" sagt dem Browser also, ich möchte eine Daten­zelle, die x Spalten über­spannt.

Wieder für unsere schon bekannte 3x3 Tabelle sieht das dann so aus!

der code mit 'colspan' und 'rowspan'
<style>
td {
border: 1px solid #000;
margin: 1px;
}
</style>

<table>
<tr>
<td colpan="2">R 1 / Z 1+2</td>
<td>R 1 / Z 3</td>
</tr>
<tr>
<td>R 2 / Z 1</td>
<td>R 2 / Z 2</td>
<td rowspan="2">R 2+3 / Z 3</td>
</tr>
<tr>
<td>R 3 / Z 1</td>
<td>R 3 / Z 2</td>
</tr>
</table>
so sieht es aus
R 1 / Z 1+2 R 1 / Z 3
R 2 / Z 1 R 2 / Z 2 R 2+3 / Z 3
R 3 / Z 1 R 3 / Z 2


Bitte beachten! Es ist immer noch eine 3x3 Tabelle und die Anzahl der Daten­zellen pro Tabellen­reihen muss immer noch gleich sein - schau auf den Code... die mit colspan="2" zusammen­gefassten (zwei)Zellen in der ersten Reihe, lassen nur noch Platz für eine weitere Daten­zelle. In der Summe sind es jedoch 3.
Die in der zweiten Reihe mit rowspan="2" zusammen­gefassten Zellen bewirken, dass eine Daten­zelle in Reihe 3 schon belegt ist. Es bleiben deswegen in Reihe 3 nur noch 2 verfügbare Daten­zellen übrig! In der Summe aber wieder pro Reihe genau 3 Daten­zellen.

Kompliziert? ... neee - nicht wirklich. Mit etwas Übung wirst du mit dieser Methode auch größer Tabellen nach deinen Bedürf­nissen zusammen­stellen können.

Die Tabellenstruktur, die wir bisher besprochen haben, ist allerdings nur die halbe Wahrheit - sozusagen die Mini­mal­konfi­guration
Man kann - muss aber nicht - eine Tabelle auch voll­ständig auszeichnen. Dazu benutzt man die folgend HTML- Tags:

<th>
Funktioniert genau wie <td>, zeichnet aber diese Zelle als sowas wie eine Spalten­überschrift aus (normaler­weise fett und zentriert)
<thead>...</thead>
Zeichnet den Bereich zwischen den Tags als Tabell­enkopf (engl. table head) aus. Hat keinen direkten Einfluss auf das Format, kann aber mit CSS zum Formatieren des Tabellen­kopfes genutzt werden.
<tbody>...</tbody>
Zeichnet den Bereich zwischen den Tags als Tabellen­körper (engl. table body) aus. Hat keinen direkten Einfluss auf das Format, kann aber mit CSS zum Formatieren des Tabellen­körpers genutzt werden.
<tfoot>...</tfoot>
Zeichnet den Bereich zwischen den Tags als Tabellen­fuß (engl. table foot) aus. Hat keinen direkten Einfluss auf das Format, kann aber mit CSS zum Formatieren des Tabellen­fußes genutzt werden.
Wenn <tfoot>...</tfoot> in früheren HTML-Varianten verwendet wird, dann muss dieser Bereich direkt hinter dem <thead>...</thead> definiert werden, wenn kein <thead>...</thead> angegeben ist dann wird <tfoot>...</tfoot> direkt nach <table> definiert.
In HTML 5 ist diese Reihenfolge aufgehoben.

Und so sieht das dann aus:

der code einer vollständig ausgezeichneten Tabelle
<table>

<thead>
<tr>
<th>Kopf­zelle 1</th>
<th>Kopf­zelle 2</th>
<th>Kopf­zelle 3</th>
</tr>
</thead>

<tbody>
<tr>
<td>Körper R 1 / Z 1</td>
<td>Körper R 1 / Z 2</td>
<td>Körper R 1 / Z 3</td>
</tr>
<tr>
<td>Körper R 2 / Z 1</td>
<td>Körper R 2 / Z 2</td>
<td>Körper R 2 / Z 3</td>
</tr>
</tbody>

<tfoot>
<tr>
<td>Fuß­zelle 1</td>
<td>Fuß­zelle 2</td>
<td>Fuß­zelle 3</td>
</tr>
</tfoot>

</table>
so sieht es aus
Kopf­zelle 1 Kopf­zelle 2 Kopf­zelle 3
Körper R 1 / Z 1 Körper R 1 / Z 2 Körper R 1 / Z 3
Körper R 2 / Z 1 Körper R 2 / Z 2 Körper R 2 / Z 3
Fuß­zelle 1 Fuß­zelle 2 Fuß­zelle 3

... und hier nochmal mit etwas Farbe
Kopf­zelle 1 Kopf­zelle 2 Kopf­zelle 3
Körper R 1 / Z 1 Körper R 1 / Z 2 Körper R 1 / Z 3
Körper R 2 / Z 1 Körper R 2 / Z 2 Körper R 2 / Z 3
Fuß­zelle 1 Fuß­zelle 2 Fuß­zelle 3


Ich hatte es ja schon erwähnt - mit etwas CSS kann man den <thead>, den <tfoot> und den <tbody> Tag nutzen, um diese Bereiche indi­viduell zu gestal­ten.
Ich habe das im Beispiel oben schon mal gemacht, indem ich einfach in die ent­sprech­en­den Tags eine Tag- Erweiterung geschrieben habe, mit der CSS Formatierungen direkt durchgeführt werden können. Diese Tag- Erweiter­ung sieht so aus
style=" "
Zwischen den Anführungszeichen (" ") wird dann die gewünschte(n) CSS Formatierung(en) eingefügt - im Beispiel oben die Schrift­farbe.
Also: style="color: #ff0000;" - wobei color: angibt, welche Eigen­schaft ich fest­legen will (Schrift­farbe) und dieses Ding mit dem # vorne ist der entsprechende hexa­dezimale Farb­code der Farbe, die ich aus­gewählt habe. Hier #ff0000 = rot!
Im Beispiel oben habe ich Tags <thead>, <tfoot> und <tbody> wie folgt erweitert:
<thead style="color: #ff0000;">, <tfoot style="color: #00ff00;"> und <tbody style="color: #0000ff;">

Uiiiii... das war jetzt aber schon ganz schön heftig! Aber jetzt können wir auch Tabellen und haben darüber hinaus auch schon was von Tag- Ergänzungen und Formatierung mit CSS gelernt! Hehe.. sei ehrlich, so schwierig ist das nicht.


 

Achtung!

Diese Seite verwendet Cookies.
Wenn Du weiter auf dieser Seite
bleibst, eklärst Du Dich damit
einverstanden.

Für mehr Informationen bitte die
DATENSCHUTZBESTIMMUNGEN
zur Kenntnis nehmen.