Sie können zwei oder mehr Tabellenzellen in einer Spalte zusammenführen, indem Sie das colspan-Attribut in einem
So verwenden Sie das Colspan-Attribut
Im folgenden Code ist eine Tabelle mit drei Zeilen und drei Spalten. Wenn wir die ersten beiden Zellen in der ersten Spalte kombinieren wollten, könnten wir das Attribut colspan=”2″ im ersten
Beispiel HTML-Tabelle
<table> <tr> <td colspan="2"> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>
Der obige Code, der in einem Webbrowser gerendert wird, erzeugt eine Tabelle, die der folgenden Tabelle ähnelt. Wie gezeigt überspannt die erste Zelle die Breite von zwei Spalten.
Um alle drei Zellen oben in der Tabelle zu verwenden, erhöhen Sie den colspan-Wert auf 3, da es drei Spalten gibt. Wenn Sie den Wert auf 3 erhöhen, erhalten Sie eine Tabelle ähnlich dem folgenden Beispiel.
Stellen Sie sicher, dass beim Erweitern einer
So verwenden Sie das Rowspan-Attribut
Im folgenden Code ist eine Tabelle mit drei Zeilen und drei Spalten. Wenn wir die ersten beiden Zellen in der ersten Spalte zu einer Zelle kombinieren wollten, könnten wir das rowspan=”2″-Attribut im ersten
Beispiel HTML-Tabelle
<table> <tr> <td rowspan="2"> </td> <td> </td>
<td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>
Der obige Code, der in einem Webbrowser gerendert wird, erzeugt eine Tabelle, die der folgenden Tabelle ähnelt. Wie gezeigt überspannt die erste Zelle die Höhe von zwei Reihen.
Um alle drei Zellen in der ersten Spalte zu verwenden, erhöhen Sie den Rowspan-Wert auf 3, da es drei Zeilen gibt. Wenn Sie den Wert auf 3 erhöhen, erhalten Sie eine Tabelle ähnlich dem folgenden Beispiel.
Stellen Sie sicher, dass Sie beim Erweitern einer
Verwendung von “0” als Zahl in colspan und rowspan
Alle modernen Browser behandeln eine “0” (Null) in colspan und rowspan als maximale Zeilen oder Spalten. Anstatt beispielsweise die Zeilen einer Tabelle zu zählen, verwenden Sie rowspan=”0″, um die Zeile bis zum Ende der Tabelle zu erweitern.
Die Verwendung von “0” ist hilfreich für große Tabellen und für dynamische Tabellen, bei denen sich die Anzahl der Zeilen und Spalten häufig ändern kann.
Zusammenführen von Zellen mit einem WYSIWYG-Editor
Sie können auch den WYSIWYG-Editor verwenden, um Zellen zu verbinden. Um eine Zelle in einem WYSIWYG-Editor zusammenzuführen, markieren Sie zwei oder mehr Zellen, klicken Sie mit der rechten Maustaste auf die Zellen und wählen Sie die Option zum Zusammenführen von Zellen. Im Folgenden finden Sie zusätzliche Schritte dazu, wie Sie dies in Adobe Dreamweaver und Microsoft Expression Web tun können.
Zellen mit Dreamweaver zusammenführen
- Markieren Sie zwei oder mehr Zellen in Ihrer Tabelle.
- Klicken Sie mit der rechten Maustaste auf die markierten Zellen.
- Klicken Sie auf Tabelle und wählen Sie dann Zellen verbinden aus.
oder
- Markieren Sie zwei oder mehr Zellen in Ihrer Tabelle.
- Drücken Sie die Tastenkombination Alt+Strg+M.
Zusammenführen von Zellen mit Expression Web
- Markieren Sie zwei oder mehr Zellen in Ihrer Tabelle.
- Klicken Sie mit der rechten Maustaste auf die markierten Zellen.
- Klicken Sie auf Ändern und wählen Sie dann Zellen verbinden aus.
