Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

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.