CSS/Eigenschaften/Tabellenformatierung/width

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Dieser Artikel beschreibt die Verwendung der Eigenschaft width im Zusammenhang mit Tabellen. Für den allgemeinen Artikel zu width siehe CSS/Eigenschaften/Größenangaben/width.


Die Eigenschaft width gibt abhängig von table-layout die Mindest- oder feste Breite einer Tabellenspalte an.

Empfehlung: zum besseren Verständnis wird das Studium des Artikels zum Box-Modell empfohlen

Beim Festlegen von Breiten für Tabellenelemente muss man beachten, dass Tabellen in HTML-Dokumenten zeilenweise abgearbeitet werden. Dennoch kann man dem Browser schon vor der Darstellung der Tabelle Informationen über die Breite der entsprechenden Tabellenspalten liefern.

Beachten Sie: table ist das einzige Tabellenelement, welches einen über margin steuerbaren Außenabstand besitzt. Möglicherweise kommt es zu unerwünschten Effekten bei der gleichzeitigen Verwendung der HTML-Attribute cellspacing bzw. cellpadding und CSS-Eigenschaften.
Beispiel ansehen …
<!DOCTYPE html>
<html> 
  <head> 
    <meta charset="utf-8">
    <title>Breitenangaben für Tabellen</title>
    <style>
      td, th         { border: 1px solid; }
      #spaltengruppe { width: 120px; }
      #spalte4       { width: 200px; }
    </style>
  </head>
  <body>
  <table>
    <caption>Breitenangaben</caption>
    <colgroup id="spaltengruppe">
      <col>
      <col>
      <col>
    </colgroup>
    <colgroup>
      <col id="spalte4">
    </colgroup>
    <thead>
      <tr>
        <th>Ü 1</th>
        <th>Ü 2</th>
        <th>Ü 3</th>
        <th>Ü 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Zelle 1</td>  
        <td>Zelle 2</td>  
        <td>Zelle 3</td>  
        <td>Zelle 4</td>  
      </tr>
    </tbody>
  </table> 
  </body>
</html>
Beachten Sie: Die Browser interpretieren diese Angaben unterschiedlich. Firefox und Internetexplorer setzen für jede Spalte der Gruppe eine Breite von 120px abzüglich border und padding; Opera, Safari und Chrome setzen für die gesamte Gruppe eine Breite von 120px. Der IE8 ist hierbei am konsequentesten: Er setzt bei table-layout:fixed; eine Inhaltsbreite von 120px, bei table-layout:auto; eine Gesamtbreite von 120px.

Prozentangaben sind ebenfalls möglich. Diese beziehen sich dann auf die Breite des table-elements. Es ist dabei zu beachten, dass Breitenangaben einzelner Spalten Vorrang vor Breitenangaben in Spaltengruppen haben.

Beispiel
...
    <style>
      #spaltengruppe { width: 120px; }
      #spalte1       { width: 50%; }
      #spalte4       { width: 200px; }
    </style> 

...

    <colgroup id="spaltengruppe">
      <col id="spalte1">
      <col>
      <col>
    </colgroup>
    <colgroup>
      <col id="spalte4">
    </colgroup>
...
Spalte 1 wird in diesem Beispiel 50% der gesamten Tabellenbreite, also 440px abzüglich border und padding, einnehmen.
Beachten Sie: Wenn Sie colgroup verwenden, müssen Sie jede Spalte einer Spaltengruppe zuordnen.
<colgroup>
  <col>
  <col>
</colgroup>
  <col>
ist ungültiges HTML.
Beachten Sie: In XHTML ist das schließende col-Tag notwendig.