Grafikausrichtung mit Tabellen



Tabellen sind wichtige Hilfsmittel für pixelgenaues Positionieren von Grafiken. Design in jeder denkbaren Form lässt sich mittels einer Tabelle umsetzen. Leider ist die Interpretation dieses Hilfsmittels von Browser zu Browser recht unterschiedlich.



<body>
<table border="1" cellspacing="5" cellpadding="5" bgcolor="black" width="280" height="200">
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
</tr>
<tr>
<td>Zelle 3</td>
<td>Zelle 4</td>
</tr>
</table>
</body>


   Grundgerüst einer Tabelle   

Im einleitenden <Table> werden die Global-Eigenschaften der Tabelle definiert. Angaben zur Rahmenbreite, Rahmenfarbe, Zellabstand und Hintergrund sowie Breite und Höhe der Tabelle können in diesem Tag festgelegt werden.

Die Attribute "width" und "height" erlauben pixelgenaue Angaben sowie Prozent-Werte zur Definition der Größe. Relative Werte(Prozent) beziehen sich auf die Höhe und Breite des Browser-Fensters.



Die Zellen(<td></td>) zwischen dem eröffnenden und schließenden Tag(<tr></tr>) entsprechen einer Tabellenzeile. Mit </tr> erzeugen Sie innerhalb der Tabelle einen Zeilenumbruch. Beachten Sie das folgende Zeilen die gleiche Anzahl Zellen haben müssen. Für jede Zelle können zusätzlich Eigenschaften festlegt werden wie z.B. Hintergrundgrafik, Breite, Höhe sowie die Objekt-Ausrichtung innerhalb der Zelle.



   Zellen-Eigenschaften   

Mit dem Attribut "background" kann ein beliebiges Bild als Hintergrundgrafik der Zelle zugewiesen werden. Ist die Zelle größer als die referenzierte Grafik so wird diese innerhalb des Zellen-Rahmens endlos wiederholt.

<td background="grafik.jpg" width="145" height="100"></td>

Zelle 1

Zelle 2

Zelle 3

Zelle 4



Die absoluten Größen Breite("width") und Höhe("height") begrenzen den Sicht-Bereich auf 145 x 100 Pixel. Ist das Hintergrundbild größer als der definierte Zellenbereich werden die überstehenden Bereiche der Grafik unten und rechts nicht mehr angezeigt. Standard-Ausrichtung des Hintergrundes in einer Zelle ist oben links. Moderne Grafikanwendungen erleichtern durch pixelgenaue Zuschnitte das Erstellen solcher Zellen-Hintergründe.












   Layout mit Tabellen   

Das nebenstehenden Beispiel zeigt eine Tabelle mit Hintergrundgrafik. Die Grafik wurde in passgenaue Einzelteile zugeschnitten.

Die Größe der Einzel-Grafik gleicht der der entsprechenden Zelle. Um den Rahmen zu verstecken muß der "border" im öffnenden <table>-Tag auf 0 gesetzt werden.



Tutorial:  Html Script Grafik Zurück