Tabellen-Zellen miteinander verbinden
Wenn wir nun Tabellenzellen miteinander verbinden möchten, dass z.B. anstatt 3 Zellen nur eine vorhanden ist, funktioniert das über colspan
und rowspan
.
Im folgenden Beispiel sollen das Feld A, B, C miteinander verbunden werden, damit nur der Inhalt von A übrigbleibt.
So sieht normalerweise die Tabelle aus:
A | B | C |
1 | 2 | 3 |
Nun kommt bei dem Befehl <td>
das Attribut colspan
zum Einsatz - nachdem wir die Zellen A, B und C verbinden möchten, also <td colspan="3">
<table border="1">
<tr>
<td colspan="3"> A </td>
<td> B </td>
<td> C </td>
</tr>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
</table>
Das hat die Auswirkung:
A | B | C | ||
1 | 2 | 3 |
Die Zellen B und C werden nach rechts hinausgeschoben, also einfach die entsprechenden <td>
löschen, und gut ist
<table border="1">
<tr>
<td colspan="3"> A </td>
</tr>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
</table>
A | ||
1 | 2 | 3 |
Das gleiche klappt auch in der Vertikalen mit dem Attribut rowspan
. Wir wollen anstatt ABC nun B und 2 verbinden.
<table border="1">
<tr>
<td> A </td>
<td rowspan="2"> B </td>
<td> C </td>
</tr>
<tr>
<td> 1 </td>
<td> 3 </td>
</tr>
</table>
Und nun haben wir Platz für den Inhalt auf der rechten Seite:
A | B | C |
1 | 3 |
Weiterempfehlen • Social Bookmarks • Vielen Dank
Bitte unterstützen Sie dieses Projekt
Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).
Spenden
Sie können uns eine Spende über PayPal zukommen lassen.
Weiterempfehlungen
Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.
Bücher über Amazon
Bestellen Sie Bücher über folgende Links bei Amazon:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details