Hier der Screenshot vom Kalenderblatt Dezember:
Hier noch ein paar einfache Übungen zu colspan und rowspan:
(Achtung! Kann Fehler enthalten durch Umzug der Webseite)
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 bleibt.
So sieht normalerweise die Tabelle aus:
<table border=“1″>
<tr>
<td> A </td>
<td> B </td>
<td> C </td>
</tr>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
</table>
Beispiel 1: Nun kommt der Befehl colspan zum Einsatz – nachdem wir die Zellen A, B und C verbinden , also 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>
Beispiel 2: Die Zelle B und C werden nach rechts hinausgeschoben, also einfach die entsprechenden löschen, und gut ist
Beispiel 3: Das gleiche klappt auch in der Vertikalen mit <b>rowspan</b>. Wir wollen anstatt ABC nun B und 2 verbinden.</p>
Aufgabe 1
Erstelle die Datei ai/html/tabellen/beispiel1.html
Kopiere den Code aus Beispiel 1
Aufgabe 2
Erstelle die Datei ai/html/tabellen/beispiel2.html
Kopiere den Code aus Beispiel 2
Aufgabe 3
Erstelle die Datei ai/html/tabellen/beispiel3.html
Kopiere den Code aus Beispiel 3
Aufgabe 4
Erstelle die Datei ai/html/tabellen/verbinden1.html
Erstelle eine Tabelle mit 3 Zeilen und 4 Spalten.
Verbinde in der obersten Zeile alle 4 Zellen.
Aufgabe 5
Erstelle die Datei ai/html/tabellen/verbinden2.html
Erstelle eine Tabelle mit 2 Zeilen und 2 Spalten.
Verbinde in der linken Spalte die beiden Zellen.
Schreibe einen Kommentar