Tabellen in HTML5

1. offizieller Beitrag

    Hallo,
    beim Umstellen diverser Webseiten von HTML 4.01 transitional auf HTML 5 ist mir folgendes aufgefallen.
    Tabellenzellen passen sich nicht mehr an den Inhalt an, sondern es erscheint, dass sie in der Höhe immer ein paar Pixel größer sind, als sie sein müssten/sollten.
    Bei textbasierten Inhalten in der Zelle fällt das nicht so auf, jedoch bei graphischen Inhalten kann das störend sein.
    Als Beispiel hier ein Bild, das in vier Teile aufgeteilt und in die 4 Zellen einer 2x2 Tabelle eingefügt ist.
    So sieht es in einem HTML 5 Dokument aus

    http://s414653727.online.de/tab_test/test_html5.html

    zum Vergleich die Seite mit einem HTML 4.01 transitional Doctype

    http://s414653727.online.de/tab_test/test_…ansitional.html

    Der Code dieser beiden Seiten ist (bis auf den Doctype) identisch.

    Hat jemand eine Idee, wie man in HTML 5 die Darstellung so einrichten kann, wie es mit HTML 4.01 transitional war - also Zellenhöhe gleich Höhe des Inhalts?

    Bei den 'Strict-Varianten' älterer HTML Versionen war/ist die Darstellung von Tabellenzellen mit diesen Extrapixeln auch schon so, wie bei HTML 5. Ist mir nur nie aufgefallen, da ich meist 'transitional' genutzt habe.

    Vielen Dank schon mal!

    if(!sleep)

    {$sheep++;}

    Damit werde ich mich mal beschäftigen - kannst mir dazu einen passenden Link posten?
    Bei mir klingelt bei dem Begriff 'Flex-Layout' im Kopf nur .. adaptives Webdesign und MediaQuerys. Aber vielleicht klingelt mein Kopf da ja nicht richtig.

    if(!sleep)

    {$sheep++;}

    @Bandit
    Danke für den Link - schon interessant und sicher kann man das gut verwenden. Allerdings sehe ich dort keinen Lösungsansatz für dieses 'Bild-in-Tabellenzelle-Problem', denn es soll ja nicht das 'Flex Item' (Bild) an den 'Flex Container' (Tabellenzelle) angepasst werden, sondern umgekehrt. Das Bild soll so bleiben wie es ist und nicht 'verzerren', sondern die Tabellenzelle soll sich an die Bildgröße anpassen und nicht von sich aus so eine Art Padding erzeugen.
    Da allerdings alle Browser, die ich zum Testen benutze, dieses Verhalten zeigen, gehe ich davon aus, dass es von W3.org so gewollt ist und in irgendeiner Spezifikation so drin steht.

    if(!sleep)

    {$sheep++;}

    Hallo

    Zitat

    Da allerdings alle Browser, die ich zum Testen benutze, dieses Verhalten zeigen, gehe ich davon aus, dass es von W3.org so gewollt ist und in irgendeiner Spezifikation so drin steht.

    Richtig.

    Tabellen (table-Element) sind nur für Tabellendaten gedacht. Und bei denen ist das Verhalten durchaus gewollt.

    Indem du das table-Element zum Layouten mißbrauchst schaffst du ein Problem, welches überhaupt nicht vorhanden ist und suchst dann eine Lösung, die eigentlich überhaupt nicht benötigt wird.

    Da du uns nicht mitteilst was du überhaupt willst können wir dir auch kaum konkret helfen. Mit den bisherigen, mehr als mageren, Informationen empfehle ich dir auch Flexbox.

    Gruss

    MrMurphy

    Ich dachte eigentlich auch, dass meine Frage klar und mit allen erforderlichen Informationen versehen war.

    Zitat von Sailor

    Hat jemand eine Idee, wie man in HTML 5 die Darstellung so einrichten kann, wie es mit HTML 4.01 transitional war - also Zellenhöhe gleich Höhe des Inhalts?

    Aber ich gestehe ein, dass der Hintergrund der Frage vielleicht nicht so richtig klar geworden ist.

    Ich verwende gerne 'geslicete' Bilder und eine Tabelle ist eine einfach zu erstellende Möglichkeit, dieses Bild in einem Stück auf der Webseite einzubinden. Das hat nichts mit Missbrauch von Tabellenelementen zu Layoutzwecken zu tun, sonder dient mehr dem Schutz meiner Daten/Bilder.
    Die Bilder können so nicht einfach durch Rechtsklick downgeloaded werden.
    Finden sich auch nicht (als Ganzes) im Cache.
    Können nicht verlinkt werden.
    Bieten darüber die Möglichkeit, einzelne Bildsegmente als Hyperlink zu nutzen und unterschiedliche 'title' zu vergeben.
    .. ach ja... und außerdem neige ich dazu, hin und wieder kleine Spielereien in Webseiten einzubauen. So wie diese hier..

    http://s414653727.online.de/tab_test/slice_pic_401.php

    Ich hoffe, damit sind jetzt wirklich alle Unklarheiten ausgeräumt.
    Und mit Flexbox werde ich mich näher beschäftigen.

    if(!sleep)

    {$sheep++;}