EasyCode365EasyCode365

Стилізація списків і таблиць

Списки й таблиці допомагають організовувати інформацію.

Списки корисні для згрупованих елементів, кроків, меню та коротких наборів пов'язаного контенту. Таблиці корисні для структурованих даних, наприклад розкладів, цін, балів або порівнянь.

Звичайні HTML-списки й таблиці працюють, але часто потребують CSS, щоб їх було легше читати.

Коротке нагадування: списки й таблиці

HTML має два поширені типи списків:

  • <ul> створює невпорядкований список, зазвичай із маркерами.
  • <ol> створює впорядкований список, зазвичай із номерами.

Усередині обох типів списків <li> створює кожен елемент списку.

Лише читання
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Таблиці використовують кілька інших тегів:

  • <table> створює таблицю.
  • <tr> створює рядок таблиці.
  • <th> створює клітинку заголовка.
  • <td> створює звичайну клітинку даних.

Використовуй таблиці для даних, а не для макета сторінки.

Стилізація відступів у списках

Браузери додають стандартні відступи до списків.

Ти можеш керувати цими відступами за допомогою margin і padding.

Можна редагувати
<ul class="lesson-list">
  <li>Прочитай урок</li>
  <li>Спробуй приклад</li>
  <li>Попрактикуйся самостійно</li>
</ul>

<style>
  .lesson-list {
    padding-left: 24px;
    line-height: 1.8;
    background-color: #eff6ff;
    border-radius: 8px;
    font-family: Arial, sans-serif;
  }
</style>

padding-left створює простір для маркерів списку. line-height додає простір між елементами списку.

Позиція маркера списку

Властивість list-style-position керує тим, де знаходиться маркер.

  • outside: маркер знаходиться поза областю тексту. Це значення за замовчуванням.
  • inside: маркер стає частиною текстового рядка.
Можна редагувати
<ul class="outside-list">
  <li>
    Довший елемент списку, який переноситься на другий рядок, щоб ти міг побачити позицію маркера.
  </li>
</ul>

<ul class="inside-list">
  <li>
    Довший елемент списку, який переноситься на другий рядок, щоб ти міг побачити позицію маркера.
  </li>
</ul>

<style>
  ul {
    width: 260px;
    font-family: Arial, sans-serif;
  }

  .outside-list {
    list-style-position: outside;
  }

  .inside-list {
    list-style-position: inside;
  }
</style>

Більшість списків використовує outside. Використовуй inside лише тоді, коли хочеш, щоб маркер залишався всередині контентної коробки.

Зміна стилів маркерів і номерів

Властивість list-style-type змінює маркер.

Для невпорядкованих списків поширені значення:

  • disc
  • circle
  • square

Для впорядкованих списків поширені значення:

  • decimal
  • decimal-leading-zero
  • lower-alpha
  • upper-roman
Можна редагувати
<h3>Теми</h3>
<ul class="square-list">
  <li>Селектори</li>
  <li>Кольори</li>
  <li>Відступи</li>
</ul>

<h3>Кроки</h3>
<ol class="roman-list">
  <li>Написати HTML</li>
  <li>Додати CSS</li>
  <li>Перевірити результат</li>
</ol>

<style>
  .square-list {
    list-style-type: square;
  }

  .roman-list {
    list-style-type: upper-roman;
  }
</style>

Використовуй стилі маркерів, які відповідають змісту списку. Номери найкращі для кроків. Маркери найкращі для простих груп.

Видалення стандартних маркерів

Іноді список використовується для структури, але видимі маркери не потрібні.

Меню навігації - поширений приклад.

Можна редагувати
<ul class="nav-list">
  <li>Головна</li>
  <li>Уроки</li>
  <li>Контакти</li>
</ul>

<style>
  .nav-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }

  .nav-list li {
    padding: 8px 0;
  }
</style>

Коли прибираєш маркери, також перевір стандартні margin і padding. Інакше список може все ще мати небажані відступи.

Створення власних маркерів

Можна створити прості власні маркери за допомогою псевдоелемента ::marker.

Це дозволяє змінити вміст і колір маркера без додавання зайвого HTML.

Можна редагувати
<ul class="check-list">
  <li>Збережи файл</li>
  <li>Онови браузер</li>
  <li>Перевір макет</li>
</ul>

<style>
  .check-list {
    line-height: 1.8;
    font-family: Arial, sans-serif;
  }

  .check-list li::marker {
    content: "✓ ";
    color: #16a34a;
    font-weight: bold;
  }
</style>

Тримай власні маркери простими. Чіткий маркер кращий за декоративний маркер, який відволікає від контенту.

Примітка: зміна content всередині ::marker потребує сучасного браузера. Старі браузери можуть показувати стандартний маркер.

Стилізація рамок таблиці

Таблиці легше переглядати, коли рядки й клітинки чітко розділені.

Можна додати рамки за допомогою властивості border.

Можна редагувати
<table class="basic-table">
  <tr>
    <th>Мова</th>
    <th>Призначення</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>Структура</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>Стиль</td>
  </tr>
</table>

<style>
  .basic-table,
  .basic-table th,
  .basic-table td {
    border: 1px solid black;
  }
</style>

Це додає рамку навколо таблиці та кожної клітинки.

Використання border-collapse

За замовчуванням рамки клітинок таблиці можуть показувати маленькі проміжки між клітинками.

Властивість border-collapse виправляє це.

Можна редагувати
<table class="clean-table">
  <tr>
    <th>День</th>
    <th>Завдання</th>
  </tr>
  <tr>
    <td>Понеділок</td>
    <td>Практикувати CSS</td>
  </tr>
  <tr>
    <td>Вівторок</td>
    <td>Створити меню</td>
  </tr>
</table>

<style>
  .clean-table {
    border-collapse: collapse;
    font-family: Arial, sans-serif;
  }

  .clean-table th,
  .clean-table td {
    border: 1px solid #9ca3af;
    padding: 10px;
  }
</style>

Використовуй border-collapse: collapse;, коли хочеш одну чисту лінію рамки між клітинками.

Додавання padding і вирівнювання в таблицях

Текст у таблиці не має торкатися рамок.

Додай padding до клітинок <th> і <td>.

Також можна вирівнювати контент:

  • text-align керує горизонтальним вирівнюванням.
  • vertical-align керує вертикальним вирівнюванням.
Можна редагувати
<table class="score-table">
  <tr>
    <th>Студент</th>
    <th>Бал</th>
  </tr>
  <tr>
    <td>
      Alice<br />
      Додаткова практика виконана
    </td>
    <td>92</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>85</td>
  </tr>
</table>

<style>
  .score-table {
    border-collapse: collapse;
    font-family: Arial, sans-serif;
  }

  .score-table th,
  .score-table td {
    border: 1px solid #d1d5db;
    padding: 12px;
    vertical-align: middle;
  }

  .score-table th {
    text-align: left;
  }

  .score-table th:last-child,
  .score-table td:last-child {
    text-align: right;
  }
</style>

Текст часто легше читати зліва. Числа часто легше порівнювати, коли вони вирівняні праворуч.

Чергування кольорів рядків

Довгі таблиці легше читати, коли кожен другий рядок має інший колір фону.

Це часто називають zebra striping.

Використовуй :nth-child(even), щоб вибрати кожен парний рядок.

Можна редагувати
<table class="striped-table">
  <thead>
    <tr>
      <th>Курс</th>
      <th>Уроки</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>12</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>15</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>16</td>
    </tr>
  </tbody>
</table>

<style>
  .striped-table {
    border-collapse: collapse;
    font-family: Arial, sans-serif;
  }

  .striped-table th,
  .striped-table td {
    border: 1px solid #d1d5db;
    padding: 10px;
    text-align: left;
  }

  .striped-table tbody tr:nth-child(even) {
    background-color: #f3f4f6;
  }
</style>

Використання tbody tr:nth-child(even) залишає чергування кольору на рядках даних, а не на рядку заголовка.

Як зробити таблиці читабельнішими

Читабельна таблиця має чітку структуру.

Корисні звички для стилізації таблиць:

  • Зроби заголовки помітними поруч зі звичайними клітинками.
  • Використовуй достатньо padding всередині клітинок.
  • Використовуй рамки або кольори рядків, щоб розділяти дані.
  • Вирівнюй схожі дані однаково.
  • Уникай використання таблиць для макета сторінки.
Можна редагувати
<table class="readable-table">
  <thead>
    <tr>
      <th>План</th>
      <th>Ціна</th>
      <th>Найкраще для</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Basic</td>
      <td>$0</td>
      <td>Спробувати уроки</td>
    </tr>
    <tr>
      <td>Plus</td>
      <td>$9</td>
      <td>Щоденна практика</td>
    </tr>
  </tbody>
</table>

<style>
  .readable-table {
    border-collapse: collapse;
    width: 100%;
    font-family: Arial, sans-serif;
  }

  .readable-table th,
  .readable-table td {
    border: 1px solid #d1d5db;
    padding: 12px;
    text-align: left;
  }

  .readable-table th {
    background-color: #1f2937;
    color: white;
  }

  .readable-table tbody tr:nth-child(even) {
    background-color: #f9fafb;
  }
</style>

Рядок заголовка темний, клітинки мають padding, а чергування кольору рядків допомагає стежити за даними.

Типові помилки початківців

  • Використовувати таблиці для макета сторінки: використовуй таблиці для даних, а не для заголовків, сайдбарів або всієї структури сторінки.
  • Забувати border-collapse: без цієї властивості рамки таблиці можуть виглядати подвійними або розділеними.
  • Залишати клітинки тісними: додай padding до <th> і <td>, щоб текст мав місце.
  • Прибрати маркери, але залишити старі відступи: після list-style-type: none; перевір margin і padding.
  • Використовувати занадто декоративні власні маркери: маркери мають допомагати швидко переглядати список, а не відволікати.

Міні завдання

Подивись на це CSS-правило:

Лише читання

Який візуальний ефект воно створює в таблиці?

Перевір відповіді до тесту, коли будеш готовий.

Короткий тест із відповідями

  1. Яка CSS-властивість прибирає проміжок між рамками клітинок таблиці?
  2. Яке значення list-style-type повністю прибирає маркери?
  3. Яка властивість керує тим, чи контент клітинки розміщується вгорі, посередині або внизу?

Відповіді:

  1. border-collapse
  2. none
  3. vertical-align

Відповідь до міні завдання: воно створює zebra striping, застосовуючи світло-сірий фон до кожного парного рядка даних.

Невеликий виклик

Стилізуй список і таблицю нижче.

Твої цілі:

  • Приховати стандартні маркери списку.
  • Прибрати стандартні відступи списку.
  • Додати border-collapse до таблиці.
  • Зробити заголовки таблиці чорними з білим текстом.
  • Зафарбувати парні рядки таблиці світло-сірим фоном.
Можна редагувати
<div>
  <ul class="nav-menu">
    <li>Головна</li>
    <li>Про нас</li>
    <li>Контакти</li>
  </ul>

  <table class="data-table">
    <thead>
      <tr>
        <th>Ім'я</th>
        <th>Вік</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice</td>
        <td>25</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>30</td>
      </tr>
      <tr>
        <td>Charlie</td>
        <td>35</td>
      </tr>
    </tbody>
  </table>
</div>

<style>
  .nav-menu {
    /* Приховай маркери списку */

    /* Прибери стандартні відступи */

    font-family: Arial, sans-serif;
  }

  .data-table {
    /* Об'єднай рамки таблиці */

    font-family: Arial, sans-serif;
  }

  .data-table th,
  .data-table td {
    border: 1px solid black;
    padding: 8px;
  }

  .data-table th {
    /* Додай чорний фон */

    /* Додай білий текст */
  }

  .data-table tbody tr:nth-child(even) {
    /* Додай світло-сірий фон */
  }
</style>

Підсумок

  • Списки використовують <ul>, <ol> і <li>.
  • Таблиці використовують <table>, <tr>, <th> і <td>.
  • Використовуй list-style-type, щоб змінити або прибрати маркери списку.
  • Використовуй list-style-position, щоб керувати тим, маркери знаходяться поза текстовою областю чи всередині неї.
  • Використовуй ::marker для простих власних маркерів.
  • Використовуй border-collapse: collapse; для чистих рамок таблиці.
  • Використовуй padding, щоб клітинки таблиці було легше читати.
  • Використовуй text-align і vertical-align, щоб вирівнювати контент таблиці.
  • Використовуй tbody tr:nth-child(even), щоб створити чергування кольорів рядків.