CSS mit Adi Prinz-Tabellen

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

Bei nur einer Längenangabe bekommen vertikaler- und horizontaler Abstand denselben Wert
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>

Transparenz (opacity)

Die opacity-Eigenschaft bestimmt die Transparenz sowohl von Farben (z.B. in einem Container-Element) als auch von Bildern. Allerdings werden mit opacity nicht nur Hintergründe, sondern auch Schrift und Rahmen transparent dargestellt. Dies ist meistens nicht erwünscht, aber Transparenz für Farbangaben ist auch mit mit dem Farbmodell rgba() möglich.

Eigenschaft	Bedeutung	Wertzuweisung
opacity	Transparenz	Zahl: von 0.0 (fully transparent) bis 1.0 (fully opaque), initial, inherit

opacity

Transparenz bei Farbangaben kann auch mit dem Alphakanal realisiert werden.

img {
  opacity: 0.6;
}
div {
  border: #060 thick solid;
  background-color: rgba(255, 0, 0, 0.2);
}

filter

Mit Hilfe von CSS-Filter-Effekten können die Elemente einer Website gestalterisch manipuliert werden. So kann man Bilder in ihrer Farbe verändern, Schatten hinzufügen, die Deckkraft reduzieren oder Bilder und Texte weichzeichnen.

Eigenschaft	Bedeutung	Wertzuweisung
filter	Effekte für Bilder und Hintergründe	none, blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), url()

Mögliche Werte von filter

none: kein Effekt (Standardwert)
blur(): Längenangabe für Weichzeichner (Pixel)
brightness(): Prozentangabe für Helligkeit
contrast(): Prozentangabe für Kontrast
drop-shadow(h-shadow v-shadow blur spread color): Schatteneffekt ähnlich wie box-shadow
grayscale(): Prozentangabe für Graustufe
hue-rotate(): Gradangabe (0-360deg) für Drehungseffekt
invert(): Prozentangabe für Umkehrung
opacity(): Prozentangabe für Transparenz
saturate(): Prozentangabe für Sättigung
sepia(): Prozentangabe für Konvertierung in Sepiafarben
url(): für komplexere SVG-Filter

Filter-Beispiel als Graustufenbild

#myImg {
  filter:grayscale(100%);
}

Ich habe hier einen Link für Beispiele von filter.

w3schools.com