Исполняемые доки HTML: Рамка таблицы

Q: Как добавить рамку таблице в HTML?

Задайте CSS таблице и ее ячейкам: table { border-collapse: collapse; } th, td { border: 1px solid #999; }. Рамка у ячеек рисует сетку, а border-collapse: collapse сливает соседние рамки в одинарные линии.

Q: Как скруглить углы таблицы?

border-radius не действует на таблицу с border-collapse: collapse. Используйте border-collapse: separate с border-spacing: 0, задайте скругление таблице и дайте угловым ячейкам такое же скругление (border-start-start-radius и аналогичные свойства), чтобы их фон не выступал из углов.

Как добавить рамку таблице

По умолчанию у таблиц нет рамок. Добавьте их через CSS: border у каждой ячейки рисует сетку, а border-collapse: collapse у таблицы сливает каждую пару соседних рамок в одну линию.

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

Сокращенное свойство border принимает толщину, стиль и цвет в любом порядке: 1px solid #6b7280. Задавайте его th, td, а не только table: рамка у таблицы рисует лишь внешний контур.

border-collapse: separate или collapse

border-collapse решает, будут ли у ячеек общие рамки.

Значение	Результат
`separate` (по умолчанию)	У каждой ячейки своя рамка, а промежуток между ячейками задает `border-spacing`
`collapse`	У соседних ячеек одна общая рамка; `border-spacing` игнорируется

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

В таблице с separate видны оба слоя: синий контур таблицы и отдельный янтарный прямоугольник вокруг каждой ячейки, с border-spacing между ними. Замените 6px на 0, и ячейки соприкоснутся, но линии все равно останутся двойными. Сливает их только collapse.

Когда встречаются две слитые рамки с разными параметрами, побеждает более широкая. При одинаковой ширине решает стиль (double сильнее solid, а тот сильнее dashed и dotted), а при равенстве рамка ячейки сильнее рамки строки, а та сильнее рамки таблицы. Поэтому внешний край слитой таблицы янтарный, а не синий: и у ячеек, и у таблицы там рамки 2px solid, и побеждают ячейки.

Только горизонтальные или только внутренние линии

Большинство современных таблиц рисуют не все линии. Два частых варианта:

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

Вторая таблица убирает рамку с внешней стороны у каждой крайней ячейки. border-inline-start и border-inline-end означают начало и конец строки, поэтому тот же CSS остается правильным в языках с письмом справа налево, где первая ячейка находится с другой стороны.

Скругленные углы таблицы

border-radius ничего не делает с таблицей, у которой border-collapse: collapse. Скругленные таблицы используют модель separate без промежутков и рисуют каждую линию один раз, давая ячейкам только нижнюю и конечную рамку:

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

Двум угловым ячейкам шапки задано собственное скругление, чтобы серый фон повторял изгиб. Без него их квадратные углы выступают за скругленную рамку. Радиус 9px: это 10px таблицы минус ее рамка 1px, так что две кривые совпадают.

Цвет и толщина рамки для разных частей

Рамки могут различаться в разных частях таблицы. Селекторы для thead, tfoot и отдельных строк задают более толстую линию под шапкой или над итогами:

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

Линии толщиной 3px побеждают серые линии толщиной 1px в местах встречи, по правилам слияния выше. Об остальной структуре таблицы (thead, tfoot, th) читайте на странице таблица в HTML.

Атрибут border

В старых учебниках используют атрибуты тега <table>:

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

Браузеры по-прежнему учитывают border="1": он рисует рамку у таблицы и у каждой ячейки в модели separate, отсюда двойной вид. Все три атрибута в HTML5 устарели. Их CSS-аналоги: border у ячеек, border-spacing (или border-collapse: collapse) у таблицы и padding у ячеек.

Частые ошибки

Рамка только у table. Получается контур без линий внутри. Добавьте рамку th, td.
Забытый border-collapse: collapse, после чего линии двоятся.
border-radius вместе с border-collapse: collapse. Скругление игнорируется.
border-spacing вместе с border-collapse: collapse. Промежутки работают только в модели separate.
Рамки у <tr> в модели separate. Строки не рисуют рамок, если таблица не слита; оформляйте ячейки.
border="1" в новом коде. Он все еще работает, но не позволяет задать цвет и устарел.

Часто задаваемые вопросы

Как добавить рамку таблице в HTML?

Задайте CSS таблице и ее ячейкам: table { border-collapse: collapse; } th, td { border: 1px solid #999; }. Рамка у ячеек рисует сетку, а border-collapse: collapse сливает соседние рамки в одинарные линии.

Почему у таблицы двойные рамки?

По умолчанию каждая ячейка рисует собственную рамку с промежутком между ячейками (border-collapse: separate), поэтому у соседних ячеек видны две линии. Задайте <table> правило border-collapse: collapse, чтобы слить их в одну.

Атрибут border у таблицы еще работает?

<table border="1"> по-прежнему рисует рамки во всех браузерах, но в HTML5 он устарел и не позволяет управлять цветом или стилем. Используйте CSS-свойство border.

Как скруглить углы таблицы?

border-radius не действует на таблицу с border-collapse: collapse. Используйте border-collapse: separate с border-spacing: 0, задайте скругление таблице и дайте угловым ячейкам такое же скругление (border-start-start-radius и аналогичные свойства), чтобы их фон не выступал из углов.

Как убрать рамку у таблицы?

У таблиц нет рамки, пока ее что-то не добавит. Удалите атрибут border из тега <table> или задайте border: none для table, th, td, чтобы перекрыть стили, которые их добавляют.

Связанные концепции

Рамка таблицы в HTML: collapse, линии и скругленные углы