Tabellengestaltung mit Bildern

Tabelle 1

Somit spielt es keine Rolle, welche Länge der Text hat, die Zellen bleiben sich immer gleich in der Breite. Man könnte auch die Höhe der Zellen fixieren, z.B. durch den zusätzlichen Stil .Bereich1
.IVTable TD {height: 200px;}
Und man kann natürlich auch ein Vordergrund-Bild in eine Zelle einfügen. Wenn das Bild breiter ist als die Zelle, wird diese jedoch angepasst

Tabelle 2

In der Tabelle 2 ist dasselbe Bild der Hintergrund für jede Zelle und jede Zelle ist gleich breit Und das Hintergrundbild wird für jede Zelle neu eingefügt.
Man beachte, dass das Bild tablebg.jpg nur die Grösse von 1 kB hat. Der spezielle Breiteneffekt wird erreicht durch den Stil  .Bereich2
.IVTable TD { background-repeat: repeat-y;}. Diese Angabe bedeutet, dass das Bild im vertikalen Bereich repetiert wird, jedoch nicht im horizontalen Bereich.

Dies ist in unserem Kontext eigentlich überflüssig, da die Zellenbreite fix eingestellt ist, aber es dient zur Demonstration. Ohne Angaben wird ein Hintergrundbild immer im horizontalen als auch vertikalen Bereich repetiert.




Diese Seite wurde mit folgender IVML-Information erzeugt:

<|H1|>Tabellengestaltung mit Bildern
Tabellen können mit einer eigenen Klasse versehen werden, um sie mit einem eigenen Stil zu versehen.

Diese Webseite enthält 3 Tabellen. Im StyleSheet, welches dem entsprechenden Thema zugeordnet ist oder mit /*<|IVSTYLE|> /*<|IVSTYLE|> kann der Stil einer Tabelle geändert werden, und die Tabelle oder einzelne Zellen davon mit Hintergrundbildern versehen werden.

<|TABLE 2 COL CONTEM CLASS="OtherTable"|>

Diese Tabelle enthält das Auto-Format CONTEM.
Notiz: Mit dem IVML-Tag /*|- werden leere Zellen in einer Tabelle angegeben
|-

oder auch ein Zeilenumbruch |- innerhalb einer Zelle
<|/TABLE|>

<|H2|>Tabelle 1
<|TABLE 2 COL CLASS="Table1"|>
In der Tabelle 1hat es ein Bild im Hintergrund für die ganze Tabelle mit 2 Spalten und die Spaltenbreite wird automatisch angepasst
Auch hier ist die Zellenbreite fix eingestellt so dass jede Zelle gleich breit ist

Somit spielt es keine Rolle, welche Länge der Text hat, die Zellen bleiben sich immer gleich in der Breite.
Man könnte auch die Höhe der Zellen fixieren, z.B. durch den zusätzlichen Stil .Bereich1 |- .IVTable TD {height: 200px;}

Und man kann natürlich auch ein Vordergrund-Bild in eine Zelle einfügen. Wenn das Bild breiter ist als die Zelle, wird diese jedoch angepasst

||"$ivp/Image.jpg"
<|/TABLE|>

<|H2|>Tabelle 2
<|TABLE 2 COL CLASS="Table2"|>
In der Tabelle 2 ist dasselbe Bild der Hintergrund für jede Zelle und jede Zelle ist gleich breit
Und das Hintergrundbild wird für jede Zelle neu eingefügt.

Man beachte, dass das Bild tablebg.jpg nur die Grösse von 1 kB hat.
<|c|>
Der spezielle Breiteneffekt wird erreicht durch den Stil .Bereich2 |- .IVTable TD { background-repeat: repeat-y;}. Diese Angabe bedeutet, dass das Bild im vertikalen Bereich repetiert wird, jedoch nicht im horizontalen Bereich.

Dies ist in unserem Kontext eigentlich überflüssig, da die Zellenbreite fix eingestellt ist, aber es dient zur Demonstration. Ohne Angaben wird ein Hintergrundbild immer im horizontalen als auch vertikalen Bereich repetiert.
<|/c|>

<|/TABLE|>

Und der dazu definierte Style ist wie folgt:

<|IVSTYLE|>

.Table1 {
background-image:url(1227_files/marine.gif);
color: white;
background-repeat: no-repeat;
}

.Table1 TD {
width: 170px;
color: white;
border-width:1px;border-color:black;border-style:solid;
}

.Table1 .IVCol2 .IVImage {
width: 70px;
}

.Table2 TD {
background-image:url(1227_files/tablebg.jpg);
width: 170px;
color: white;
background-repeat: repeat-y;
border-width:1px;border-color:black;border-style:solid;
}

<|/IVSTYLE|>