Css: оформлення таблиць. Приклади оформлення
Відео: Введення в CSS. Урок 9. Оформлення додаткових сторінок за допомогою CSS
Оформлення таблиць за допомогою CSS - заняття цікаве і відповідальна. Підходити до цієї справи потрібно грамотно, зі знанням всіх можливостей стилів. Крім цього, потрібно володіти почуттям прекрасного, щоб не відлякувати своєю творчістю відвідувачів сайту.
У таблицях можна перетворити практично все. Гарне оформлення таблиць CSS має на увазі використання оформлення кордонів, фону таблиці, фону осередків, проміжку між ними і багато чого іншого. Розглянемо найголовніше.
кордон таблиці
Стиль оформлення таблиці CSS завжди має на увазі гру з кордоном (рамкою). Всі таблиці за замовчуванням не обводяться рамкою. Тобто вона дорівнює 0 пикселям. Але це можна виправити за допомогою властивості border.
Можна вказати зовнішню рамку для всієї таблиці:
table {border: 3px solid black-}
Відео: Красиві таблиці на CSS
Завдяки цій сходинці у всіх таблиць на сайті, де використовується цей стиль, буде чорна рамка. Зверніть увагу, що кордон тільки по краях, але не всередині таблиці. Для осередків і рядків рамка задається інакше.
th, td {border: 3px solid black-}
Товщину і колір можна вказати будь-які. Майте на увазі, що кордони не подвоюються при стикуванні осередків.
Слово solid позначає суцільне оформлення. Вказувати можна і інші значення.
Найчастіше використовується саме суцільна рамка, оскільки вона виглядає більш привабливо і не відволікає уваги від основного контенту сайту.
Властивість border можна вказувати ще і за напрямками. Кордон можна задавати тільки для верхньої, нижньої, лівої чи правої частини. Оскільки в деяких випадках не підходить варіант з рамкою для всієї таблиці відразу.
table {border-top: 1px solid red-}
Так можна задати рамку тільки для верхньої частини таблиці. Аналогічно і для будь-яких інших сторін, просто замість top пишемо: right, left або bottom.
заголовок таблиці
Заголовок таблиці можна вказати за допомогою тега
Цей заголовок відображається так само, як стандартно в книгах (наприклад "Таблиця 1").
Вказати можна і розташування цього заголовка властивістю caption-side (top або bottom). Вирівнювання зліва чи справа задається властивістю text-align.
фон таблиці
Фоном таблиці може бути який-небудь колір чи малюнок. Колір задається властивістю background-color. Назви властивостей повністю відповідають употребляющимся в мові. Це полегшує запам`ятовування у багато разів.
Колір можна вказувати як назвою, так і різними кодуваннями. Крім цього, можна зазначити таке:
- Transparent - прозорість елемента.
- Inherit - колір такий же, як і у батьківського елементу.
- Initial - значення за замовчуванням.
Варіант з прозорістю використовувати можна в тих випадках, коли всі таблиці в тексті в CSS файлі оформляються одним кольором, але в даному випадку такої необхідності немає.
Крім цього, фоном може бути зображення. Для цього в стилі прописується властивість background-image. Шлях вказується ось так:
url ( `URL`)
Шлях до файлу може бути як відносним, так і абсолютним.
Більш складну заливку можна робити градієнтом:
- linear-gradient ();
- radial-gradient ();
- repeating-linear-gradient () і repeating-radial-gradient () - повтор градієнта.
фон осередків
Крім фону в цілому, можна задати чергується фон в шпальтах або рядках. Для оформлення ця властивість використовується дуже часто, оскільки візуальне розділення рядків полегшує читання інформації.
Крім чергування, можна вказувати і номер конкретного стовпця або рядка. Наприклад ось так:
- tr: nth-child (even) {...} - вказівка чергування рядків;
- tr: nth-child (1) {...} - вказівка властивості конкретної рядки;
- td: nth-child (even) {...} - вказівка чергування стовпців;
- td: nth-child (1) {...} - вказівка властивості конкретного стовпця.
Крім чергування і номерів, можна вказувати - перший (td: first-child) або останній (td: last-child).
Проміжок між осередками
В CSS оформлення таблиць дозволяє прибрати проміжки між осередками. За замовчуванням вони є. Наприклад, якщо задати рамку в таблиці без налаштувань відстані між кордонами, то буде ось такий результат.
Погодьтеся, виглядає не дуже красиво і не зручно для читання. У користувачів буде в очах рябіти через це. Прибрати ці проміжки можна, прописавши в стилі таблиці ось таку строчку:
border-collapse: collapse
Але буває і так, що відстань, навпаки, потрібно збільшити. Причому розмір проміжків можна вказати як між стовпцями, так і між рядками. Для цього зазначаємо таке значення (замість collapse):
border-collapse: separate
Але таким дією буде зазначено, що потрібно розділяти осередки. Як саме їх розділяти, вказується додатковим властивістю:
border-spacing: 20px.
Якщо потрібно вказати різну відстань між рядками і колонами, то вказується два значення:
border-spacing: 10px20px.
Різниця в браузерах
Майте на увазі, що в CSS оформлення таблиць може виглядати по-різному, в залежності від браузера. Особливо погано стоїть справа зі старими версіями, які нововведення в CSS не підтримують.
Вище наведено приклад товщини рамки для цифрових значень.
Далі наведемо приклад товщини рамки для констант.
Стилі рамок також сильно відрізняються.
Тому при розробці завжди дивіться результат в різних браузерах. 
В CSS оформлення таблиць рекомендується робити з перевіркою типу браузера. Особливо велика проблема раніше була з користувачами зі старими версіями Internet Explorer.
Зовсім просунуті розробники можуть в залежності від браузера підключати абсолютно різні CSS файли. А хтось робить перевірки в кожному чи якомусь конкретному стилі (класі).
Найбільше проблем виникає з тінями.
CSS: оформлення таблиць, приклади
Оформлення може бути найрізноманітнішим. Все залежить від сайту в цілому і його дизайну. Все повинно поєднуватися і не пістрявити квітами. Також велику роль вносить і смак розробника. Почуття прекрасного у всіх різний.
Наведемо приклади різних таблиць. На малюнку вище показано використання нахилу і гра з кольором фону і кордонів.
Багатьом буде цікавий приклад красивого акуратного оформлення, яке не буде різати очі користувачам. Такий варіант доречний практично в будь-якій ситуації.
Краї можна робити округленими. Виглядає досить красиво.
висновок
Як бачите, для оформлення зовнішнього вигляду таблиць в CSS існує величезна кількість інструментів. У кожного параметра також величезна кількість варіантів значень. Якщо користуватися всім цим відразу, можна створювати шедеври. Особливо якщо робити адаптивний дизайн під всі браузери.
Головне при оформленні - не переборщити з ефектами. Все потрібно робити в міру. На перших порах верстальники люблять експериментувати і використовують відразу всі свої знання. У підсумку таблиці виявляються перенасиченим властивостями. Намагайтеся уникати цих помилок.
Більш того, деякі параметри можуть заважати один одному. Наприклад, нема чого вказувати колір фону таблиці, якщо при цьому ще там встановлено фоновий малюнок, який буде перекривати зазначений колір.
