Границы таблицы HTML
Таблицы HTML могут иметь границы разных стилей и форм.
Как добавить границу
Когда вы добавляете границу к таблице, вы также добавляете границы вокруг каждой ячейки таблицы:
Чтобы добавить границу, используйте border
свойство CSS для
элементов table
, th
и
:td
Пример
table, th, td
{
border: 1px solid black;
}
Свернутые границы таблицы
Чтобы избежать двойных границ, как в приведенном выше примере, установите для border-collapse
свойства CSS значение 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;
}