Als HTML Table Styling be­zeich­net man die grafische Ge­stal­tung von Web­ta­bel­len. Für das Styling greifen Sie auf CSS-An­wei­sun­gen zurück, die Sie wahlweise direkt im HTML-Dokument oder per Verweis auf eine externe CSS-Datei einbinden.

Wie können HTML-Tabellen for­ma­tiert werden?

Für das HTML Table Styling, also die ge­stal­te­ri­sche Anpassung von HTML-Tabellen, greifen Sie im modernen Webdesign auf die Mög­lich­kei­ten von CSS zurück. Mithilfe der Style­sheet-Sprache können Sie das Aussehen der ta­bel­la­ri­schen In­halts­ele­men­te quasi nach Belieben ändern. Zum Beispiel legen Sie in­di­vi­du­el­le Hin­ter­grund­far­ben für die Zellen oder eine besondere Dicke des Rahmens fest. Um den passenden CSS-Code ein­zu­bin­den und auf diese Weise eine HTML-Tabelle zu for­ma­tie­ren, stehen Ihnen drei ver­schie­de­ne Optionen zur Verfügung:

  • Ein­bin­dung im <head>-Bereich: Sie binden die ge­wünsch­ten CSS-Stile mit dem HTML-Tag <style> direkt im Kopf­be­reich eines HTML-Dokuments ein.
  • Externe CSS-Datei: Eine andere Mög­lich­keit ist die Ver­wen­dung einer separaten CSS-Datei, die Sie über das <link>-Tag im <head>-Bereich des HTML-Dokuments einbinden.
  • Inline-CSS: Sie können das HTML Table Styling grund­sätz­lich auch mithilfe von style direkt im Tabellen-Element vornehmen. Dies ist aber nur in Ein­zel­fäl­len zu empfehlen, in denen Wie­der­ver­wend­bar­keit und eine einfache Wartung des Codes keine Rolle spielen.
Tipp

Erfahren Sie in unserem separaten Artikel in aller Aus­führ­lich­keit, wie Sie CSS in HTML einbinden.

Welche Styling-Optionen für HTML-Tabellen gibt es?

Es gibt eine Vielzahl von CSS-Ei­gen­schaf­ten, die Sie nutzen können, um das Aussehen und die Be­nut­zer­freund­lich­keit von Tabellen in Web­do­ku­men­ten zu ver­bes­sern. Die grund­le­gen­den Ta­bel­len­ei­gen­schaf­ten verändern Sie bei­spiels­wei­se mit den folgenden CSS-An­wei­sun­gen:

  • width: Legt die Breite der Tabelle oder einzelner Spalten fest
  • border: Definiert die Breite, den Stil und die Farbe des Rands
  • border-collapse: Kon­trol­liert, ob die Zell­rän­der kom­bi­niert (collapse) oder getrennt (separate) sind
  • border-spacing: Bestimmt den Abstand zwischen den Zellen, wenn border-collapse: separate verwendet wird

Im Folgenden fassen wir einige der wich­tigs­ten HTML-Table-Styling-Optionen nach ver­schie­de­nen Ka­te­go­rien sortiert zusammen.

Zel­len­ab­stand und Text­aus­rich­tung

CSS-Anweisung Be­schrei­bung
padding Fügt Abstand innerhalb der Zellen hinzu
margin Fügt Abstand um die gesamte Tabelle herum hinzu
text-align Bestimmt die ho­ri­zon­ta­le Aus­rich­tung des Textes innerhalb der Zellen (left, center, right)
vertical-align Bestimmt die vertikale Aus­rich­tung des Zel­len­in­halts (top, middle, bottom)

Farben und Hin­ter­grund­bild

CSS-Anweisung Be­schrei­bung
background-color Definiert die Hin­ter­grund­far­be von Zellen, Reihen oder der gesamten Tabelle
color Legt die Textfarbe fest
background-image Bestimmt ein Hin­ter­grund­bild für Zellen oder die gesamte Tabelle

Schrift­ar­ten und -größe

CSS-Anweisung Be­schrei­bung
font-family Bestimmt die Schrift­art
font-size Definiert die Schrift­grö­ße
font-weight Bestimmt die Schrift­stär­ke (z. B. bold für fetten Text)
text-transform Kon­trol­liert die Groß- und Klein­schrei­bung des Textes (uppercase, lowercase, capitalize)

Ta­bel­len­rand

CSS-Anweisung Be­schrei­bung
border-style Definiert den Stil des Rands (solid, dashed, dotted)
border-width Bestimmt die Dicke des Rands
border-color Legt die Farbe des Ta­bel­len­rands fest

HTML Table Styling: So funk­tio­niert’s (mit Bei­spie­len)

Ab­schlie­ßend ver­deut­li­chen wir die Syntax und Funk­ti­ons­wei­se der drei möglichen Varianten für die Ge­stal­tung von HTML-Tabellen anhand von prak­ti­schen Bei­spie­len. Zudem gehen wir kurz auf die Vor- und Nachteile der ver­schie­de­nen Optionen ein.

HTML-Tabelle im <head>-Bereich for­ma­tie­ren

Das CSS-Styling von Tabellen im Kopf­be­reich ist für kleine Projekte und schnelle Än­de­run­gen besonders praktisch. Sie benötigen kein zu­sätz­li­ches Style­sheet und regeln über IDs, für welche Tabellen die An­wei­sun­gen zählen sollen. Al­ler­dings gelten die Ei­gen­schaf­ten nur für die jeweilige Webseite, was die Wie­der­ver­wend­bar­keit und Wartung mühsam macht.

Sie binden den ge­wünsch­ten CSS-Code im Kopf­be­reich mithilfe eines <style>-Elements ein. Im nach­fol­gen­den Beispiel legen wir fest, dass die Kopfzeile der Tabelle einen grünen Hin­ter­grund enthalten soll, während die weiteren Zeilen ab­wech­selnd hellgrau und weiß hin­ter­legt sein sollen:

<html>
<head>
    <style>
        table {
        thead th {
            background-color: #4CAF50; / *Grün für Tabellenkopf* /
        }
        tbody tr:nth-child(odd) {
            background-color: #f2f2f2; / *Hellgrauer Hintergrund für ungerade Zeilen* /
        }
        tbody tr:nth-child(even) {
            background-color: #ffffff; / *Weißer Hintergrund für gerade Zeilen* /
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Spalte 1</th>
                <th>Spalte 2</th>
                <th>Spalte 3</th>
                <th>Spalte 4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Eintrag 1</td>
                <td>Eintrag 2</td>
                <td>Eintrag 3</td>
                <td>Eintrag 4</td>
            </tr>
            <tr>
                <td>Eintrag 5</td>
                <td>Eintrag 6</td>
                <td>Eintrag 7</td>
                <td>Eintrag 8</td>
            </tr>
            <tr>
                <td>Eintrag 9</td>
                <td>Eintrag 10</td>
                <td>Eintrag 11</td>
                <td>Eintrag 12</td>
            </tr>
            <tr>
                <td>Eintrag 13</td>
                <td>Eintrag 14</td>
                <td>Eintrag 15</td>
                <td>Eintrag 16</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
html
Bild: HTML-Tabelle formatieren: Beispiel
Die einfach for­ma­tier­te Beispiel-Tabelle zeigt die ge­wünsch­te ein­ge­färb­te Kopfzeile und die an­schlie­ßend wech­seln­den Zei­len­far­ben.

HTML Table Styling via CSS-Sheet

Die Ge­stal­tung von HTML-Tabellen via externem CSS-Sheet bietet die best­mög­li­che Weise, um Inhalt und Design von­ein­an­der zu trennen. Zudem sind die An­wei­sun­gen besonders leicht für andere Seiten wie­der­zu­ver­wen­den. Da Browser die CSS-Datei zwi­schen­spei­chern können, lässt sich außerdem die Ladezeit op­ti­mie­ren. Für kleinere Web­pro­jek­te ist diese Variante mitunter aber zu aufwändig.

Das zuvor genutzte Beispiel rea­li­sie­ren Sie in diesem Fall in zwei Schritten: Zunächst erstellen Sie eine CSS-Datei mit dem Namen styles.css, die Sie im selben Ver­zeich­nis ablegen, in dem sich die Webseite befindet und fügen dort den folgenden Code ein:

thead th {
      background-color: #4CAF50; / *Grün für Tabellenkopf* /
    }
    tbody tr:nth-child(odd) {
      background-color: #f2f2f2; / *Hellgrauer Hintergrund für ungerade Zeilen* /
    }
    tbody tr:nth-child(even) {
      background-color: #ffffff; / *Weißer Hintergrund für gerade Zeilen* /
}
css

Im zweiten Schritt binden Sie die Datei im Header über ein <link>-Element ein. Der an­schlie­ßen­de Code der Tabelle ändert sich nicht:

<html>
<head>
        <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <table>
        <thead>
            <tr>
…
</html>
html

HTML-Tabelle via Inline-Code gestalten

Inline-CSS ist die prak­ti­sche Variante, wenn Sie nur spe­zi­fi­sche An­pas­sun­gen an einem einzelnen Ta­bel­len­ele­ment vornehmen möchten. Bei kleinen, ein­ma­li­gen Projekten oder Tests, bei denen Wie­der­ver­wend­bar­keit keine Rolle spielt, ist diese Option also durchaus gefragt. Für nach­hal­ti­ge­re Code-Szenarien sollten Sie jedoch immer auf eine der beiden anderen Ein­bin­dungs­for­men zu­rück­grei­fen.

Das Inline-Styling nehmen Sie einfach direkt in den be­tref­fen­den Elementen einer HTML-Tabelle vor. Für unser Beispiel sieht der Code dann fol­gen­der­ma­ßen aus:

<body>
    <table>
        <thead>
            <tr>
                <th style="background-color: #4CAF50;">Spalte 1</th>
                <th style="background-color: #4CAF50;">Spalte 2</th>
                <th style="background-color: #4CAF50;">Spalte 3</th>
                <th style="background-color: #4CAF50;">Spalte 4</th>
            </tr>
        </thead>
        <tbody>
            <tr style="background-color: #f2f2f2;">
                <td>Eintrag 1</td>
                <td>Eintrag 2</td>
                <td>Eintrag 3</td>
                <td>Eintrag 4</td>
            </tr>
            <tr>
                <td>Eintrag 5</td>
                <td>Eintrag 6</td>
                <td>Eintrag 7</td>
                <td>Eintrag 8</td>
            </tr>
            <tr style="background-color: #f2f2f2;">
                <td>Eintrag 9</td>
                <td>Eintrag 10</td>
                <td>Eintrag 11</td>
                <td>Eintrag 12</td>
            </tr>
            <tr>
                <td>Eintrag 13</td>
                <td>Eintrag 14</td>
                <td>Eintrag 15</td>
                <td>Eintrag 16</td>
            </tr>
        </tbody>
    </table>
</body>
html
Zum Hauptmenü