Как сделать рамки в таблице html — Q&A Хекслет
2026-02-26 17:23 Diff
https://ru.hexlet.io/qna/html/questions/kak-sdelat-ramki-v-tablitse-html

Чтобы оформить границы ячеек таблицы, достаточно применить CSS свойство border.

Рассмотрим пример:

<table> <tr> <th>Наименование</th> <th>Кол-во</th> </tr> <tr> <td>Груши</td> <td>10</td> </tr> <tr> <td>Яблоки</td> <td>7</td> </tr> <tr> <td>Мандарины</td> <td>5</td> </tr> </table>

Стили:

table, td, th { /* задаем границу для всех элементов */ border: 3px solid #245488; } td, th { /* делаем отступ в ячейках, выставляем выравнивание текста */ padding: 10px 20px; text-align: center; }

Результат:

На рисунке выше видно, что граница "задвоилась", так как css свойство border применяется к каждому элементу таблицы - и к table, и к каждому th/td. Для того, чтобы "схлопнуть" такие границы достаточно применить свойство border-collapse.

Стили:

table, td, th { border-collapse: collapse; border: 3px solid #245488; }

Результат: