HTML - Medien und Gestaltung

7.1 Tabellen mit CSS formatieren

Viele der CSS-Eigenschaften, die Sie bisher kennen gelernt haben, lassen sich auch für die Gestaltung von Tabellen verwenden. Fast alles, was zur Formatierung von Text sowie über Layout-Elemente gesagt wurde, gilt auch für Tabellen. Text und Bilder in Tabellen werden so gestaltet wie außerhalb von Tabellen; auch bei Tabellen wird wie bei den Block-Elementen, die wir kennen gelernt haben, zwischen border, margin und padding unterschieden. Hinzu kommen spezifische Möglichkeiten für die Gestaltung der Rahmen von Tabellen. Außerdem lassen sich die Höhe und die Breite von Zellen unabhängig von der Größe ihres Inhalts bestimmen.

CSS erlaubt es übrigens auch, Tabelleneigenschaften mithilfe der Eigenschaft display auf andere Elemente zu übertragen. Diese Möglichkeit ist bei HTML-Seiten allerdings meist irrelevant, weil HTML über eigene Elementtypen für Tabellen verfügt. Das folgende Beispiel soll nur zeigen, welches Ergebnis table, table-row und table-cell als Werte der Eigenschaft display haben.

Beispiel 83: Übertragen von Eigenschaften mit display

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>Formatierung als Tabelle mit der Eigenschaft
display</title>
   <meta http-equiv="Content-Type" content="text/html;
     charset=UTF-8"/>
  <style type="text/css">
   ul li {
      display: table; 
      border: 1px solid red;
   }
   li ol { display: table-row; }
   ol li { 
      display: table-cell; 
      border: 1px solid green;
   }
  </style>
 </head>
 <body>
  <ul>
   <li>
    <ol>
     <li>XHTML</li>
     <li>Eine Markup-Sprache</li>
     <li>XML</li>
     <li>Eine Metasprache zur Definition von Markup-Sprachen</li>
     <li>XUL</li>
     <li>Eine Markup-Sprache</li>
    </ol>
    <ol>
     <li>SGML</li>
     <li>Eine Metasprache zur Definition von Markup-Sprachen</li>
     <li>SMIL</li>
     <li>Eine Markup-Sprache</li>
     <li>SVG</li>
     <li>Eine Markup-Sprache</li>
    </ol>
   </li>
  </ul>
 </body>
</html>

Das Element ul hat als Inhalt nur ein li, dieses wird mit display: table als Tabelle formatiert. Die Elemente des Typs ol werden mit display: table-row als Tabellenzeilen dargestellt, die Elemente des Typs li, die Nachkommen dieser Elemente sind, als Tabellenzellen. Auf gar keinen Fall sollten Sie dieses Verfahren bei der Formatierung von HTML tatsächlich anwenden. Abgesehen davon, dass diese Formatierung der Semantik der HTML-Elemente widerspricht, wäre ein solches Dokument in Browsern, die CSS nicht unterstützen, nicht wirklich darstellbar. Das Beispiel soll nur zeigen, wie table, table-row und table-cell als Präsentationseigenschaften umgesetzt werden. HTML-Browser stellen die Elemente table, tr und td aufgrund ihrer Vorgaben mit diesen Eigenschaften dar.

Bei der Gestaltung von Dokumenten in anderen Markup-Sprachen sind diese Eigenschaften dagegen sinnvoll. Ein XML-Dokument mit Rechnungsdaten könnte mit CSS als Tabelle formatiert werden, auch wenn die Daten selbst nur entsprechend ihrer Bedeutung ausgezeichnet sind.

Kommentare (0)

Ihr Kommentar

Name