Модуль 28

CSS для таблиць та списків

Ось твій урок у стилі CS50! 🔥

🎓 CS50: CSS для Таблиць та Списків

(або як перетворити хаос даних на красу)

Привіт, друзі! Радий бачити вас знову.

Сьогодні ми поговоримо про структуру. Про порядок. Про те, як ми сприймаємо інформацію.

1. 🔥 Вступ: проблема та мотивація

Уявіть, що ви прийшли в дорогий ресторан. Ви голодні, відкриваєте меню, а там... просто суцільний текст. Без відступів, без вирівнювання цін, без розділення на категорії. Просто потік слів: "Борщ 100 грн Паста 200 грн Вода 50 грн".

Жахливо, правда? Ви витратите купу часу просто щоб зрозуміти, що де.

Або уявіть розклад поїздів на вокзалі, де колонки "Час прибуття" і "Номер поїзда" злиплися в одну купу. Ви б точно спізнилися.

Питання до вас: Чому ми так любимо Excel-таблиці або гарні списки справ у телефоні? Тому що наш мозок любить патерни.

У чистому HTML таблиці виглядають як привіт з 90-х — подвійні рамки, дивні відступи, нудьга. А списки? Просто крапки. Але ж ми знаємо, що 90% навігаційних меню на сайтах (ті самі кнопки зверху "Головна", "Про нас") — це технічно просто списки!

Без CSS ваші дані виглядають як "сирі інгредієнти". Сьогодні ми станемо шеф-кухарями й приготуємо з них справжню страву. Поїхали!

2. 🧠 Теоретична база (без сухої академічності)

Давайте заглянемо "під капот". Що там відбувається?

📋 Списки (Lists)

HTML дає нам структуру (<ul>, <ol>, <li>), а CSS відповідає за "маркери" (ті самі крапки або цифри).

Ключова концепція: Браузер за замовчуванням додає до списку відступи (padding і margin) і ставить маркери. В CSS є властивість list-style. Це пульт керування списком.

  • list-style-type: Який вигляд має маркер? (Коло, квадрат, римська цифра чи... нічого).
  • list-style-position: Де стоїть маркер? Всередині тексту чи збоку (як на полях зошита).
  • list-style-image: Хочете замість крапки іконку піци? Будь ласка.

Що запам'ятати залізно: list-style: none; — це заклинання, яке вбиває крапки. Це перше, що ви напишете, коли будете робити меню сайту.

📊 Таблиці (Tables)

Тут цікавіше. За замовчуванням кожна комірка таблиці (<td>) — це окрема коробочка, і сама таблиця (<table>) — теж коробочка. Тому ви бачите "подвійні рамки".

Головний герой: border-collapse.

  • Значення separate (за замовчуванням): Кожна комірка має свої кордони. Між ними є простір. Виглядає старомодно.
  • Значення collapse: Це те, що ми хочемо у 99% випадків. Кордони сусідніх комірок "зливаються" в один тонкий лінію.

Інтуїтивне розуміння: Уявіть паркан між двома ділянками. * separate: У сусіда свій паркан, у вас свій. Між ними пробігає кіт. * collapse: Ви домовилися і поставили один спільний паркан. Економно і гарно.

3. 🧪 Приклади (від простого до реального)

Приклад 1: Приборкання списку

Давайте створимо список покупок.

<ul>
  <li>Хліб</li>
  <li>Молоко</li>
  <li>Печиво</li>
</ul>

Питання: Що буде, якщо ми напишемо list-style-type: square;? Правильно, крапочки стануть квадратиками. А якщо ми хочемо зробити з цього меню?

ul {
  list-style: none; /* Прибираємо маркери */
  padding: 0;       /* Прибираємо стандартний відступ зліва */
  margin: 0;
}

li {
  padding: 10px;
  border-bottom: 1px solid #ccc; /* Додаємо лінію під кожним пунктом */
}

Результат: Тепер це схоже на меню налаштувань у вашому iPhone!

Приклад 2: "Зебра" в таблиці

Уявіть таблицю користувачів. Якщо в ній 100 рядків, очі втомлюються. Як допомогти користувачеві не загубити рядок?

CSS:

table {
  width: 100%;
  border-collapse: collapse; /* Зливаємо кордони! */
}

th, td {
  border: 1px solid #ddd;
  padding: 8px; /* Даємо тексту дихати */
  text-align: left;
}

/* Магія тут: */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

Пояснення: Псевдоклас :nth-child(even) каже браузеру: "Візьми кожен парний рядок і пофарбуй його у світло-сірий". Це називається "Zebra striping". Просто, але як же це покращує читабельність!

4. 🛠 Практична частина

Прийшов час бруднити руки кодом! Відкривайте редактор.

Завдання 1: "Чистий аркуш" Створіть маркований список (<ul>). Напишіть CSS, який прибирає всі маркери та ліві відступи, щоб текст починався від самого краю екрану.

Завдання 2: "Свій маркер" Замість звичайних крапок зробіть так, щоб маркером була стрілочка » (використовуйте ::before або спробуйте знайти emoji для list-style-type, якщо браузер підтримує, або просто square). Підказка для просунутих: Спробуйте li::before { content: "👉"; margin-right: 5px; } (і не забудьте list-style: none для ul).

Завдання 3: "Боротьба з рамками" Створіть таблицю 3x3. Задайте border: 1px solid black для table, th та td. Подивіться на цей жах. Тепер додайте border-collapse: collapse;. Відчуйте різницю.

Завдання 4: "Інтерактивна таблиця" Додайте до попередньої таблиці ефект: коли ви наводите мишкою на рядок (tr:hover), він має змінювати колір фону на світло-блакитний. Це дає користувачеві відчуття контролю.

Міні-кейс: "Прайс-лист" Зробіть таблицю цін для хостингу: * Колонки: "Тариф", "Ціна", "Місце". * Заголовки (th) мають бути на темному фоні з білим текстом. * Текст у колонці "Ціна" має бути вирівняний по центру (text-align: center).

А що, якщо... Що, якщо текст у комірці дуже довгий? Знайдіть властивість CSS, яка не дозволить тексту розривати комірку, або навпаки — змусить її переноситись. (Погугліть vertical-align для таблиць).

5. 💡 Мислення як у розробника

Як думає досвідчений розробник, коли бачить макет з даними?

  1. "Це дані чи лейаут?"

    • Помилка новачка: Використовувати таблиці, щоб розмістити картинку зліва, а текст справа. Ніколи так не робіть! Це гріх з 2005 року.
    • Профі: Таблиці — тільки для табличних даних (розклад, ціни, статистика). Для всього іншого є Flexbox і Grid (про це пізніше).

  2. "Доступність (Accessibility)"

    • Завжди використовуйте <th> для заголовків. Це не просто "жирний текст". Це маяк для скрінрідерів (програм, які читають екран незрячим людям).

  3. "Скидання стилів (Reset)"

    • Браузери мають різні дефолтні стилі. Досвідчений розробник часто починає роботу зі списком, обнуляючи margin та padding, щоб мати повний контроль.

6. 🧩 Підсумок

Отже, що ми сьогодні зробили?

  1. Ми навчилися "приборкувати" списки, перетворюючи їх з нудних переліків на елементи інтерфейсу.
  2. Ми зрозуміли, як працює border-collapse, і більше ніколи не будемо створювати "діряві" таблиці.
  3. Ми навчилися робити "зебру" і підсвічувати рядки при наведенні.

Тепер ви вмієте: Перетворювати сирі дані на зручний, читабельний інтерфейс. Ви не просто кодите, ви дбаєте про очі вашого користувача!

Що далі? Ви, мабуть, помітили, що наші таблиці й списки просто йдуть зверху вниз. Але як поставити меню горизонтально? Як розмістити таблицю по центру екрану?

На наступному уроці ми відкриємо скриньку Пандори (у хорошому сенсі): Блокова модель (Box Model) та Layouts. Ми навчимося рухати елементи, як фігури на шахівниці.

А поки що — практикуйтесь! Побачимось! 👋

← До списку уроків Наступний урок →