Границы таблиц HTML свойство CSS border
Меню
Справочник

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

html table borders

Таблицы 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 вы можете установить внешний вид границы.

     
     
     

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

dotted

Пунктир состоящий из точек.

Используйте свойство CSS 'border-style' со значением 'dotted', чтобы установить данный стиль границ.
dotted
    
dashed

Пунктир состоящий из линий.

Используйте свойство CSS 'border-style' со значением 'dashed', чтобы установить данный стиль границ.
dashed
    
solid

Сплошная граница.

Используйте свойство CSS 'border-style' со значением 'solid', чтобы установить данный стиль границ.
solid
    
double

Двойная граница.

Используйте свойство CSS 'border-style' со значением 'double', чтобы установить данный стиль границ.
double
    
groove

3D рифленый бордюр.

Используйте свойство CSS 'border-style' со значением 'groove', чтобы установить данный стиль границ.
groove
    
gridge

3D ребристая граница.

Используйте свойство CSS 'border-style' со значением 'ridge', чтобы установить данный стиль границ.
ridge
    
inset

3D-вставка.

Используйте свойство CSS 'border-style' со значением 'inset', чтобы установить данный стиль границ.
inset
    
outset

3D начальная граница.

Используйте свойство CSS 'border-style' со значением 'outset', чтобы установить данный стиль границ.
outset
    
none     
hidden     
 th, td {
border-style: dotted;
}

Цвет границы

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

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

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

Таблицы HTML ☚

Поделиться ссылкой