Tabellen im Quelltext nicht erwünscht?

Ich habe das schon öfter gelesen, dass Seiten, die Tabellen verwenden, als “pfui” usw. bezeichnet werden.
Was ist denn so schlimm an Tabellen?
Warum soll man Tabellen nicht (mehr) verwenden?
Welche Alternativen gibt es?

hi,

gegen Tabellen selbst spricht nichts - jedenfalls als wirkliche Tabelle. Das Design jedoch als Tabelle zu gestalten ist “pfui”. Dafür gibt es Blockelemente, wie etwa

- das ganze kann dann per CSS wunderbar gestaltet werden und liefert einen hübscheren Quelltext als so manche Tabelle, die von einigen Browsern komisch interpretiert wird.

Nichts - wenn man sie benutzt, um tabellarische Daten auszuzeichnen; dafür sind sie gedacht.

Man sollte sie nicht zu Layoutzwecken missbrauchen.

Das ist ein schon zigfach diskutiertes Thema - Informationen dazu solltest du also selber finden können.

Als Einstieg: aktuell.de.selfhtml.org/weblog/css-spaltenlayout

(Pauschal „DIVs“ als Layoutmittel zu empfehlen, ist natürlich auch Unfug. HTML zu schreiben, dass die Struktur der Inhalte bestmöglich auszeichnet, ist das Ziel. DIVs sind dabei höchstens ein gruppierendes Hilfsmittel.)

Man sollte durchaus Pauschalaussagen von gekennzeichneten Beispielen unterscheiden können…

Was denn nun?

“div” ist Unfug, Tabellen auch, was bleibt denn da noch?

Neinnein, Tabellen sind Unfug, und divs (aber nicht nur sondern im einklang mit eben anderen Gestaltungselementen der Spaltenlayouts) sind gut :wink:

…hmmm

Ich schau mal, ob ich das verinnerlichen kann :wink:

(obwohl mir Tabellen immer noch am einfachsten vorkommen, statt “div”'s

[quote=“kerbination”]hi,

…als so manche Tabelle, die von einigen Browsern komisch interpretiert wird.[/quote]

Wie denn “komisch” ???
Wie muss ich mir das vorstellen?

Naja, nehmen wir mal ne rahmenlose Tabelle mit 4 Spalten die wir einfach stumpf mit irgendeiner Hintergrundfarbe füllen, etwa blau. Schauen wir uns das ganze in Opera, Chrome oder Konqueror an haben wir eine große blaue Fläche… Firefox bspw. interpretiert da etwas anders und fügt an den Übergängen sichtbare Nähte in Form von Rahmen ein…

Hmm, ok, das leuchtet mir ein.

Guckst Du mal dort —>

http://tarantoga.bplaced.net/bp_html/test/tabellen/index.html

und schaust mal, wie man die Tabelle per div gestalten könnte. (Danke)

Das ist tabellarischer Inhalt.

Wenn du das mit divs lösen willst kannst du zum Beispiel display: inline-block verwenden. Das hat den Vorteil, dass die einzelnen Elemente immer die komplette Breite ausfüllen

Das sind ja vor allem einfache Bilder.
Da kann man die Tabelle weglassen und einfach die Bilder
(img-Elemente) nacheinander notieren. Wo man eine neue
Zeile beginnen will, verwendet man ein br-Element (in diesem Falle
eine durchaus sinnvolle Anwendung des Elementes).
Wenn ausreichend Platz ist, werden die Bilder bis zum br in einer
Zeile dargestellt, sonst erfolgt bereits vorher wie bei Text ein
automatischer Zeilenumbruch.
Spannend ist dann allerdings der Text mittendrin, entweder man
läßt den einfach im Text mitfließen oder man muß da wirklich was
mit CSS basteln - ist allerdings knifflig, das mit Schriftgröße und
Bildgröße stimmig hinzubekommen, weil man die Schriftgröße
des Nutzers nicht kennt.

Bei Tabelleninhalt würde man da eher noch Beschriftungen
(th-Elemente) hinzufügen, um klarzumachen, was die Spalten oder
Zeilen bedeuten, auch caption kann da sinnvoll sein, auch eine
Kurzzusammenfassung, die einem Leser ohne graphische Anzeige
schnell zur Kenntnis bringt, um was es in der Tabelle geht.
Auf die Schnelle konnte ich jetzt allerdings keine großen
Gemeinsamkeiten in einer jeweiligen Spalte oder Zeile entdecken,
die diese jedenfalls eindeutig von den Inhalten der anderen
Spalten oder Zeilen unterscheidet, insofern ist nicht direkt davon
auszugehen, daß eine Tabelle hier sinnvoll ist - oder zumindest
sollte man dann diese Struktur und die inhaltliche Bedeutung der
Zeilen und Spalten besser herausarbeiten und eventuell mit Text
ergänzen, der erläutert, was da mit wem wie korreliert ist.

Die Inhalte der alt-Attribute der img-Elemente sollte man auch
noch mal auf Sinngehalt überprüfen und umformulieren, bei einer
deutschen Seite wohl auch übersetzen - oder eben die gesamte
Seite auf englisch verfassen.

Ansonsten sind die semantischen Möglichkeiten der Auszeichnung
mit (X)HTML sehr begrenzt/bescheiden. Wenn man da mehr
braucht, kann man eine andere Sprache verwenden oder auch
XHTML+RDFa - sieht mir hier aber nicht soooo dringlich aus ;o)

Die Dekoration mit CSS erfolgt unabhängig davon und hat keinen
Einfluß auf die inhaltliche Bedeutung - das bedeutet, Sinn und
Inhalt der Seite werden mit CSS (oder auch js) nicht geändert.

Ich habe nun mal verschiedene Browser ausprobiert, um zu sehen, wie die Seite dargestellt wird.

Ich glaube, ich weiß nun, was Ihr meint.

Amaya:

Firefox:

google-chrome:

IE 8:

Dass das soooo unterschiedlich interpretiert wird, war mir gar nicht bewusst. (Und dabei habe ich ja nicht mal alle gängigen Browser ausprobiert.)

Eigentlich sollte das so aussehen, dass die Bilder alle keinen Rand haben, zwischen den Tabellen keine Ränder oder sonst was zu sehen ist. Also dass die Bilder praktisch nahtlos verbunden sind.
Ich habe keine Ahnung, wie ich das realisieren soll.

Übrigens, nicht dass Ihr denkt, das wäre meine neue hp.
Das ist nur ein Test, um zu sehen, wie es funktioniert.

Meine hp wird ein anderes Thema haben… Surprise :p

Dann wird dich das sicher wenig erschrecken:

so sieht’s nämlich bei 1680px Breite aus :wink:

Upps!
Noch ein Chrome-Beispiel.

Doch, das erschrickt mich schon, wie unterschiedlich die sämtlichen Browser das darstellen.
Da wird man ja direkt abgeschreckt, irgendwas per html zu schreiben. Muss ich mir wohl noch mal überlegen. :neutral_face:

Die unterschiedliche Darstellung der Webseite in den div. Browsern ist m.E. jedoch nicht auf die Verwendung der Tabelle schlechthin zurückzuführen, sondern auf die üngenügende Auszeichnung der einzelnen HTML-Elemente. Will sagen der Verzicht von Tabellenelementen allein bringt noch nicht die Garantie für eine eiheitliche Darstellung in div. Browsern. Dafür bedarf es der richtigen Anwendung von CSS unter Beachtung der browserspezifischen Besonderheiten.

Naja, das ist doch alles recht ähnlich, nur ein paar Kleinigkeiten sind
anders, das wird zum einen an der Schriftgröße liegen, was man
als Autor ohnehin nicht vollständig unter Kontrolle hat, zum anderen
an browser-Stilvorlagen, die natürlich unterschiedlich ausfallen
können, vom Autor aber überschrieben werden können.
Bei Tabellen ist bei (X)HTML aber ohnehin vorgegeben, daß die
Darstellung der Lesbarkeit tabellarischer Daten Priorität haben soll
gegenüber den Darstellungswünschen des Autors, insofern kann man
da immer damit rechnen, daß verschiedene browser unterschiedlich
optimieren, je nachdem, was Programmierer vermuten, was gut
lesbar ist oder was die für Rückmeldungen von den Nutzern
bekommen haben - das können bei verschiedenen browsern ja
jeweils andere sein.