Tabellen

[Julian Oettrich]

Arbeite an einem neuen Design, dass ich auch schon fast fertig habe, aber irgendwie klappt da immer die lezte sache mit "ober rechts" nicht. ich habe mal schnell ein bild gezeichnet wo man meine "Traumformatierung" sehen kann. Bei selfhtml habe ich unter Tabellen nichts dazu gefunden. könnte sich vieleicht einer mal kurz hinsetzen und mir die groben umrisse so einer Formatierung erstellen? Wäre echt nett.

[Cheatah]

Hi,

Bei selfhtml habe ich unter Tabellen nichts dazu gefunden.

das liegt daran, dass Tabellen der Strukturierung tabellarischer Daten dienen, was exakt gar nichts mit Design oder Layout zu tun hat. Beschäftige Dich mit CSS, speziell den Eigenschaften zur Positionierung, und formatiere damit semantisches Markup.

Cheatah

[Julian Oettrich]

Habe alles bei CSS nachgeschaut, und trotzdem nichts gefunden!

[Cheatah]

Hi,

Habe alles bei CSS nachgeschaut, und trotzdem nichts gefunden!

dann hast Du nicht sehr gründlich nachgesehen. Es gibt bei den CSS-Eigenschaften ein Kapitel namens "Positionierung und Anzeige von Elementen".

Cheatah

[Tim Tepaße]

Hallo Julian,

Arbeite an einem neuen Design, dass ich auch schon fast fertig habe, aber
irgendwie klappt da immer die lezte sache mit "ober rechts" nicht. ich habe
mal schnell ein bild gezeichnet wo man meine "Traumformatierung" sehen kann.

Ich habe seit 2000 oder so keine Tabellenlayouts mehr benutzt, ich finde
die Gestaltung der verschiedenen Elemente über CSS für meinen Kopf sehr
viel intuitiver. Aber das bin vielleicht nur ich und meine Vorstellungen
einer gut benutzbaren und schönen HTML-Seite sind recht einfach, aus der
Sicht von anderen Gestaltern.

Mal ein Vorschlag für Tabellen:

Bei selfhtml habe ich unter Tabellen nichts dazu gefunden. könnte sich
vieleicht einer mal kurz hinsetzen und mir die groben umrisse so einer
Formatierung erstellen? Wäre echt nett.

Wenn Du Dir Dein Bild anschaust, dann siehst Du, daß Du an zwei verschiedene
Zeilen vollkommen unterschiedliche Anforderung bei der Aufteilung stellst:

<img src="http://www.world4free.net/tabelle.jpg" border="0" alt="">

Die erste Zeile hat zwei Tabellenspalten, die jeweils die Hälfte der
vorhandenen Breite einnehmen soll. Die zweite Zeile dagegen zementiert
links einen Bereich fest und gibt den Rest zur freien Verbreitung.

Will man das in einer einzigen Tabelle machen, dann dürfte man ganz viel
mit rowspan (http://de.selfhtml.org/html/tabellen/zellen_verbinden.htm)
rummurksen. Das kann durchaus zum Erfolg führen, wenn die ganze Tabelle fest
zementiert ist und sich nicht in der Breite ändern würde. Besteht jedoch
die Möglichkeit, daß sie sich ändern kann oder sollte, kann das ganz schnell
in die Hose gehen.

Das liegt einfach an dem grundlegenden Tabellenmodell. Es handelt sich um
Tabellen mit Gitternetzlinien, das heißt um Linien, die sich rechtwinklig
kreuzen. Man kann diese Linien nicht frei verschieben, sondern bleibt
immer im grundlegenden Raster gefangen. Auch wenn man mehrere Zellen zu
einer verbindet - das Raster ist immer noch da.

Da nun die obere Zeile und die untere Zeile vollkommen unterschiedliche
Anforderungen an dieses Raster stellen, würde ich beide voneinander
entkoppeln und jeweils in eine eigene Tabelle packen.(Natürlich nur, _wenn_
ich so ein Layout als Tabellenlayout zu gestalten hätte. Sehr unwahrscheinlich).

Im Quelltext sähe das dann sehr grundlegendsätzlich so aus:

<!-- Oberer Teil -->

<table id="obere-tabelle" style="width:100%">
    <tr>
      <td id="links" style="width:50%">
        Links
      </td>
      <td id="rechts" style="width:50%">
        Rechts
      </td>
    </tr>
  </table>

<!-- Unterer Teil -->

<table id="untere-tabelle" style="width:100%">
    <tr>
      <td id="menu" style="width:180px">
        Menü
      </td>
      <td id="inhalt">
        Inhalt
      </td>
    </tr>
  </table>

Ein paar Anmerkungen dazu:

Du siehst sicherlich die Breitenangaben für die Tabellen bzw. Tabellenzellen.
Ich habe für die beiden strukturierenden Tabellen die Breite von 100%
vergeben. Im Prinzip geht dort auch jede andere Angabe, es sollte nur eine
vorhanden sein, damit die Tabellen nicht wegen der flexiblen Angaben für
Tabellenzellen (50% oben, keine Angabe rechts unten) wieder ineinander
schnurren. Man beachte auch die Angabe von Einheiten, oben flexible (Prozent),
unten eine feste (Pixel) und eine flexible. Dieser Unterschied ist genau das,
was die Nutzung einer einzigen Layouttabelle kaputt macht.

Ich habe die Angaben mit CSS-Deklarationen gemacht. Dies einfach, weil es
mir leichter von Hand geht. Im Prinzip könnte man das auch mit irgendwelchen
HTML-Attributen (http://de.selfhtml.org/html/tabellen/gestaltung.htm) machen,
ich ziehe jedoch CSS vor. Dies liegt daran, weil ich die Regeln zur visuellen
Gestaltung einer Webseite gerne an einem Platz habe, im CSS Stylesheet.

Weswegen ich den entsprechenden Tabellenzellen jeweils IDs vergeben habe,
über die man sie im Stylesheet ansprechen kann. So könnte man solche
Formatierungen wie style="width:100%" aus dem Quellcode verbannen und
im Stylesheet direkt angeben.

Und nicht nur das, man kann Tabellen und Tabellenzellen wie auch alle
anderen HTML-Elemente mit CSS formatieren. Rahmen, Breite, Höhe, Text,
Abstände und all sowas. Siehe dazu auch die Links unter
http://de.selfhtml.org/html/tabellen/gestaltung.htm#gestalten_css

Tim