Кілька технік оформлення кордонів таблиці і осередків за допомогою css.

Нарешті ми з вами добралися до останньої частини мінікурса по CSS для початківців і сьогодні розглянемо кілька технік роботи з технологією CSS, якими доводиться користуватися найчастіше на практиці.

Це замітка, в якій я б хотів розповісти про те, як ви можете створювати і налаштовувати кордону для таблиць на веб-сторінках.

Отже, маємо таку таблицю:

стовпець 1
стовпець 2
стовпець 1
стовпець 2

Поки наша таблиця ще не має кордонів.

Завдання, кожен елемент цієї таблиці відокремити від інших за допомогою кордону чорного кольору товщиною в один піксель.

Для таблиць, також як і для багатьох інших елементів на веб-сторінці, для створення кордонів потрібно використовувати властивість border.

Почитати про цю властивість CSS можна тут.

Отже, давайте застосуємо це властивість до елементу таблиці table:

table {border: 1px solid # 000-

Якщо ви подивіться на результат, то можете виявити, що кордоном виділилася тільки зовнішня частина таблиці.

Як же можна створити кордон для кожного осередку в таблиці?

Для цього давайте скористаємося наступними стилями:

table td {border: 1px solid # 000-

Але, у нас знову проблема: між осередками таблиці знаходиться порожній простір, яке бажано б прибрати.

Як це зробити, читаємо тут.

Ця замітка лише частина курсу "Базові знання CSS з нуля". Залиште свій email і отримаєте на нього дані для доступу до курсу цілком.