Kategorien
Allgemein

Web-Gestaltungsraster (Grids) mit Tabellen erstellen

Hinweis: Ich merk gerade, die letzte Spalte im Beispiel ist nicht so breit wie die anderen. Da muss ich nochmal nachbessern, sorry.

Gestaltungsraster (Grids) im Web sind zur Zeit ein beliebtes Thema. So gibt es hierzu schon eigene Galerien und Tools, um sein eigenes Grid-Layout zu berechnen.

Der Nachteil des Grid-Calculators ist, dass man keine Maximalbreite eingeben kann. Möchte man also eine Seitenbreite von 770px in 12 gleichgroße Teile plus Zwischenräume (Gutter), hilft das Tool auch nicht viel.

Dabei gehts recht einfach, auch wenn man hierfür das table-Element auskramen muss. (Nein, das table-Element ist natürlich nicht verboten.) Außerdem brauchts noch die Firebug-Extension oder ein Bookmarklet, welches die Breite der td-Elemente ausliest.

Wir erstellen ein neues XHTML-Dokument, ich habe hierfür auf XHTML 1.0 Strict zurückgegriffen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html>
<head>
<title>Grid</title>
<style type="text/css" media="screen">
table, tr, td { margin: 0; padding: 0; }
table { background: #88FF88; }
tr { background-color: #BBFFBB; }
</style>
</head>

Den Tabellen, Tabellenreihen und -spalten habe ich zuallererst ihren Außenabstand (margin) und ihren Innenabstand (padding) genommen. Um die Tabellenspalten optisch von den Tabellenreihen abzugrenzen, habe ich beiden verschiedene Hintergrundfarben zugewiesen.

Im body habe ich dann eine 770 Pixel breite Tabelle mit 12 Spalten eingefügt. Zwischen den Spalten soll es einen Abstand von 12 Pixeln geben, dies bewerkstellige ich mit cellpadding="12"

<body>
<table cellpadding="0" cellspacing="12" width="770" height="250">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

Beispiel anschauen.

Wenn wir uns das Beispiel angucken, schmeißen wir im nächsten Schritt Firebug an, wählen HTMLInspect und wählen eine der Tabellenzellen aus:

Wie wir sehen, können wir die 770 Pixel in 12× 47 Pixel große Häppchen plus Gutter aufteilen.

Kleines Schmankerl: Machen wir einen Screenshot von der Tabelle und fügen wir diesen beispielsweise in Photoshop ein, können wir die Tabelle länger ziehen (Transformieren), den Screenshot als Bild speichern (vorher natürlich alles um die Tabelle herum wegschneiden) und als Hintergrundbild in die Internetseite einfügen, der wir ein Grid verpassen möchten. So können wir jederzeit beim Bearbeiten des XHTML– und CSS-Codes auf das Grid zurückgreifen.

Die Hintergrundfarben können natürlich geändert werden, hierbei sollte allerdings ein ausreichender Kontrast zwischen tr und td bestehen bleiben. Außerdem kann man die Spaltenbreiten auch nochmal mit ihren Maßen beschriften, alles ist Möglich.

Wie man sieht, kann man mit XHTML-eigenen Techniken (plus Bildbearbeitung, wenn man daraus ein Hintergrundbild machen möchte) schnell mal eben ein Grid berechnen. Und wer möchte, kann daraus ja vielleicht ein PHP– oder RoR(Ruby on Rails)-Script schreiben.