Thomas: Tabellenlayout in CSS nachbauen

Beitrag lesen

Hallo zusammen.

Ich habe mal eine kurze Grundsatzfrage zum Thema Tabellenlayout und CSS.

Ist es möglich, das folgende Tabellenlayout mit dem exakt gleichen Verhalten in CSS nachzubauen?

Code:

<html>
<body>
<table align="center" style="border:0px; width:99%">
<tr>
<td colspan="2" id="Banner" style="background-color:#0000FF; color:#FFFFFF; font-size:24px; text-align:center; height:100px;">
Schriftzug
</td>
</tr>
<tr>
<td width="200" id="Navigation" style="background-color:#0000FF; color:#FFFFFF; font-size:12px; text-align:left;">
<ul>
<li>Navigationspunkt 1</li>
<li>Navigationspunkt 2</li>
<li>Navigationspunkt 3</li>
</ul>
</td>
<td width="*" id="Inhalt" style="background-color:#FFFFFF; color:#000000; font-size:12px; text-align:left;">
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.
</td>
</tr>
</body>
</html>

Mir fehlt bei rein CSS-basierten Layouts etwas wie <td width="*">.

Dadurch kann ich in tabellenbasierten Layouts nämlich meinen Bannerbereich und meine Navigationsleiste mit fixen Höhen- und Breitenwerten definieren und den kompletten übrigen Bereich für den Inhalt nutzen.

In CSS ist dieser Effekt meiner Erfahrung nach nur schwer zu erreichen.

Hierbei stelle ich mir persönlich die folgende Grundsatzfrage:
Ist es wirklich ratsam, auf Biegen und Brechen zu versuchen, alles mit CSS-Positionierung zu gestalten, auch wenn es mit einem Tabellenlayout so viel einfacher wäre?
Ist es wirklich so schlimm, gegen das semantische Markup zu verstoßen, wenn man dadurch den Quelltext weniger kompliziert machen kann?

Ich weiß, dass hier die HTML- und CSS-Experten predigen, CSS-Positionierung einzusetzen, und grundsätzlich gebe ich diesen Leuten ja auch recht.
Nur manchmal hört sich das meiner Ansicht nach so an, als würde man die verwendeten Mittel über den damit zu erreichenden Effekt stellen - und das halte ich persönlich nicht so sinnvoll.

Aber falls mir jetzt jemand eine Lösung mit CSS präsentiert, die exakt das Verhalten des tabellenbasierten Layouts bietet und auf die ich nur noch nicht gekommen bin, dann lasse ich mich natürlich sehr gern eines besseren belehren...

Viele Grüße,
Thomas

0 50

Tabellenlayout in CSS nachbauen

Thomas
  • css
  1. 0
    AllesMeins
    1. 0
      Mathias Brodala
      1. 0
        AllesMeins
        1. 0
          Mathias Brodala
          1. 0
            AllesMeins
            1. 0
              Mathias Brodala
              1. 0
                AllesMeins
                1. 0
                  Thomas
                2. 0
                  wahsaga
                  1. 0
                    Thomas
                    1. 0
                      Struppi
            2. 1
              Blaubart
        2. 0
          Klawischnigg
          1. 0
            Struppi
            1. 0
              AllesMeins
              1. 0
                Struppi
          2. 0
            Blaubart
            1. 0
              wahsaga
              1. 0
                Blaubart
        3. 0
          Christoph Gärtner
          1. 0
            AllesMeins
            1. 0
              Christoph Gärtner
              1. 0
                Christoph Gärtner
                1. 0
                  AllesMeins
                  1. 0
                    Christoph Gärtner
                    1. 0
                      AllesMeins
                      1. 0
                        Christoph Gärtner
                        1. 0
                          AllesMeins
                          1. 0
                            Christoph Gärtner
                            1. 0
                              AllesMeins
                2. 0
                  AllesMeins
                  1. 0
                    Christoph Gärtner
                    1. 0
                      AllesMeins
                    2. 0
                      Blaubart
                  2. 1
                    Struppi
                3. 0
                  AllesMeins
                  1. 0
                    Christoph Gärtner
              2. 0
                AllesMeins
                1. 0
                  Christoph Gärtner
                  1. 0
                    AllesMeins
                  2. 0
                    AllesMeins
                    1. 0
                      Christoph Gärtner
              3. 0
                AllesMeins
    2. 0
      Struppi
  2. 1
    wahsaga
  3. 0
    stareagle
    1. 0
      Thomas
      1. 0
        wahsaga
      2. 0
        Struppi