Im HTML-Editiermodus lässt sich der Tabellen-Tag der inneren Tabelle leicht finden. Dreimal darauf rechtsklicken erlaubt, mit dem Kontextmenü 'Tabelle einfügen / Spalte vor' die innere Tabelle mit drei Spalten zu verdoppeln. Somit entstehen 3x3 weitere Zellen, die noch eng anliegen, weil sie noch leer sind.

Gegenüber vorher hat jetzt jede Zeile der inneren Tabelle 6 Zellen mit <td> und </td>-Tags. Jede Zeile beginnt mit <tr> und endet mit </tr>. Dadurch können die Zeilen im Quelltext ganz einfach identifiziert werden.

Die drei ersten Zellen jeder Zeile sind leer und werden per Kopieren und Einfügen den rechten drei Zellen gleich gemacht. Beim Kopieren der mittleren Zeile wird auch dieser Text mit kopiert. Nach dem Einfügen wird er gelöscht. Die Kopie des Rahmens links nimmt so wenig Platz wie möglich ein, denn die Breite ist unbestimmt. Deshalb richtet der Browser den rechten Teil für diesen Text so breit wie möglich ein. Die Liniengrafiken lassen sich auch auf farbigem Untergrund verwenden.

Eine letzte Variante als Fortsetzung gibt es hier. Dort wird der linke innere Rahmen mit einer Pixelangabe verbreitert.

Dies ist zum Auftrag 6 eine weitere Anwendung (1 von 3).  Nächste Anwendung zum Auftrag 6
Zurück zu Auftrag 5
Nächste Anwendung zum Auftrag 7

Zum Kurs Webseitenerstellung mit Nvu