ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML5. Уроки для начинающих

En Ua

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


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


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

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

     
     
     

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

Пример

table, th, td {
  border: 1px solid black;
}
Попробуйте сами »

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

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

Это заставит границы слиться в единую границу:

     
     
     

Пример

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
Попробуйте сами »

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

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

     
     
     

Пример

table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}
th, td {
  background-color: #96D4D4;
}
Попробуйте сами »

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

С помощью свойства border-radius границы получают закругленные углы:

     
     
     

Пример

table, th, td {
  border: 1px solid black;
  border-radius: 10px;
}
Попробуйте сами »

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

     
     
     

Пример

th, td {
  border: 1px solid black;
  border-radius: 10px;
}
Попробуйте сами »

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

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

     
     
     

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

  • dotted     
  • dashed     
  • solid     
  • double     
  • groove     
  • ridge     
  • inset     
  • outset     
  • none     
  • hidden     

Пример

 th, td {
  border-style: dotted;
}
Попробуйте сами »

Цвет границы

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

     
     
     

Пример

 th, td {
  border-color: #96D4D4;
}
Попробуйте сами »