homepage-buttons.de
Homepagevorlagen, Buttons und mehr
 
 
 

Startseite > HTML-Kurs > Tabellenattribute colspan und rowspan

5. HTML-Kurs - Tabellen erstellen (4)

5.4 Tabellenzellen mithilfe der Attribute rowspan und colspan verbinden

Nicht immer sollen alle Zellen einer Tabelle gleich groß sein, vielleicht haben Sie eine Überschrift, die sich über die gesamte Tabelle erstrecken soll. Wie kann man dies umsetzen?

5.4.1 Tabellenattribut "colspan"

Relativ häufig wird in der Praxis eine Überschrift über die gesamte Breite der Tabelle benötigt. Nun haben wir in den bisheringen Ausführungen auf den letzten Seiten gelernt, unterschiedliche Tabellengrößen und verschiedene Rahmenstärken zu erstellen, aber nun lernen wir, wie man einzelne Zellen miteinander verbindet. Wir fangen an, eine Überschrift über mithilfe des Attributes "colspan" über die Gesamtbreite der Tabelle zu setzen.

Zuerst die Syntax:

<html>
<head>
<title>Tabelle mit colspan in der Überschrift</title>
</head>

<body>

<table border="1">
  <tr>
    <th colspan="4">Überschrift</th>
  </tr>
  <tr>
    <td>Telle 1</td>
    <td>Zelle 2</td>
    <td>Zelle 3</td>
    <td>Zelle 4</td>
  </tr>
  <tr>
    <td>Telle 5</td>
    <td>Zelle 6</td>
    <td>Zelle 7</td>
    <td>Zelle 8</td>
  </tr>
</table>

</body>
</html>

Die Ausgabe im Browser können Sie im nachfolgenden Beispiel sehen: klick!

Bei diesem Beispiel besteht die Tabelle aus 4 Spalten und 2 Reihen. Durch den Wert 4 im Attribut colspan, werden alle 4 Spalten in der Überschrift miteinander verbunden. Dieser Wert wird in der 1. Zelle des betreffenden Wertes angegeben und ist für die folgenden Zellen gültig. Durch die Angabe 4 bedeutet dies, dass es für 4 Zellen gültig ist und muss daher nicht 4 x eingegeben werden.


Es kann nun sein, dass Sie mehrere Überschriften vergeben möchten, mit unterschiedlicher Verbindung der Spalten. Auch dies ist möglich. Beispiel:

<html>
<head>
<title>Tabelle mit colspan in der Überschrift</title>
</head>

<body>

<table border="1">
  <tr>
    <th colspan="2">Überschrift 1</th>
    <th colspan="3">Überschrift 2</th>
  </tr>
  <tr>
    <td>Zelle 1</td>
    <td>Zelle 2</td>
    <td>Zelle 3</td>
    <td>Zelle 4</td>
    <td>Zelle 5</td>
  </tr>
  <tr>
    <td>Zelle 6</td>
    <td>Zelle 7</td>
    <td>Zelle 8</td>
    <td>Zelle 9</td>
    <td>Zelle 10</td>
  </tr>
</table>

</body>
</html>

Und in der Ausgabe sieht das so aus: klick!

Bei diesem Beispiel enthält die Tabelle fünf Spalten, die erste Überschrift erstreckt sich über die ersten beiden Spalten, die zweite Überschrift über die drei nächsten Spalten. Hier wird im ersten Tag daher der Wert 2 im colspan eingegeben und im zweiten Tag der Wert 3. Es werden als insgesamt 2 Tags benötigt, die zusammen dann auf den Wert 5 (2+3) im colspan kommen und somit die komplette Anzahl der Spalten umfassen. Sie sollten immer darauf achten, dass Sie diese Werte genau überprüfen und sich nicht verrechnen! Sicherlich, bei dieser kleinen Tabelle ist dies einfach zu bewerkstelligen, bei verschachtelten Tabellen ist es aber durchaus schonmal schwieriger. Wenn Sie sich verrechnen, dann kompensiert der Browser dies im günstigsten Fall, aber nicht alle Browser sind da gleich großzügig und so kann es passieren, dass ein Besucher Ihrer Seite mit seinem Browser eine völlig verzogene Tabelle sieht. Also: immer schön nachrechnen. ;-)

Genauso wie das Verbinden der Tabellenüberschriften können Sie mit jeder einzelnen Tabellenzelle verfahren. Beispiel:

<html>
<head>
<title>Tabelle mit colspan in der Überschrift</title>
</head>

<body>

<table border="1">
  <tr>
    <th colspan="2">Überschrift 1</th>
    <th colspan="3">Überschrift 2</th>
  </tr>
  <tr>
    <td>Zelle 1</td>
    <td>Zelle 2</td>
    <td>Zelle 3</td>
    <td colspan="2">Zellen 4+5</td>
  </tr>
  <tr>
    <td>Zelle 6</td>
    <td>Zelle 7</td>
    <td>Zelle 8</td>
    <td>Zelle 9</td>
    <td>Zelle 10</td>
  </tr>
</table>

</body>
</html>

Und so sieht es in der Ausgabe aus: klick!

Bei diesem Beispiel wurde wiederum eine fünfspaltige Tabelle erstellt mit 2 Überschriften und zusätzlich wurden die Zellen 4 und 5 durch das Attribut colspan mit dem Wert 2 verbunden. Gleichzeitig wurde der Tag für Zelle 5 entfernt, da durch den Wert colspan="2" die Definition für die fünfte Zelle gleich mitgeliefert wurde. Wenn Sie diese Codezeile nicht entfernen, kann es zu Problem bei der Darstellung kommen. Daher immer darauf achten, dass das korrekt gecoded wird!

Beim letzten Beispiel zeigt sich eine weitere Besonderheit: beim Verbinden von Tabellenüberschriften wird der Text automatisch mittig ausgerichtet, beim Verbinden von "normalen" Zellen ist der Text links ausgerichtet. Dies ist im HTML-Standard so vorgesehen. Das können Sie aber anpassen, indem Sie z.B. die Zelle ebenfalls mittig ausrichten, indem Sie innerhalb des td-Tags den Wert: align="center" eingeben oder entsprechend in der Überschrift im th-Tag den Wert align="left".


5.4.2 Tabellenattribut "rowspan"

Genauso wie Sie Spalten in HTML verbinden können, können Sie auch Reihen verbinden. Reihen verbinden Sie mit dem Attribut "rowspan". Beispiel:

<html>
<head>
<title>Tabelle mit rowspan</title>
</head>

<body>

<table border="1">
  <tr>
    <th rowspan="2">Überschrift</th>
    <td>Zelle 1</td>
  </tr>
  <tr>
    <td>Zelle 2</td>
  </tr>
</table>

</body>
</html>

In der Ausgabe sieht das so aus: klick!

Im obigen Beispiel wurde bewusst ein sehr einfaches Beispiel gewählt. Es wurde eine Überschrift mit lediglich 2 zugehörigen Reihen erstellt. Bei der Syntax muss man im Gegensatz zur colspan-Attribut ein wenig mehr aufpassen. Wie Sie sehen können, wird im ersten tr-Tag sowohl die, die Reihen verbindende Überschrift als auch das erste td-Element ausgezeichnet. Im nächsten tr-Tag dann lediglich die zweite Reihe. Das bedeutet: die Angabe des rowspan im ersten tr-Tag wirkt sich auch noch auf die nächste Reihe aus. Was sie ja auch soll, aber von der Syntax her ist es halt ein wenig komplizierter als oben beim colspan die isolierte Angabe. Ich hoffe, ich konnte mich einigermaßen klar ausdrücken.

Sie haben nun die wichtigsten Elemente einer Tabelle kennengelernt und können nach Lust und Laune testen. Besonders das ausgiebige Testen der Attribute colspan und rowspan kann ich Ihnen nur ans Herz legen. Diese waren früher mit die wichtigsten Elemente beim Erstellen von Websites mithilfe von Tabellenkonstruktionen. Ein einziger falscher Wert konnte das komplette Layout völlig entstellen und die Suche war oft mühselig. Ich weiß, wovon ich hier schreibe! :-)