Tabelle formatieren

DerBaer

Hi,

ich stehe schon wieder vor einem seltsamen Problem. Ich möchte einfach eine Tabelle erzeugen um meine inhalte sauber darzustellen

---------------------
|                    |
---------------------
|     |             |
|     |             |
|     |             |
|     |             |
|     |             |
---------------------
|                   |
---------------------

So ungefähr soll das aussehen.
- Die Tabelle soll genau den bildschirm ausfüllen
- In die Zelle oben soll ein Bild rein. Höhe soll ungefähr 100 Pixel hoch sein.
- Die anderen 3 Zellen enthalten <iframe>s die andere Dateien einbinden.
- Unten soll 2-3 Textzeilen hoch sein
- Links soll etwa 100 Pixel breit sein
- Rechts soll den Rest ausfüllen;)

Das Design soll auf möglichst vielen Browser funktionieren(v.a. Firefox) und sollte auch bei unterschiedlichen Auflösungen so aussehen. Deshalb dachte ich, ich mach das nicht mit festen Werten, sondern mit %-Angaben. Aber i-wie Wird das total verunstaltet. Die Zelle unten ist z.b. immmer ~ 25% der Gesamthöhe(eingestellt hatte ich 10%)

vllt kann mir jemand das grundgerüst so abuen, dass es ungefähr meinen Bedürfnsissen entspricht?
Ich hab schon hunderte Kombinationen durchprobiert, aber es wollte einfach nie passen.

Mfg
DerBaer

inflames2k

Missbrauch die Tabelle nicht für soetwas.

Nutze lieber div-Container.

// Edit
Hast du denn einen Link, wo man sich das anzeigen lassen kann was bei dir rauskommt?

inflames2k schrieb:

Missbrauch die Tabelle nicht für soetwas.

Begründung?

@DerBaer: Wenn es in jedem Browser bei jeder Auflösung gleich aussehen soll, solltest du feste Werte verwenden. Prozentual verhaust du dir das ganze Layout. 10% von 768 sind 76.8px. 10% von 860 sind dann schon 86px. Die Höhen würden bei prozentualen Höhenangaben je nach Auflösung variieren.

LG

Lupo4u2

@DerBaer: schau dir das tutorial hier mal an, wenn du nicht gezwungenermaßen mit einer Tabelle arbeiten willst: http://www.subcide.com/tutorials/csslayout/

Dasd

Oder aber: http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/

DerBaer

das tutorial ist super, danke.

wieso das mit der tabelle net geklappt hat ist mir ein rätsel, aber mit divs und kontsanten werten läufts jetzt.
@Dasd schau ich mir trotzdem mal an.

(Ich hab gestern eigentlich noch geantwortet, aber iwie anscheinend doch net^^, deshalb kommt die antwort erst jetzt)

Nochmal danke

inflames2k

RandomAccess85 schrieb:

inflames2k schrieb:

Missbrauch die Tabelle nicht für soetwas.

Begründung?

@DerBaer: Wenn es in jedem Browser bei jeder Auflösung gleich aussehen soll, solltest du feste Werte verwenden. Prozentual verhaust du dir das ganze Layout. 10% von 768 sind 76.8px. 10% von 860 sind dann schon 86px. Die Höhen würden bei prozentualen Höhenangaben je nach Auflösung variieren.

LG

Die Begründung ist eigentlich nicht wirklich schwer. - Tabellen zur Datendarstellung ok, aber für das Design, ich sag mal so Man kann sich seinen HTML Code auch noch weiter unnötig aufblähen.

Jockelx

inflames2k schrieb:

Man kann sich seinen HTML Code auch noch weiter unnötig aufblähen.

Um wieviel Bytes wird der Code denn aufgebläht? 50 Bytes?
Eher weniger.
Soooo offensichtlich wie du es darstellst, finde ich deine Begründung jetzt nicht.

inflames2k

Jockelx schrieb:

inflames2k schrieb:

Man kann sich seinen HTML Code auch noch weiter unnötig aufblähen.

Um wieviel Bytes wird der Code denn aufgebläht? 50 Bytes?

Ich red von der Übersichtlichkeit. - Und glaub mir, ich fing damals auch mit Tabellen an. - Es ist einfach optisch besser so zu lesen:

<html>
   <head>
      ...
   </head>
   <body>
       <div id="header">Lorem Ipsum</div>
       <div id="left">mein tolles Menü</div>
       <div id="content">Mein Inhalt, der ja ach so toll ist.</div>
       <div id="foot">Copyright oder was auch immer</div>
   </body>
</html>

Als folgender Quellcode:

<html>
  <head>
    ...
  </head>
  <body>
     <table class="design">
        <tr>
          <td colspan="2" id="header">Lorem Ipsum</td>
        </tr>
        <tr>
          <td id="menu">mein tolles Menü</td>
          <td id="content">Mein Inhalt, der ja ach so toll ist.</td>
        </tr>
        <tr>
          <td colspan="2" id="foot">Copyright oder was auch immer</td>
        </tr>
     </table>
  </body>
</html>

Ich mein, ok jeder sieht das anders, aber aus meiner Sicht, ist es mit den DIV Containern weit übersichtlicher (meine Formatierung jetzt mal ignoriert) und vorallem eignen diese sich besser für individuelle Designs.

Hallo,

ansich hast du ja recht. ABER, ich finde die Browser sind sich im Umgang mit Containern noch nicht einig genug. Oft genug kommt es zu Kompatibilitätsdifferenzen die man durch umständliche CSS-Aktionen gerade bügeln muss. Meine Tabelle bau ich einmal auf, und dann steht sie. Bei den div's reis ich mir bald die Haare aus, weil's in jedem Browser anders ausschaut...

LG

inflames2k

Naja, das hängt damit zusammen, welche CSS Attribute man nutzt.

Aber wie sieht es denn bei einer Tabelle aus?

Angenommen du magst gern ein Desing haben, das wirklich Klasse ist und noch keiner soweit hat. - Wie weit würdest du denn mit der Tabelle kommen? Vorallem wie lang würdest du dir die Zeit nehmen?

Beispiel (Kein HTML eher darstellungstechnisch):

XXXXXXX----------------------XXXXXXX
XLOGOXX    Kopfgrafik        XMenüXX
XXXXXXX                      XXXXXXX
                             XXXXXXX
-----------------------------XXXXXXX
                             XXXXXXX
      Inhalt                 XXXXXXX
                             XXXXXXX
------------------------------------
|         Fußbereich               |
------------------------------------

ein Simples Beispiel, aber aus meiner Sicht schon ausdrucksstark genug, wer sich daran mit einer Tabelle versucht, dem Wünsch ich viel Spaß.

Der Bereich Menü, Kopfgrafik, Inhalt und Fußbereich wäre machbar, was nun aber mit dem Logo?

Scheppertreiber

RandomAccess85 schrieb:

Hallo,

ansich hast du ja recht. ABER, ich finde die Browser sind sich im Umgang mit Containern noch nicht einig genug. Oft genug kommt es zu Kompatibilitätsdifferenzen die man durch umständliche CSS-Aktionen gerade bügeln muss. Meine Tabelle bau ich einmal auf, und dann steht sie. Bei den div's reis ich mir bald die Haare aus, weil's in jedem Browser anders ausschaut...

LG

Dann lerne es. Es gibt säckeweise Literatur im Web wie man das macht.

Tabellelayout führt zu folgenden Problemen:

* aufgeblähtem Code
* nicht-semantischem HTML (laß Dir denMist mal von einem Screenreader vorlesen)

Macken handelst Du Dir bei den diversen IEs auch mit Tabellen ein. Ein Märchen, daß
Browser das gleich behandeln. IE kann heute Tabelle noch immer nicht richtig darstellen
(zB tbody mit overflow). Tabellen werden für tabellarische Daten verwendet und sonst nichts.

Ich habe es auch gelernt, der Code wurde erheblich kleiner (um ca 2 Drittel) und
erheblich einfacher wartbar.

Wenn der Code validiert ist hst Du zwischen den Browsen nur minimale Differenzen in
der Darstellung. Das ist mit ein Paar Zeilen CSS ist den Griff zu kriegen.

Hallo,

@Scheppertreiber: Genau diese Begründungen sind es die mich zögern lassen. Auf Erfahrungen und persönlichen Meinungen beruhende Aussagen die absolut keine Bedeutung haben.
Weder gibt es Normen, noch gibt es Standards die festlegen ob Tabellen-, oder Containerlayouts besser sind.
Ich betreibe seit mehreren Jahren einen komplett auf Tabellenlayouts basierenden Chat und hatte noch NIE Probleme (Kompatibilität nicht nur auf den Browser bezogen) damit. Welchen Grund sollte ich also haben, die gesamte Struktur über den Haufen zu werfen und auf Container umzusteigen? Eine Ersparnis von 10 Zeilen pro Datei, die bei dem heutigen Stand der Technik nun wirklich nicht mehr relevant sind? Oder sollte ich umsteigen weil die Bloggergemeinde meint, dass Container-Layouts modern sind?

LG

Scheppertreiber

Weil auf einmal alles viel einfacher wird. Wie gesagt, ich habe alles von
Tabellen auf float etc umgestellt und bin froh drum. Der Code ist jetzt nur
noch ein Drittel vom Tabellenlayout - merkt man uA am Traffic.

Tabellenlayout stammt aus einer Zeit wo bei CSS eher etwas nicht ging. Die
Zeiten sind vorbei. Fast alle (na wer wohl nicht?) Browser sind heute
standardkonform.

Ein weiteres Argument ist die Trennung von HTML und Design. Warum sich die
Arbeit mit Tabellen künstlich erschweren ?

Pflege mal komplexere Seiten mit Tabellen, irgendwann springst Du aus dem Fenster.

inflames2k

Dein nicht genannter Browser ist aber laut Aussage des Herstellers Standartkonform.

Na wenn er denkt.

HTML und Desing kann man aber auch mit Tabellenlayout trennen. Tabellen, Spalten und Zeilen kann man auch mit ID's / Klassen füttern.

Scheppertreiber

Man kann alles. Halt es auch richtig machen

Hallo,

also ich denke die Wahl sollte beim Entwickler bleiben :)! Es gibt keine Standards bezüglich Layout und wird hoffentlich auch so schnell keine geben.

LG, Micha

PRIEST

RandomAccess85 schrieb:

Es gibt keine Standards bezüglich Layout und wird hoffentlich auch so schnell keine geben.

BITTE WAS

Scheppertreiber

RandomAccess85 schrieb:

Hallo,

also ich denke die Wahl sollte beim Entwickler bleiben :)! Es gibt keine Standards bezüglich Layout und wird hoffentlich auch so schnell keine geben.

LG, Micha

Doch, die gibt es. Nennt sich "gute fachliche Praxis". Tabellenlayout gehört definitiv nicht dazu.

Auweia! Welcher Standard gibt denn bitte an, dass Tabellenlayouts nicht gut sind? Wo steht geschrieben welche Art und Weise des Layouting ich verwenden muss um aktuell zu bleiben? Haben Browser in naher Zukunft vor, Tabellen zu eliminieren? Gibt es irgendwelche Neuerungen (in Bezug auf Layouting) die ich verpasst habe?

Man Leute, seid doch nicht so blind und verlasst euch steif auf das was irgendwelche Leute in irgendwelchen Blogs schreiben. Nur weil es nun Container gibt, heißt das nicht dass es sträflich ist, Tabellenlayouts zu gestalten.

Brot wird auch immer noch mit Mehl gebacken. Mag es daran liegen, dass es noch keine Alternativen gibt, oder einfach daran, dass es eben so ist ....

LG

Scheppertreiber

Du hast nicht gelesen/verstanden was ich geschrieben habe.

Jedes HTML-Tag hat seine Funktion, so Tabellen zur Darstellung tabellarischer
Inhalte (und nichts anderem). Ist das so schwer zu verstehen ?