Tabelle breiter als Inhalt - warum?

Unregistriert

Hallo,
ich zerbreche mir den Kopf über die Berechnung der Tabellenbreite. Vielleicht kann mir Jemand helfen?

Folgende Tabelle inklusive aller enthaltener Elemente ist völlig frei von irgendwelchen Breitenangaben. Bloß ein {Border-spacing: 5px}.
Trotzdem wird sie breiter als sie muss.
Ich möchte in einem Formular erreichen, dass sich die beiden einzigen Zellen <td colspan="2">Straße</td> und <td>Hnr.</td> in der ersten Zeile mit den beiden Zellen <td>PLZ</td> und <td colspan="2">Ort</td> in der zweiten Zeile platzsparend verschachteln. Tun sie aber nicht. Jedenfalls nicht so weit wie möglich. Müsste sich die Gesamtbreite nicht aus der Summe der Zellenbreiten der breitesten Reihe ergeben?
Ich kann das gewünschte Verhalten erzwingen, indem ich eine zusätzliche Reihe mit drei Zellen einfüge, deren mittlere Zelle durch Inhalt aufgespannt wird (in meinem Beispiel die auskommentierte erste Zeile).

<table>

<tr>
<td colspan="2">
StraßeStraße
</td>
<td>
Hnr.
</td>
</tr>
<tr>
<td>
PLZ
</td>
<td colspan="2">
OrtOrtOrt
</td>
</tr>
</table>

Freue mich über Erleuchtung,

im Dunkeln, Daniela

MrMurphy

Hallo,

mal abgesehen davon, das Tabellen nur für Tabellendaten benutzt werden sollten, fehlen dir wohl die HTML/CSS-Grundlagen.

Zum einen werden alle Spalten einer Tabelle jeweils gleich breit.

Zum anderen hat jeder Browser sein eigenes Layout mit seinen eigenen Breitenangaben, das er anwendet, wenn ihm keine (CSS-)Angaben mitgeliefert werden.

Am besten wäre es, wenn du ein Online-Beispiel zeigen könntest. Aus deiner Beschreibung ist dein Problem nicht wirklich nachvollziehbar.

Gruss

MrMurphy

Unregistriert

Hallo MrMurphy,

für eine so kurze und vage Antwort erstaunlich viele falsche Aussagen ...

Tabellen sind für Tabellendaten ... ach was?
Vielleicht meinst Du damit, dass sie nicht für Seiten-Layout missbraucht werden sollen. Für die Anordnung von Formularfeldern sind sie trotzdem zu empfehlen.

Ohne Größenangaben in CSS oder HTML (und z.T. auch mit) werden die Zellen vom Inhalt aufgespannt.

Alle Tabellenspalten sind gleich breit? Natürlich falsch.
Vielleicht meintest Du, dass alle Zellen einer Spalte gleich breit sind? Bei Verwendung von colspan≠1 auch falsch.

Soviel zu den Grundlagen ...

Das beschriebene Verhalten kannst Du mit meinem Codeschnipsel (dessen Einrückungen leider verloren gegangen sind) in Deinem Browser nachstellen.

Gruß, Daniela

explanator

Es gibt hier im Editor 3 verschiedene Code-Tags zur Auswahl. Zu finden 2. Zeile rechts, wenn man Javascript eingeschaltet hat.
Bitte beim nächsten mal verwenden.

Zitat

Für die Anordnung von Formularfeldern sind sie trotzdem zu empfehlen.

Nein sind sie nicht, auch wenn man das häufig sieht, wird es dadurch nicht richtig.

Für Formulare gibt es eigene Tags zum Beispiel Label und Fieldset.
Formatierungen werden dann im CSS vorgenommen.

Dazu bedarf es keiner Tabelle.

Eine Tabelle sollte nur für die Ausgabe von tabellarischen Daten herangezogen werden, Formulare haben aber Eingabefelder, das widerspricht der Semantik und Logik.
Demzufolge baust du doch ein Layout mit Tabellen nach, auch wenn es nicht auf die gesamte Seite angewendet wird.

Unregistriert

Hallo Explanator,

wenn ich schrieb, dass Tabellen sich für Formular-Layout empfehlen, meinte ich nicht, dass man es immer so machen sollte.
In meinem speziellen Fall eines etwas komplexeren und dynamischen Anmeldeformulars, wo zu den Eingabefeldern neben den Labeln auch Informationen zu z.B. Preisen inkl. Ermäßigungen zugeordnet werden, hat es sich mal wieder bewährt. Insbesondere, wenn im Fall einer falschen Eingabe eine variable Anzahl an Fehlermeldungen über oder unter dem Eingabefeld aufploppen soll (NOCH verlasse ich mich nicht auf HTML5-Attribute und auch nicht auf Aktivierung von JavaScript). In einer Tabelle behalte ich eine bessere Übersicht über die Ausrichtung der Reihen (das Geschubse mit colspan war hier die Ausnahme und nicht die Regel).

Unabhängig von der Verwendung von Formularfeldern würde mich jetzt aber generell interessieren, wie ein Browser bei der Berechnung der Zellenbreite im Falle von colspan≠1 vorgeht.

explanator

Laut Definition überspannt colspan die Anzahl nachfolgender TD-Elemente.

Die Breite einzelner Td-Elemante wird mit CSS festgelegt, oder vom Inhalt, wenn unbestimmt.

Friedel

Deine Tabelle wird tatsächlich imho nicht bestimmungsgemäß eingesetzt. Auch wenn ich keinen Grund zur Annahme habe, dass du darin keine tabellarischen Inhalte darstellst, missbrauchst du zwar vielleicht nicht das table-Element, aber die Spaten und Zellen.

Trotzdem lässt sich dein Problem lösen, wenn ich die Lösung für ebenso unsauber wie deinen Missbrauch der Spalten halte. Füge einfach, am besten als erste Zeile eine leere Zeile mit 3 Zellen ein und teile das ganze mit colgroup und col ein. Dann kannst du in den col z.B. festlegen, dass die erste Spalte nur 5 em breit sein soll und die letzte soll z.B. 6em breit sein. Postleitzahlen haben nur 5 Stellen, für eine Hausnummer sollten 6 Stellen auch reichen. Das ganze könnte dann z.B. so aussehen:

HTML

<table>
      <colgroup>
        <col width="5em">
        <col>
        <col width="6em">
      </colgroup>
      <tr style="visibility:hidden">
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td colspan="2">
          StraßeStraße
        </td>
        <td>
          Hnr.
        </td>
      </tr>
      <tr>
        <td>
          PLZ
        </td>
        <td colspan="2">
          OrtOrtOrt
        </td>
      </tr>
    </table>

Alles anzeigen

Um deine zusätzliche Zeile wirst du imho nicht herumkommen, denn die Render-Engine bzw. deren Algorithmus wird die Spaltenbreite sonst nicht berechnen können.

P.S. Statt visibility:hidden kannst du natürlich nicht display:none verwenden, denn sonst wird die Zeile ja nicht gerendert.