CSS: Tabellen und Listen

Auf dieser Seite werden die CSS-Eigenschaften vorgestellt, mit denen Tabellen und ihre Zellen formatiert werden können. Der Abstand zwischen den Zellen sowie die automatische Ausdehnung von Zellen ihrem Inhalt entsprechend kann eingestellt werden. Außerdem kann die Position des Zelleninhalts und die Darstellung leerer Zellen festgelegt werden.

Weiterhin werden Eigenschaften beschrieben, mit denen Listen formatiert werden können. Dies bezieht sich insbesondere auf die Darstellung von Listenzeichen bzw. Nummerierungen.

Zellzwischenraum – `border-collapse`

W3C Standard

Über die Eigenschaft border-collapse lässt sich einstellen, ob die Zellen einer Tabelle sich berühren sollen oder durch einen Abstand von einander getrennt sind. Die Eigenschaft erwartet einen der folgenden Werte:

• separate – mit Abstand
• collapse – ohne Abstand

Hier ein paar Beispiele:

Code kopieren

<table style='border-collapse:separate;'>
  <tr>
    <td style='border:1px solid #fff;'>&nbsp;</td>
    <td style='border:1px solid #fff;'>&nbsp;</td>
  </tr>
  <tr>
    <td style='border:1px solid #fff;'>&nbsp;</td>
    <td style='border:1px solid #fff;'>&nbsp;</td>
  </tr>
</table>

<table style='border-collapse:collapse;'>
  <tr>
    <td style='border:1px solid #fff;'>&nbsp;</td>
    <td style='border:1px solid #fff;'>&nbsp;</td>
  </tr>
  <tr>
    <td style='border:1px solid #fff;'>&nbsp;</td>
    <td style='border:1px solid #fff;'>&nbsp;</td>
  </tr>
</table>

Dieser Code führt zu folgender Darstellung:

Zellabstand – `border-spacing`

W3C Standard

Über die Eigenschaft border-spacing lässt sich der horizontale und vertikale Abstand zwischen den Zellen einer Tabelle einstellen. Dies setzt voraus, dass der Tabelle nicht die Eigenschaft border-collapse:collapse; zugewiesen wurde. Es können Werte in den gewohnten Einheiten wie px oder em verwendet werden. Wird ein einzelner Wert angegeben, so gilt dieser horzontal und vertikal. Werden zwei Werte angegeben, so gilt der erste Wert für den horizontalen Abstand und der zweite für den vertikalen.

Hier ein paar Beispiele:

Code kopieren

<table style='border-spacing:2px;'>
  <tr>
    <td style='border:1px solid #fff;'>&nbsp;</td>
    <td style='border:1px solid #fff;'>&nbsp;</td>
  </tr>
  <tr>
    <td style='border:1px solid #fff;'>&nbsp;</td>
    <td style='border:1px solid #fff;'>&nbsp;</td>
  </tr>
</table>

<table style='border-spacing:0 5px;'>
  <tr>
    <td style='border:1px solid #fff;'>&nbsp;</td>
    <td style='border:1px solid #fff;'>&nbsp;</td>
  </tr>
  <tr>
    <td style='border:1px solid #fff;'>&nbsp;</td>
    <td style='border:1px solid #fff;'>&nbsp;</td>
  </tr>
</table>

Dieser Code führt zu folgender Darstellung:

Tabellenlayout – `table-layout`

W3C Standard

Über die Eigenschaft table-layout lässt sich festlegen, wie flexibel die Breite einer Tabelle vom Browser gewählt wird. Lautet der Wert dieser Eigenschaft auto, so wird eine festgelegte Breite der Tabelle nur solange respektiert, wie die Breite zur Darstellung der Inhalte ausreicht. Benötigt der Inhalt mehr Platz, so wird die Tabelle breiter. Bei dem Wert fixed wird die festgelegte Breite der Tabelle eingehalten, so dass Inhalte, die mehr Platz benötigen, über ihre Zellen herausragen (es sei denn, ein anderes Verhalten ist mit der Eigenschaft overflow festgelegt.).

Hier ein paar Beispiele:

Code kopieren

<table style='table-layout:auto;width:150px;'>
  <tr>
    <td style='white-space:nowrap;border:1px solid #fff;'>Ich bin eine Zelle</td>
    <td style='white-space:nowrap;border:1px solid #fff;'>Ich bin eine Zelle</td>
  </tr>
  <tr>
    <td style='white-space:nowrap;border:1px solid #fff;'>Ich bin eine Zelle</td>
    <td style='white-space:nowrap;border:1px solid #fff;'>Ich bin eine Zelle</td>
  </tr>
</table>

<table style='table-layout:fixed;width:150px;'>
  <tr>
    <td style='white-space:nowrap;border:1px solid #fff;'>Ich bin eine Zelle</td>
    <td style='white-space:nowrap;border:1px solid #fff;'>Ich bin eine Zelle</td>
  </tr>
  <tr>
    <td style='white-space:nowrap;overflow:hidden;border:1px solid #fff;'>Ich bin eine Zelle</td>
    <td style='white-space:nowrap;border:1px solid #fff;'>Ich bin eine Zelle</td>
  </tr>
</table>

Dieser Code führt zu folgender Darstellung:

Ich bin eine Zelle	Ich bin eine Zelle
Ich bin eine Zelle	Ich bin eine Zelle

Ich bin eine Zelle	Ich bin eine Zelle
Ich bin eine Zelle	Ich bin eine Zelle

Vertikale Ausrichtung – `vertical-align`

W3C Standard

Über die Eigenschaft vertical-align lässt sich die vertikale Position eines Zelleninhalts festlegen. Mögliche Werte sind:

• baseline – Grundlinie
• top – oben
• middle – Mitte
• bottom – unten

In der Praxis findet baseline aber kaum Anwendung, da es in den meisten Fällen den gleichen Effekt wie top hat. Wird kein Wert angegeben, so positionieren die meisten Browser den Inhalt in die vertikale Mitte.

Hier ein paar Beispiele:

Code kopieren

<table>
  <tr>
    <td style='vertical-align:baseline;'>Ich bin eine Zelle</td>
    <td style='vertical-align:top;'>Ich bin eine Zelle</td>
    <td style='vertical-align:middle;'>Ich bin eine Zelle</td>
    <td style='vertical-align:bottom;'>Ich bin eine Zelle</td>
  </tr>
</table>

Dieser Code führt zu folgender Darstellung:

Ich bin eine Zelle

Leere Zellen – `empty-cells`

W3C Standard

Über die Eigenschaft empty-cells lässt einstellen, ob Rahmen und Hintergrund der leeren Zellen einer Tabelle angezeigt werden. Eine Zelle ist dann leer, wenn sie entweder keinen Inhalt oder nur normale Leerzeichen enthält. Ein geschütztes Leerzeichen ( ) gilt als Inhalt. Diese Eigenschaft lässt sich nur verwenden, wenn die Tabelle ebenfalls die Eigenschaft border-collapse:separate; besitzt. Mögliche Werte sind:

• show – Rahmen und Hintergrund anzeigen
• hide – Rahmen und Hintergrund nicht anzeigen

Hier ein paar Beispiele:

Code kopieren

<table style='border-collapse:collapse;empty-cells:show;'>
  <tr>
    <td style='border:1px solid #fff;background-color:#333;'>   </td>
    <td style='border:1px solid #fff;background-color:#333;'>&nbsp;</td>
  </tr>
  <tr>
    <td style='border:1px solid #fff;background-color:#333;'>X</td>
    <td style='border:1px solid #fff;background-color:#333;'></td>
  </tr>
</table>

<table style='border-collapse:separate;empty-cells:show;'>
  <tr>
    <td style='border:1px solid #fff;background-color:#555;'>   </td>
    <td style='border:1px solid #fff;background-color:#555;'>&nbsp;</td>
  </tr>
  <tr>
    <td style='border:1px solid #fff;background-color:#555;'>X</td>
    <td style='border:1px solid #fff;background-color:#555;'></td>
  </tr>
</table>

<table style='border-collapse:collapse;empty-cells:hide;'>
  <tr>
    <td style='border:1px solid #fff;background-color:#333;'>   </td>
    <td style='border:1px solid #fff;background-color:#333;'>&nbsp;</td>
  </tr>
  <tr>
    <td style='border:1px solid #fff;background-color:#333;'>X</td>
    <td style='border:1px solid #fff;background-color:#333;'></td>
  </tr>
</table>

<table style='border-collapse:separate;empty-cells:hide;'>
  <tr>
    <td style='border:1px solid #fff;background-color:#555;'>   </td>
    <td style='border:1px solid #fff;background-color:#555;'>&nbsp;</td>
  </tr>
  <tr>
    <td style='border:1px solid #fff;background-color:#555;'>X</td>
    <td style='border:1px solid #fff;background-color:#555;'></td>
  </tr>
</table>

Dieser Code führt zu folgender Darstellung:


X


X


X


X

Tabellen mit fixierten Überschriften

Insbesondere bei Tabellen, die gescrollt werden müssen, wenn der verfügbare Platz auf einer Website oder im Browserfenster zur Darstellung nicht ausreicht, ist es unpraktisch, wenn die Spalten- und/oder Zeilenüberschriften durch das Scrollen verschwinden und man daher Zelleninhalte nicht mehr dem Kontext zuordnen kann. Die Überschriften lassen sich aber mit der CSS-Eigenschaft position:sticky; fixieren, wenn sie in einem <th>-Element untergebracht sind (funktioniert nicht bei <td>).

Im Beispiel wurden die Spaltenüberschriften zusätzlich um 45° gedreht, damit die Spalten nicht zu breit werden. Dazu müssen die Überschriften in einen zusätzlichen <div>-Container gepackt werden.

Code kopieren

    <style>
      #tablebox { margin-top:20px; width:800px; height:550px; overflow:auto; }
      #tablebox table { border-collapse:collapse; margin-top:50px; }
      #tablebox th { text-align:left; white-space:nowrap; position:sticky; }
      #tablebox td { border:1px solid grey; text-align:center; }
      #tablebox thead th { top:50px; }  /* für Spaltenüberschriften */
      #tablebox tbody th { left:0; }  /* für Zeilenüberschriften */

      #tablebox thead th > div { transform:translate(4px, -9px) rotate(-45deg); width:30px; }
    </style>
    
    <!-- Struktur der Tablle: -->
    <div id="tablebox">
      <table>
        <thead>
          <tr>
            <th></th> <th><div>Spalte 1</div></th> <th><div>Spalte 2</div></th> ...
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>Zeile 1</th> <td></td> ...
          </tr>
          ...
        </tbody>
      </table>
    </div>

Listentyp – `list-style-type`

W3C Standard

Mit der Eigenschaft list-style-type lässt sich einstellen, welche Art von Listenzeichen den einzelnen Elementen einer Liste vorangestellt wird. Folgende Typen sind möglich:

• none – kein Listenzeichen
• disc – Scheibe
• circle – Kreis
• square – Quadrat
• decimal – Zahl
• decimal-leading-zero – Zahl mit führender Null
• lower-roman – kleine römische Zahlen
• upper-roman – große römische Zahlen
• lower-latin, lower-alpha – kleine lateinische Buchstaben
• upper-latin, upper-alpha – große lateinische Buchstaben
• lower-greek – kleine griechische Buchstaben
• armenian – armenische Zeichen
• georgian – georgische Zeichen

Die Werte disc, circle und square sollten nur für unsortierte Listen (<ul>) und die übrigen Werte nur für sortierte Listen (<ol>) verwendet werden.

Beispiel:

Code kopieren

<ul style='list-style-type:none;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ul>

<ul style='list-style-type:disc;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ul>

<ul style='list-style-type:circle;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ul>

<ul style='list-style-type:square;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ul>

<ol style='list-style-type:decimal;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ol>

<ol style='list-style-type:decimal-leading-zero;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ol>

<ol style='list-style-type:lower-roman;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ol>

<ol style='list-style-type:upper-roman;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ol>

<ol style='list-style-type:lower-latin;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ol>

<ol style='list-style-type:upper-latin;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ol>

<ol style='list-style-type:lower-alpha;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ol>

<ol style='list-style-type:upper-alpha;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ol>

<ol style='list-style-type:lower-greek;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ol>

<ol style='list-style-type:armenian;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ol>

<ol style='list-style-type:georgian;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ol>

Dieser Code führt zu folgender Darstellung:

Hund
Katze
Maus

Hund
Katze
Maus

Hund
Katze
Maus

Hund
Katze
Maus

Hund
Katze
Maus

Hund
Katze
Maus

Hund
Katze
Maus

Hund
Katze
Maus

Hund
Katze
Maus

Hund
Katze
Maus

Hund
Katze
Maus

Hund
Katze
Maus

Hund
Katze
Maus

Hund
Katze
Maus

Hund
Katze
Maus

Position des Listenzeichens – `list-style-position`

W3C Standard

Mit der Eigenschaft list-style-position lässt sich einstellen, ob ein Listenzeichen bzw. eine Nummerierung ausgerückt oder bündig mit der Seitenkante des Textflusses dargestellt wird. Folgende Werte sind möglich:

• outside – Listenzeichen ausgerückt
• inside – Listenzeichen bündig

Beispiele:

Code kopieren

<ul style='list-style-position:outside;'>
  <li>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
  <li>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
</ul>

<ul style='list-style-position:inside;'>
  <li>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
  <li>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
</ul>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Grafik für Listenzeichen – `list-style-image`

W3C Standard

Mit der Eigenschaft list-style-image lässt sich einstellen, dass statt eines generischen Listenzeichens eine benutzerdefinierte Grafik verwendet werden soll. Außer none (keine Grafik) kann als Wert ein Pfad zur Grafikdatei angegeben werden. Zusätzlich sollte man die Eigenschaft list-style-type zuweisen, die dann wirksam wird, wenn der Browser die Grafik nicht findet oder unterstützt.

Beispiele:

Code kopieren

<ul style='list-style-image:url("img/bullet.png");list-style-type:square;'>
  <li>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
  <li>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
</ul>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Listenstil – `list-style`

W3C Standard

Mit der Eigenschaft list-style können die drei Eigenschaften list-style-type, list-style-position sowie list-style-image (oder einzelne davon) zusammengefasst notiert werden.

Beispiele:

Code kopieren

<ul style='list-style:square url("img/bullet.png");'>
  <li>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
  <li>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
</ul>

<ol style='list-style:inside decimal;'>
  <li>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
  <li>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
</ol>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

CSS: Tabellen und Listen

Tabellen

Zellzwischenraum – border-collapse

Zellabstand – border-spacing

Tabellenlayout – table-layout

Vertikale Ausrichtung – vertical-align

Leere Zellen – empty-cells

Tabellen mit fixierten Überschriften

Listen

Listentyp – list-style-type

Position des Listenzeichens – list-style-position

Grafik für Listenzeichen – list-style-image

Listenstil – list-style

Zellzwischenraum – `border-collapse`

Zellabstand – `border-spacing`

Tabellenlayout – `table-layout`

Vertikale Ausrichtung – `vertical-align`

Leere Zellen – `empty-cells`

Listentyp – `list-style-type`

Position des Listenzeichens – `list-style-position`

Grafik für Listenzeichen – `list-style-image`

Listenstil – `list-style`