HTML/Tabellen/Gestaltung mit CSS/Hintergrund

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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 Tabellenspalten
  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.
Abgerufen von „http://wiki.selfhtml.org/index.php?title=HTML/Tabellen/Gestaltung_mit_CSS/Hintergrund&oldid=87039“