Dokumentacja HTML z przykładami: Obramowanie tabeli

Q: Jak dodać obramowanie do tabeli w HTML?

Użyj CSS na tabeli i jej komórkach: table { border-collapse: collapse; } th, td { border: 1px solid #999; }. Obramowanie komórek rysuje siatkę, a border-collapse: collapse scala sąsiednie obramowania w pojedyncze linie.

Q: Jak zaokrąglić rogi tabeli?

border-radius nie działa na tabeli z border-collapse: collapse. Użyj border-collapse: separate z border-spacing: 0, nadaj zaokrąglenie tabeli, a komórkom w rogach daj pasujące zaokrąglenie (border-start-start-radius i pokrewne), żeby ich tło nie wystawało z rogów.

Jak dodać obramowanie do tabeli

Tabele domyślnie nie mają obramowania. Dodaj je w CSS: border na każdej komórce rysuje siatkę, a border-collapse: collapse na tabeli scala każdą parę sąsiednich obramowań w jedną linię.

<!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>

Skrócona właściwość border przyjmuje szerokość, styl i kolor w dowolnej kolejności: 1px solid #6b7280. Umieść ją na th, td, a nie tylko na table: obramowanie tabeli rysuje tylko zewnętrzną ramkę.

border-collapse: separate vs collapse

border-collapse decyduje, czy komórki współdzielą obramowania.

Wartość	Wynik
`separate` (domyślna)	Każda komórka ma własne obramowanie, z odstępem między komórkami ustawianym przez `border-spacing`
`collapse`	Sąsiednie komórki współdzielą jedno obramowanie; `border-spacing` jest ignorowane

<!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>

W tabeli separate widać obie warstwy: niebieską ramkę tabeli i osobne bursztynowe pole wokół każdej komórki, z border-spacing między nimi. Zmień 6px na 0, a komórki się zetkną, ale linie nadal będą podwójne. Scala je tylko collapse.

Gdy spotykają się dwa scalone obramowania i się różnią, wygrywa szersze. Przy tej samej szerokości decyduje styl (double wygrywa z solid, a ten z dashed i dotted), a przy remisie obramowanie komórki wygrywa z obramowaniem wiersza, a to z obramowaniem tabeli. Dlatego zewnętrzna krawędź scalonej tabeli jest bursztynowa, a nie niebieska: komórki i tabela mają tam obramowania 2px solid, a wygrywają komórki.

Tylko linie poziome albo tylko wewnętrzne

Większość nowoczesnych tabel nie rysuje wszystkich linii. Dwa popularne wzorce:

<!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>

Druga tabela usuwa obramowanie po zewnętrznej stronie każdej komórki na krawędzi. border-inline-start i border-inline-end oznaczają początek i koniec wiersza, więc ten sam CSS działa poprawnie w językach pisanych od prawej do lewej, gdzie pierwsza komórka jest po drugiej stronie.

Zaokrąglone rogi tabeli

border-radius nic nie robi na tabeli z border-collapse: collapse. Tabele z zaokrąglonymi rogami używają modelu separate bez odstępów i rysują każdą linię raz, dając komórkom tylko dolne i końcowe obramowanie:

<!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>

Dwie komórki nagłówka w rogach dostają własne zaokrąglenie, żeby szare tło podążało za łukiem. Bez niego ich kwadratowe rogi wystają poza zaokrągloną ramkę. Promień wynosi 9px, czyli 10px tabeli minus jej obramowanie 1px, więc oba łuki się pokrywają.

Kolor i grubość obramowania dla części tabeli

Obramowania mogą się różnić w zależności od części tabeli. Selektory na thead, tfoot i pojedynczych wierszach ustawiają grubszą linię pod nagłówkiem albo nad sumami:

<!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>

Linie 3px wygrywają z szarymi liniami 1px tam, gdzie się spotykają, zgodnie z opisanymi wyżej zasadami scalania. Resztę struktury tabeli (thead, tfoot, th) opisuje strona tabele w HTML.

Atrybut border

Stare poradniki używają atrybutów na znaczniku <table>:

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

Przeglądarki nadal respektują border="1": rysuje obramowanie tabeli i każdej komórki w modelu separate, co daje efekt podwójnych linii. Wszystkie trzy atrybuty są w HTML5 przestarzałe. Ich odpowiedniki w CSS to border na komórkach, border-spacing (albo border-collapse: collapse) na tabeli i padding na komórkach.

Częste błędy

Obramowanie tylko na table. Dostajesz ramkę bez linii w środku. Dodaj obramowanie do th, td.
Zapomniane border-collapse: collapse, a potem podwójne linie.
border-radius z border-collapse: collapse. Zaokrąglenie jest ignorowane.
border-spacing z border-collapse: collapse. Odstępy działają tylko w modelu separate.
Obramowania na <tr> w modelu separate. Wiersze nie rysują obramowań, dopóki tabela nie jest scalona; styluj komórki.
Używanie border="1" w nowym kodzie. Nadal działa, ale nie pozwala ustawić koloru i jest przestarzałe.

Najczęściej zadawane pytania

Jak dodać obramowanie do tabeli w HTML?

Użyj CSS na tabeli i jej komórkach: table { border-collapse: collapse; } th, td { border: 1px solid #999; }. Obramowanie komórek rysuje siatkę, a border-collapse: collapse scala sąsiednie obramowania w pojedyncze linie.

Dlaczego moja tabela ma podwójne obramowanie?

Domyślnie każda komórka rysuje własne obramowanie z odstępem między komórkami (border-collapse: separate), więc sąsiednie komórki pokazują dwie linie. Ustaw border-collapse: collapse na <table>, żeby scalić je w jedną.

Czy atrybut border tabeli jest nadal poprawny?

<table border="1"> nadal rysuje obramowanie w każdej przeglądarce, ale w HTML5 jest przestarzały i nie daje kontroli nad kolorem ani stylem. Zamiast niego używaj właściwości CSS border.

Jak zaokrąglić rogi tabeli?

border-radius nie działa na tabeli z border-collapse: collapse. Użyj border-collapse: separate z border-spacing: 0, nadaj zaokrąglenie tabeli, a komórkom w rogach daj pasujące zaokrąglenie (border-start-start-radius i pokrewne), żeby ich tło nie wystawało z rogów.

Jak usunąć obramowanie z tabeli?

Tabele nie mają obramowania, dopóki coś go nie doda. Usuń atrybut border ze znacznika <table> albo ustaw border: none na table, th, td, żeby nadpisać arkusz stylów, który je dodaje.

Powiązane zagadnienia