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/Hintergrund

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Dieser Artikel behandelt Besonderheiten beim Verwenden von Hintergrundeigenschaften im Zusammenhang mit Tabellen. Allgemeines zu Hintergründen finden Sie in der Dokumentation unter CSS/Eigenschaften/Hintergrundfarben und -bilder.


Beim Gestalten des Hintergrunds für Tabellen ist zu beachten, dass das Tabellenlayout durch das Übereinanderlegen mehrerer Schichten entsteht. Dies sind von oben nach unten:

  1. die Tabellenzellen
  2. die Tabellenzeilen
  3. die Zeilengruppen
  4. die Tabellenpalten
  5. die Spaltengruppen
  6. die Tabelle
Beispiel ansehen …
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Schichtenmodell einer Tabelle</title>
<style>
  table, th, td  {border: 1px solid black; border-spacing: 10px;}
  th, td         {padding: 20px;}
  #tabelle       {background-color: #8a9da8;}
  #spaltengruppe {background-color: #df6c20;}
  #spalte        {background-color: #5c82d9;}
  #zeilengruppe  {background-color: #8db243; color: #ffffff;}
  #zeile         {background-color: #e7c157;}
  #zelle         {background-color: #c32e04;}
</style>
</head>
<body>
  <table id="tabelle">
    <caption>Tabelle zur Veranschaulichung des Schichtenmodells</caption>
    <colgroup id="spaltengruppe">
      <col id="spalte">
      <col>
      <col>
    </colgroup>
    <colgroup>
      <col>
    </colgroup>
    <thead>
      <tr>
	<th>Ü 1</th>
	<th>Ü 2</th>
	<th>Ü 3</th>
	<th>Ü 4</th>
      </tr>
    </thead>	  
    <tbody id="zeilengruppe">
      <tr id="zeile">
        <td id="zelle">Zelle 1</td>
	<td>Zelle 2</td>
	<td>Zelle 3</td>
	<td>Zelle 4</td>
      </tr>
      <tr>
        <td>Zelle 5</td>
	<td>Zelle 6</td>
	<td>Zelle 7</td>
	<td>Zelle 8</td>
      </tr>
    </tbody>
  </table>
</body>
</html>
Die Grafik illustriert den Aufbau einer Tabelle am konkreten Beispiel.

Schichtenmodell einer Tabelle.png

Das Feld "Ü4" wird in grau dargestellt, weil die Hintergründe für die entsprechenden <th>, <tr>, <thead>, <col> und <colgroup> transparent sind. Es ist also der Hintergrund des table-Elements zu sehen. Wäre auch dieser transparent, so würde man den Hintergrund des unter der Tabelle liegenden Elementes (meist, wie auch in diesem Beispiel <body>) sehen.

Aus ähnlichen Gründen ist "Zelle 5" grün.