Як стилізувати таблицю за допомогою CSS, щоб отримати максимальний ефект і бути поміченим

Автор

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

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

Існує декілька причин, чому стилізація таблиць є важливою:

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

Створення базової таблиці за допомогою HTML

Щоб продемонструвати роботу таблиць в HTML, ми створимо папку проекту, в якій розмістимо два файли: index.html для HTML-коду та styles.css для CSS-стилів.

Для початку, скористайтеся наступними командами:

mkdir Styling-HTML-Tables

cd Styling-HTML-Tables

touch index.html styles.css

Тепер у вас є основна структура проекту для створення HTML-таблиць. У прикладі будемо використовувати таблицю з різними мовами програмування, їх застосуванням та прикладами компаній, які їх використовують.

Для створення HTML-таблиці, всі дані необхідно обгорнути в тег <table>...</table>.

У файлі HTML створіть базову структуру HTML-документа та додайте наступний код у тег <body>:

<table>
       <tr>
          <th>Мова</th>
          <th>Поширені Використання</th>
          <th>Компанії, що Використовують</th>
      </tr>
      <tr>
          <td>Java</td>
          <td>Веб-додатки, Android-додатки, корпоративні програми</td>
          <td>Google, Amazon, LinkedIn</td>
      </tr>
      <tr>
          <td>Python</td>
          <td>Наука про дані, веб-розробка, автоматизація</td>
          <td>Google, Dropbox, Spotify</td>
      </tr>
      <tr>
          <td>JavaScript</td>
          <td>Веб-розробка, фронтенд-розробка, скрипти браузера</td>
          <td>PayPal, Facebook, Netflix</td>
      </tr>
      <tr>
          <td>C++</td>
          <td>Розробка ігор, системне програмування, вбудовані системи</td>
          <td>Tesla, Microsoft, Adobe</td>
      </tr>
      <tr>
          <td>Swift</td>
          <td>Розробка iOS, розробка macOS</td>
          <td>Apple</td>
      </tr>
      <tr>
          <td>PHP</td>
          <td>Веб-розробка, серверні скрипти, CMS</td>
          <td>WordPress, Wikipedia, Yahoo</td>
      </tr>
  </table>

При аналізі цього коду ви побачите кілька тегів, що входять до складу тегу <table>: <tr>, <th> та <td>.

Ці теги виконують наступні функції:

  • <tr> (ряд таблиці): обгортає рядки таблиці, які містять елементи <th> або <td>.
  • <th> (заголовок таблиці): визначає заголовок стовпця, зазвичай виділений жирним шрифтом.
  • <td> (дані таблиці): описує вміст кожної комірки таблиці.

Після візуалізації наведеного вище коду в браузері ви отримаєте базову таблицю без стилізації.

Властивості CSS для стилізації таблиць

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

Пам’ятаєте створений файл styles.css? Тепер настав час його використовувати. Спочатку необхідно імпортувати цей файл у HTML-файл, щоб стилі застосувалися. У розділі <head> вашого HTML-документа додайте наступний код:

<link rel="stylesheet" href="styles.css">

Тепер можна приступати до стилізації таблиці, використовуючи різні CSS-властивості.

#1. Рамка

Для додавання рамки навколо комірок таблиці ми використаємо властивість border для елементів <th> і <td>. Задамо товщину рамки у 2 пікселі.

th, td {
    border: 2px solid orange;
}

У цьому прикладі, товщина рамки становить 2 пікселі, а колір – помаранчевий.

Після оновлення сторінки в браузері ви побачите таблицю з рамками навколо комірок.

#2. Згортання рамок

Якщо придивитись до попереднього зображення, можна помітити, що між рамками комірок є проміжки. Властивість border-collapse визначає, чи повинні суміжні комірки мати спільну рамку.

Щоб комірки мали спільну рамку, додайте в CSS-файл наступний код:

table {
       border-collapse: collapse;
}

Після оновлення сторінки, ви побачите, що комірки мають спільні рамки.

Якщо ж ви бажаєте, щоб комірки мали окремі рамки, використайте цей код:

table {
       border-collapse: separate;
}

В такому випадку, відображення таблиці буде наступним:

#3. Відступи між рамками

За допомогою властивості border-spacing можна створити відступи між комірками таблиці. Це правило задається всередині класу таблиці в CSS-файлі.

Для коректної роботи цієї властивості необхідно використовувати border-collapse: separate;.

Наприклад, клас таблиці може виглядати наступним чином:

table {
       border-collapse: separate;
       border-spacing: 3px;
}

В цьому випадку, відступ між комірками буде 3 пікселі.

Результат візуалізації таблиці буде наступним:

#4. Розмітка таблиці

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

Для того, щоб комірки мали фіксовану ширину, задаємо властивість table-layout як fixed.

table-layout: fixed;

Оновлений клас таблиці в CSS-файлі матиме наступний вигляд:

table {
       border-collapse: collapse;
       border-spacing: 3px;
       table-layout: fixed;
}

Якщо ви хочете, щоб ширина комірок автоматично підлаштовувалась під їх вміст, змініть властивість table-layout на auto.

table-layout: auto;

Кінцевий клас таблиці в CSS-файлі матиме такий вигляд:

Зверніть увагу на останню комірку таблиці, де додано текст “MailChimp і багато іншого”.

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

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

Стилізація цих елементів може бути виконана наступним чином:

#5. Колір фону

Змінимо колір фону верхнього рядка на жовто-зелений. Для цього використаємо псевдоклас :first-child.

Додайте цей код до CSS-файлу:

tr:first-child {
       background-color: yellowgreen;
}

Остаточний результат відображення таблиці буде наступним:

#6. Шрифт

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

Змінимо стиль шрифту в останньому стовпці (“Компанії, що використовують”).

Зробимо весь текст у цьому стовпці курсивом, використовуючи селектор td:last-child. Додайте наступний код до CSS-файлу:

td:last-child {
       font-style: italic;
}

Оновлена сторінка відобразиться так:

Також змінимо колір та розмір шрифту в першому стовпці, щоб зробити його більш виразним.

Додайте наступний код до CSS-файлу:

tr td:first-child {
         color: red;
         font-size: x-large;
         font-weight: bolder;
}

Після оновлення сторінки ви помітите, що текст у першому стовпці (“Мова”) тепер більший, червоного кольору та виділений жирним шрифтом.

Як зробити таблицю адаптивною

Створена таблиця може неправильно відображатися на малих екранах. Перевірити адаптивність таблиці можна за допомогою інструментів розробника в браузері Chrome або інших інструментів.

Розглянемо один із підходів для забезпечення адаптивності таблиці:

  • Задайте ширину елемента <table> в коді.
table {
       width: 100%;
       border-collapse: collapse;
       table-layout: fixed;
}
  • Налаштуйте перенос слів для елементів td та th, щоб довгі слова вміщувалися в комірки.
th, td {
         border: 2px solid orange;
         word-break: break-word;
}

Найкращі практики для стилізації таблиць

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

  • Використовуйте зовнішні таблиці стилів: Застосування зовнішніх таблиць стилів дозволяє переносити стилі між різними сторінками та економити час на розробці.
  • Дотримуйтесь простоти: Намагайтесь не перевантажувати таблиці надмірними стилями. Забезпечте простоту дизайну, зробіть таблиці легкими для сканування та читання.
  • Додавайте рамки: Рамки допомагають користувачам легко читати та сканувати таблицю.
  • Використовуйте узгоджені кольори: Якщо у вас є кілька таблиць на веб-сторінці, використовуйте однакові кольори та шрифти. Кольори вашого бренду допоможуть покращити його впізнаваність.
  • Зробіть таблиці адаптивними: Розміри екранів пристроїв користувачів можуть бути різними, тому важливо зробити таблиці адаптивними.
  • Використовуйте підписи: Підпис коротко описує зміст таблиці.
  • Додавайте пробіли: Якщо на сторінці декілька таблиць, розділіть їх пробілами та правильно підпишіть.

Висновок

Тепер ви маєте знання та навички для створення і стилізації базової HTML-таблиці. Хоча ми не охопили всіх аспектів HTML та CSS, ви можете створювати таблиці різного розміру та складності, залежно від потреб.

Для поглиблення знань про CSS рекомендуємо вивчити додаткові довідкові матеріали та шпаргалки, щоб ефективно поліпшувати інтерфейс ваших веб-сайтів.