Ausführbare HTML-Docs: Tabellenrahmen

Q: Wie gebe ich einer Tabelle in HTML einen Rahmen?

Mit CSS an der Tabelle und ihren Zellen: table { border-collapse: collapse; } th, td { border: 1px solid #999; }. Der Rahmen an den Zellen zeichnet das Gitter, und border-collapse: collapse verschmilzt benachbarte Rahmen zu einfachen Linien.

Q: Wie runde ich die Ecken einer Tabelle ab?

border-radius wirkt nicht an einer Tabelle mit border-collapse: collapse. Nimm border-collapse: separate mit border-spacing: 0, setz den Radius an die Tabelle und gib den Eckzellen einen passenden Radius (border-start-start-radius und Verwandte), damit ihr Hintergrund nicht aus den Ecken ragt.

So gibst du einer Tabelle einen Rahmen

Tabellen haben standardmäßig keine Rahmen. Füg sie mit CSS hinzu: Ein border an jeder Zelle zeichnet das Gitter, und border-collapse: collapse an der Tabelle verschmilzt jedes Paar benachbarter Rahmen zu einer Linie.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table border</title>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
  </style>
</head>
<body>
  <table>
    <tr><th>Size</th><th>Price</th></tr>
    <tr><td>Small</td><td>3.00</td></tr>
    <tr><td>Large</td><td>4.50</td></tr>
  </table>
</body>
</html>

Die Kurzschreibweise border nimmt eine Breite, einen Stil und eine Farbe in beliebiger Reihenfolge: 1px solid #6b7280. Setz sie an th, td, nicht nur an table: Ein Rahmen an der Tabelle zeichnet nur den äußeren Rand.

border-collapse: separate vs. collapse

border-collapse entscheidet, ob sich Zellen Rahmen teilen.

Wert	Ergebnis
`separate` (Standard)	Jede Zelle hat ihren eigenen Rahmen, mit einer Lücke zwischen den Zellen, die `border-spacing` festlegt
`collapse`	Benachbarte Zellen teilen sich einen Rahmen; `border-spacing` wird ignoriert

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-collapse</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
    table { border: 2px solid #2563eb; }
    th, td { border: 2px solid #f59e0b; padding: 6px 10px; }
    .separate { border-collapse: separate; border-spacing: 6px; }
    .collapse { border-collapse: collapse; }
  </style>
</head>
<body>
  <table class="separate">
    <caption>separate</caption>
    <tr><td>A</td><td>B</td></tr>
    <tr><td>C</td><td>D</td></tr>
  </table>
  <table class="collapse">
    <caption>collapse</caption>
    <tr><td>A</td><td>B</td></tr>
    <tr><td>C</td><td>D</td></tr>
  </table>
</body>
</html>

In der Tabelle mit separate siehst du beide Ebenen: den blauen Tabellenrahmen und einen eigenen gelben Kasten um jede Zelle, mit border-spacing dazwischen. Ändere 6px in 0, und die Zellen berühren sich, aber die Linien sind immer noch doppelt. Nur collapse verschmilzt sie.

Wenn zwei verschmolzene Rahmen aufeinandertreffen und sich unterscheiden, gewinnt der breitere. Bei gleicher Breite entscheidet der Stil (double schlägt solid, das dashed und dotted schlägt), und bei Gleichstand schlägt der Rahmen der Zelle den der Zeile und dieser den der Tabelle. Deshalb ist der äußere Rand der verschmolzenen Tabelle gelb und nicht blau: Zellen und Tabelle haben dort beide 2px solid, und die Zellen gewinnen.

Nur horizontale Linien oder nur innere Linien

Die meisten modernen Tabellen zeichnen nicht jede Linie. Zwei übliche Muster:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border patterns</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 32px; font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; }
    th, td { padding: 6px 12px; text-align: start; }

    /* 1. Row lines only */
    .rows th, .rows td { border-bottom: 1px solid #d1d5db; }
    .rows thead th { border-bottom: 2px solid #111827; }

    /* 2. Inner grid, no outer frame */
    .inner th, .inner td { border: 1px solid #d1d5db; }
    .inner tr:first-child th, .inner tr:first-child td { border-top: 0; }
    .inner tr:last-child th, .inner tr:last-child td { border-bottom: 0; }
    .inner th:first-child, .inner td:first-child { border-inline-start: 0; }
    .inner th:last-child, .inner td:last-child { border-inline-end: 0; }
  </style>
</head>
<body>
  <table class="rows">
    <thead><tr><th>Name</th><th>Score</th></tr></thead>
    <tbody>
      <tr><td>Ana</td><td>92</td></tr>
      <tr><td>Bob</td><td>87</td></tr>
    </tbody>
  </table>

  <table class="inner">
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td><td>9</td></tr>
  </table>
</body>
</html>

Die zweite Tabelle entfernt den Rahmen an der Außenseite jeder Randzelle. border-inline-start und border-inline-end bedeuten Anfang und Ende der Zeile, dasselbe CSS bleibt also auch in Sprachen richtig, die von rechts nach links laufen und in denen die erste Zelle auf der anderen Seite steht.

Abgerundete Tabellenecken

border-radius bewirkt nichts an einer Tabelle mit border-collapse: collapse. Abgerundete Tabellen nutzen das separate-Modell ohne Abstand und zeichnen jede Linie nur einmal, indem Zellen nur einen unteren Rahmen und einen am Ende bekommen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rounded table</title>
  <style>
    table {
      border-collapse: separate;
      border-spacing: 0;
      border: 1px solid #9ca3af;
      border-radius: 10px;
      font-family: system-ui, sans-serif;
    }
    th, td {
      padding: 8px 14px;
      border-bottom: 1px solid #9ca3af;
      border-inline-end: 1px solid #9ca3af;
    }
    th { background: #e5e7eb; }
    tr:first-child > :first-child { border-start-start-radius: 9px; }
    tr:first-child > :last-child { border-start-end-radius: 9px; }
    tr > :last-child { border-inline-end: 0; }
    tr:last-child > * { border-bottom: 0; }
  </style>
</head>
<body>
  <table>
    <tr><th>Plan</th><th>Price</th></tr>
    <tr><td>Free</td><td>0</td></tr>
    <tr><td>Pro</td><td>12</td></tr>
  </table>
</body>
</html>

Die beiden Eckzellen des Kopfes bekommen einen eigenen Radius, damit der graue Hintergrund der Rundung folgt. Ohne ragen ihre eckigen Ecken über den abgerundeten Rahmen hinaus. Der Radius beträgt 9px, also die 10px der Tabelle minus ihren 1px Rahmen, damit die beiden Rundungen übereinanderliegen.

Farbe und Dicke der Rahmen je Bereich

Rahmen können sich je nach Bereich der Tabelle unterscheiden. Selektoren auf thead, tfoot und einzelne Zeilen setzen eine kräftigere Linie unter den Kopf oder über die Summen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border per part</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 6px 14px; border: 1px solid #e5e7eb; text-align: start; }
    thead th { border-bottom: 3px solid #2563eb; }
    tfoot td { border-top: 3px double #111827; font-weight: bold; }
  </style>
</head>
<body>
  <table>
    <thead><tr><th>Month</th><th>Sales</th></tr></thead>
    <tbody>
      <tr><td>July</td><td>120</td></tr>
      <tr><td>August</td><td>135</td></tr>
    </tbody>
    <tfoot><tr><td>Total</td><td>255</td></tr></tfoot>
  </table>
</body>
</html>

Die 3px-Linien gewinnen dort, wo sie auf die grauen 1px-Linien treffen, nach den Verschmelzungsregeln oben. Die übrige Tabellenstruktur (thead, tfoot, th) erklärt die Seite zur HTML Tabelle.

Das border-Attribut

Alte Tutorials verwenden Attribute am <table>-Tag:

<table border="1" cellspacing="0" cellpadding="6">

Browser beachten border="1" noch: Es zeichnet einen Rahmen an der Tabelle und jeder Zelle, im separate-Modell, was den doppelten Look ergibt. Alle drei Attribute sind in HTML5 obsolet. Die CSS-Entsprechungen sind border an den Zellen, border-spacing (oder border-collapse: collapse) an der Tabelle und padding an den Zellen.

Häufige Fehler

Rahmen nur an table. Du bekommst einen Rand ohne Linien darin. Setz den Rahmen an th, td.
border-collapse: collapse vergessen und dann doppelte Linien sehen.
border-radius mit border-collapse: collapse. Der Radius wird ignoriert.
border-spacing mit border-collapse: collapse. Abstände funktionieren nur im separate-Modell.
Rahmen an <tr> im separate-Modell. Zeilen zeichnen keine Rahmen, solange die Tabelle nicht verschmolzen ist; style stattdessen die Zellen.
border="1" verwenden in neuem Code. Es funktioniert noch, kann aber keine Farbe festlegen und ist obsolet.

Häufig gestellte Fragen

Wie gebe ich einer Tabelle in HTML einen Rahmen?

Mit CSS an der Tabelle und ihren Zellen: table { border-collapse: collapse; } th, td { border: 1px solid #999; }. Der Rahmen an den Zellen zeichnet das Gitter, und border-collapse: collapse verschmilzt benachbarte Rahmen zu einfachen Linien.

Warum hat meine Tabelle doppelte Rahmen?

Standardmäßig zeichnet jede Zelle ihren eigenen Rahmen mit einer Lücke zwischen den Zellen (border-collapse: separate), benachbarte Zellen zeigen also zwei Linien. Setz border-collapse: collapse an das <table>, um sie zu einer zu verschmelzen.

Ist das border-Attribut für Tabellen noch gültig?

<table border="1"> zeichnet in jedem Browser noch Rahmen, ist aber in HTML5 obsolet und gibt dir keine Kontrolle über Farbe oder Stil. Nimm stattdessen die CSS-Eigenschaft border.

Wie runde ich die Ecken einer Tabelle ab?

border-radius wirkt nicht an einer Tabelle mit border-collapse: collapse. Nimm border-collapse: separate mit border-spacing: 0, setz den Radius an die Tabelle und gib den Eckzellen einen passenden Radius (border-start-start-radius und Verwandte), damit ihr Hintergrund nicht aus den Ecken ragt.

Wie entferne ich den Rahmen einer Tabelle?

Tabellen haben keinen Rahmen, solange nichts einen hinzufügt. Entferne das Attribut border aus dem <table>-Tag oder setz border: none an table, th, td, um ein Stylesheet zu überschreiben, das sie hinzufügt.

Verwandte Konzepte