НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML CSS JAVASCRIPT SQL PYTHON PHP JAVA KOTLIN GO C C++ C# Django HOW TO W3.CSS AI БІЛЬШЕ 🔍 ◑ КНИГИ ДОВІДНИКИ ВПРАВИ
HTML5. Уроки для початківців. W3Schools українською

En Es De

HTML Межі таблиці

❮ Prev Next ❯

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;
}
Спробуйте самі »

Закруглені межі таблиці

За допомогою CSS властивості border-radius межі таблиці отримують закруглені кути:

     
     
     

Приклад

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

Чим більше вказано значення в пікселях, тим більше буде ефект закруглення.

Пропустіть межу навколо таблиці, виключивши table в селекторі CSS:

     
     
     

Приклад

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

Пунктирні межі таблиці

За допомогою CSS властивості border-style можна налаштувати зовнішній вид межі.

     
     
     

Допускаються наступні значення:

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

Приклад

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

Колір межі

За допомогою CSS властивості border-color ви можете встановити колір межі.

     
     
     

Приклад

 th, td {
  border-color: #96D4D4;
}
Спробуйте самі »
❮ Prev Next ❯

✍ Коментарі