Tabellenlayout

[Rolf B]

Hallo envoy,

Deine Idee mit unterschiedlich breiten Spalten in Zeile 1 und 2 verlangt zur Umsetzung eine weitere Spalte. Das Bild ist in Spalte 1, Number ist Spalte 2, Headline ist Spalte 3+4. Info ist Spalte 2+3 und Date Spalte 4. Text ist Spalte 2+3+4.

Um einer Tabellenspalte eine Breite zu geben, verwendet man entweder das col-Element und weist per CSS Breiten zu (verwende dafür den nth-of-type Selektor) oder gibt den td-Elementen der ersten Zeile passende width-Angaben. Für dein Ansinnen mit jeder Menge Spaltenüberlappungen ist die col-Lösung besser.

Aber bitte: verwende nicht <table>. Wie Matthias schrieb: Das ist das Gestaltungsmodell der Urzeit. Beschäftige Dich mit dem Grid-Layoutmodell, es ist für die Seitengestaltung deutlich besser geeignet. Es sei denn, du musst Uralt-Browser oder HTML Mail unterstützen. Da kommt man manchmal am Table-Layout nicht vorbei.

Das Problem von <table> beginnt, wenn deine Seite nicht auf einem Desktop landet, sondern auf einem Handy. Oder jemand das Browserfenster klein macht. Dann muss sich das Layout anpassen, es muss responsiv sein. Mit <table> geht das ganz schlecht. Mit Grid hingegen ist das durch geschicktes CSS einfach lösbar: Verwende @media-Abfragen für die Fensterbreite und platziere deine Anzeigebereiche mittels benannter Grid-Bereiche passend neu. Steht alles im verlinkten Grid-Bereich unseres Wikis.

Rolf