Tabellengestaltung mit Bildern

Tabelle 1

In der Tabelle 1 hat es ein Bild im Hintergrund für die ganze Tabelle mit 2 Spalten und die Spaltenbreite wird automatisch angepasst. Die Zellenbreite ist 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

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:

<|H2|>Tabelle 1
<|TABLE COL:2 CLASS:"table1"|>
In der Tabelle 1 hat es ein Bild im Hintergrund für die ganze Tabelle mit 2 Spalten
und die Spaltenbreite wird automatisch angepasst. Die Zellenbreite ist 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 COL:2 CLASS:"table2"|>
<|C|>
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|>
<|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($ivp/marine.gif);
color: white;
background-repeat: no-repeat;
}

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

.table1 .table1_Col2 .IVImage {
width: 70px;
}

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

<|/IVSTYLE|>