Как добавить рамки в таблицу
Короткий ответ
Задайте рамку ячейкам и объедините двойные линии свойством border-collapse:
<style>
table { border-collapse: collapse; }
th, td { border: 1px solid silver; padding: 6px 12px; }
</style>
<table>
<tr><th>Product</th><th>Price</th></tr>
<tr><td>Tea</td><td>$3</td></tr>
<tr><td>Coffee</td><td>$5</td></tr>
</table>Только линии между строками
Часто таблица выглядит легче без вертикальных линий. Оставьте рамку только снизу у ячеек:
<style>
table { border-collapse: collapse; }
th, td { padding: 6px 12px; border-bottom: 1px solid silver; text-align: left; }
th { border-bottom-width: 2px; }
</style>
<table>
<tr><th>Product</th><th>Price</th></tr>
<tr><td>Tea</td><td>$3</td></tr>
<tr><td>Coffee</td><td>$5</td></tr>
</table>Рамка вокруг всей таблицы
Рамка у самой <table> рисует только внешний контур. Внутренние линии всё равно задаются ячейкам <th> и <td>.
Частая ошибка
Рамку задают только элементу <table> и ждут сетку линий. Получается одна рамка вокруг таблицы, а без border-collapse: collapse рамки у ячеек ещё и рисуются двойными, с зазором между ними:
<style>
td { border: 1px solid silver; padding: 6px 12px; }
</style>
<table>
<tr><td>Tea</td><td>$3</td></tr>
<tr><td>Coffee</td><td>$5</td></tr>
</table>Функции из этого ответа
- <table> — Таблица из строк `<tr>` и ячеек.
- border — Рамка вокруг элемента: толщина, стиль и цвет в одном свойстве.
- border-collapse — Раздельные у ячеек таблицы рамки или слитые в одну линию.
- padding — Внутренний отступ между содержимым и рамкой элемента.
- <td>, <th> — Ячейки таблицы: `<td>` — с данными, `<th>` — заголовочная.