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

Таблицы HTML могут иметь границы разных стилей и форм.

Как добавить границу

Когда вы добавляете границу к таблице, вы также добавляете границы вокруг каждой ячейки таблицы:

Чтобы добавить границу, используйте свойство CSS border для элементов table, th и td:

table, th, td {
  border: 1px solid white;
}

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

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

Значение collapse поможет объединить границы:

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

Стили границ таблицы

Таблица с невидимыми границами

Если вы установите цвет фона для каждой ячейки и зададите границе такой же цвет, как фон документa, вы получите впечатление невидимой границы:

table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #89abcc;
}

ПРИМЕР (откроется в новой вкладке).

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

При помощи свойства border-radius углы таблицы закругляются:

table, th, td {
border: 1px solid white;
border-radius: 10px;
}

Пропустите внешнюю границу таблицы, исключив table из селектора css:

th, td {
border: 1px solid white;
border-radius: 10px;
}

Пунктирные границы

При помощи свойства border-style вы можете установить внешний вид границы.

Допускаются следующие значения:

Пунктир состоящий из точек. Используйте свойство CSS 'border-style' со значением 'dotted', чтобы установить данный стиль границ. dotted
Пунктир состоящий из линий. Используйте свойство CSS 'border-style' со значением 'dashed', чтобы установить данный стиль границ. dashed
Сплошная граница. Используйте свойство CSS 'border-style' со значением 'solid', чтобы установить данный стиль границ. solid
Двойная граница. Используйте свойство CSS 'border-style' со значением 'double', чтобы установить данный стиль границ. double
3D рифленый бордюр. Используйте свойство CSS 'border-style' со значением 'groove', чтобы установить данный стиль границ. groove
3D ребристая граница. Используйте свойство CSS 'border-style' со значением 'ridge', чтобы установить данный стиль границ. ridge
3D-вставка. Используйте свойство CSS 'border-style' со значением 'inset', чтобы установить данный стиль границ. inset
3D начальная граница. Используйте свойство CSS 'border-style' со значением 'outset', чтобы установить данный стиль границ. outset
none
hidden

 th, td {
border-style: dotted;
}

Цвет границы

С помощью свойства border-color вы можете установить цвет границы:

  th, td {
border-color: #89abcc;
}

☛ Размеры таблиц HTML

Таблицы HTML ☚