css mit Adi Prinz

Tabellen

Während man in früheren HTML-Zeiten ganze Internetseiten mit Tabellen gestaltete, gilt das in modernen HTML-Zeiten als verpönt. Der Grund dafür ist ganz einfach, es widerspricht dem Prinzip von Trennung des Dokumentinhalts (HTML) und seiner Gestalltung (CSS). Das soll aber nicht heißen, dass man Tabellen nicht mehr verwenden soll, ganz im Gegenteil. Tabellen eignen sich besonders für die Darstellung von tabellarischen Informationen.
Viele der Attribute, die für Tabellen wichtig sind, wurden bereits behandelt, width und height für Breite und Höhe, background für Hintergründe, border für Rahmen usw. Es gibt noch ein paar Attribute die speziell für Tabellen wichtig sind:

Eigenschaft Bedeutung Wertzuweisung
caption-side Position der Tabellenüberschrift none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit
table-layout Rahmenart none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit
border-collapse Rahmenfarbe transparent, Farbname, Hexadezimal, RGB, RGBA, HSL, HSLA , initial, inherit
border-spacing Rahmenbreite thin, medium, thick, Längenangabe, initial, inherit
empty-cells Zusammenfassung border-color border-style border-width, initial, inherit

caption-side

Mit der caption-side-Eigenschaft plaziert man die Tabellenübeschrift oberhalb bzw. unterhalb der Tabelle, caption-side ist vererbbar. 

caption {
  caption-side: bottom;
}

Mögliche Werte von caption-side

  • top: Beschriftung befindet sich oberhalb der Tabelle (Standardwert)
  • bottom: Beschriftung befindet sich unterhalb der Tabelle

table-layout

Mit der table-layout-Eigenschaft steuern sie das Verhalten der angezeigten Spaltenbreite, table-layout ist nicht vererbbar. 

table {
  table-layout: fixed;
}

Mögliche Werte von table-layout

  • auto:(Standardwert) Die Spaltenbreite wird durch den breitesten Eintrag der Zellen festgelegt, langsame Ladezeit
  • fixed: Abhängig von der Tabellen- und Spaltenbreite, schnellere Ladezeit

empty-cells

Mit der empty-cells-Eigenschaft legen sie fest, ob um für leere Zellen Rahmen und Hintergrund dargestellt werden soll, empty-cells ist vererbbar. 

table {
  empty-cells: hide;
}

Mögliche Werte von empty-cells

  • show: Hintergrund und Rahmen werden für leere Zellen gezeigt(Standardwert)
  • hide: Hintergrund und Rahmen werden für leere nicht Zellen gezeigt

border-collapse

Die CSS-Anweisung border:1 im table-Element weist sowohl der Tabelle, als auch den Tabellenzellen einen Rahmen zu. Somit bekommt die Tabelle einen doppelten Rahmen mit Abstand dazwischen. Mit der border-collapse-Eigenschaft kann diese Verhalten geändert werden, border-collapse ist vererbbar. 

table {
  border-collapse: collapse;
}

Mögliche Werte von border-collapse

  • separate: Standardwert
  • collapse: Rahmen fallen zusammen

border-spacing

Mit der border-spacing-Eigenschaft legen sie den Abstand von angrenzenden Zellen fest. Die Anweisung macht nur Sinn bei border-collapse: separate, border-spacing ist vererbbar.

Vertikaler und horizontaler Abstand

  1. Bei nur einer Längenangabe bekommen vertikaler- und horizontaler Abstand denselben Wert
  2. Bei zwei Längenabgaben definiert der erste Wert den horizontalen, der zweite Wert den vertikalen Abstand
table {
  border-spacing: 0 2px;
}

Mögliche Werte von empty-cells

  • Längenangabe

Tabellen & display

Es ist auch möglich mit Nicht-Tabellen-Elementen Tabellen bzw. Raster zu erstellen. Für unterschiedliche Tabellenelemente stehen auch display-Eigenschaften zur Verfügung:

  • table: Darstellung als Tabelle (wie <table>)
  • table-caption: Darstellung als Tabellenüberschrift (wie <caption>)
  • table-cell: Darstellung als Tabellenzelle (wie <td>, <th>)
  • table-column: Darstellung als Tabellenspalte (wie <col>)
  • table-columns-group: Darstellung als Tabellespalten (wie <colgroup>)
  • table-footer-group: Darstellung als Tabellefusszeile (wie <tfoot>)
  • table-header-group: Darstellung als Tabellenkopfzeile (wie <thead>)
  • table-row: Darstellung als Tabellenzeile (wie <tr>)
  • table-row-group: Darstellung als Tabellenzeilen (wie <tbody>)

Tabelle mit div-Elementen

Im folgenden Beispiel werden div-Elemente zu Tabellen und Tabellenzellen. Die jeweiligen Klassen erhalten mit Hilfe von display Eigenschaften, durch die sich die Elemente, denen sie zugewiesen werden, wie die entsprechenden HTML-Elemente für Tabellen verhalten. 

<style>
  div.table {
  display: table;
  width: calc(100% - 10px);
  border: 1px solid blue;
  padding: 5px;
}
div.cell { 
  display: table-cell;
  border: thin solid red;
  width: 200px;
  padding: 5px;
}
</style>
<div class="table">
  <div class="cell">Ich bin eine Spalte.</div>
  <div class="cell">Ich bin eine zweite Spalte.</div>
  <div class="cell">Ich bin eine dritte Spalte mit noch mehr Inhalt.</div>
  <div class="cell">Ich bin eine vierte Spalte.</div>
</div>