Таблицы 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
вы можете установить внешний вид границы.
Допускаются следующие значения:
th, td {
border-style: dotted;
}
С помощью свойства border-color
вы можете установить цвет границы:
th, td {
border-color: #89abcc;
}