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;
}

---

Или сделать рамки только вокруг ячеек, исключив рамку вокруг всей таблицы:

Пример:

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;
}

---

Таким образом, с помощью CSS можно легко контролировать оформление рамок таблиц, придавая им желаемую толщину, стиль и цвет.