HTML Границы таблицы
HTML таблицы могут иметь границы различных стилей и форм.
Как добавить границу
Когда вы добавляете границу к таблице, вы также добавляете границы вокруг каждой ячейки таблицы:
Чтобы добавить границу, используйте CSS свойство border
в элементах
table
, th
, и
td
:
Свернутые границы таблицы
Чтобы избежать двойных границ, как в примере выше, установите CSS border-collapse
свойство collapse
.
Это приведет к тому, что границы свернутся в единую границу:
Стиль границы таблицы
Если вы зададите цвет фона каждой ячейки и придадите границе белый цвет (такой же, как фон документа), вы получите впечатление невидимой границы:
Пример
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Попробуйте сами »
Закруглённые границы таблицы
С помощью свойства border-radius
границы приобретают закруглённые углы:
Пропустите границу вокруг таблицы, пропустив table
из селектора css:
Пунктирные границы таблицы
С помощью свойства border-style
вы можете задать внешний вид границы.
Допускаются следующие значения:
dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden
Цвет границы
С помощью свойства border-color
вы можете задать цвет границы.