①Границы таблицы border

Спецификация CSS даёт неограниченные возможности для оформления таблиц. По умолчанию таблица и ячейки таблицы не имеют видимых границ и фона, при этом ячейки внутри таблицы не прилегают вплотную друг к другу.

Ширина ячеек таблицы определяется шириной их содержимого, поэтому ширина столбцов таблицы может быть разной. Высота всех ячеек ряда одинаковая и определяется высотой самой высокой ячейки.

Форматирование таблиц

Содержание:

1. Границы таблицы border

2. Как задать ширину, высоту, фон и столбцы таблицы

3. Как добавить таблице заголовок

4. Как убрать промежуток между рамками ячеек

5. Как увеличить промежуток между рамками ячеек

6. Как скрыть пустые ячейки таблицы

7. Компоновка макета таблицы с помощью свойства table-layout

8. Примеры макетов таблиц

Границы таблицы border

Таблица и ячейки внутри неё по-умолчанию отображаются в браузере без видимых границ. Границы таблицы задаются свойством border:

CSS

table {
border-collapse: collapse; /*убираем пустые промежутки между ячейками*/
border: 1px solid grey; /*устанавливаем для таблицы внешнюю границу серого цвета толщиной 1px*/
}

Границы ячеек заголовка каждого столбца задаются для элемента th:

CSS

th {border: 1px solid grey;}

Границы ячеек тела таблицы задаются для элемента td:

CSS

td {border: 1px solid grey;}

Толщина рамок соседних ячеек не удваивается, поэтому задать границы для всей таблицы можно следующим способом:

CSS

th, td {border: 1px solid grey;}

Внешнюю границу таблицы можно выделить, задав ей увеличенную ширину:

CSS

table {border: 3px solid grey;}

Границы можно задавать частично:

CSS

/* устанавливаем для таблицы внешнюю границу серого цвета толщиной 3px */
table {border-top: 3px solid grey; }
/* задаём для ячейки тела таблицы границу серого цвета толщиной 1px */
td {border-bottom: 1px solid grey;}

Продолжение в следующей статье!