Дизайн таблиці HTML з CSS - SELFHTML-Wiki

Інформація про цей текст

дизайн

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

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

Зміст

  • 1 Основні налаштування CSS
    • 1.1 рамки та межі
    • 1.2 Заголовки
    • 1.3 поля
  • 2 Приклад підтримки браузера
    • 2.1 Групи стовпців у комірках
    • 2.2 Заголовок таблиці
    • 2.3 Основна інформація про CSS
    • 2.4 Розробка заголовка та комірок даних
    • 2,5 перетинання зебри
    • 2.6 Заголовки рядків
    • 2.7 Створити заголовок
    • 2.8 Позначення рядків у: наведення
  • 3 Приклад федеральних штатів сірий на сірий
  • 4 веб-посилання

Основні налаштування CSS [редагувати]

Рамки та межі [редагувати]

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

При повороті кордону: згортання це можна змінити, щоб таблиця відображалася у "звичайній" сітці.

Заголовки [редагувати]

У таблиці осередки th утворюють заголовки для окремих стовпців або рядків, елемент caption представляє заголовок для таблиці. Зазвичай (тобто у таблиці стилів за замовчуванням) заголовки таблиць відображаються жирним шрифтом, підпис відображається окремо від Стіл розміщений. Це можна змінити за допомогою CSS:

Поля [редагувати]

Більшість таблиць містять ряди чисел.

Тут важливо чітко вирівняти цифри та відповідно позначити суми.

Приклад підтримки браузера [редагувати]

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

Елемент tbody, thead і tfoot було вставлено в таблицю (браузер може генерувати елемент tbody сам). Рядки вводяться з тр.

Заголовок таблиці складається з го елементів, окремих комірок з елементами td.

Групи стовпців між клітинками [редагувати]

Оскільки Internet Explorer, на відміну від інших браузерів, не отримує автоматичних оновлень, цікаво знати, між якими версіями розподілена частка ринку:

Заголовок таблиці [редагувати]

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

Кожен стовпець має комірку заголовка (th) у заголовку таблиці (thead), яка присвоюється стовпцю з scope = "col".

Подібним чином лівий стовпець з scope = "row" служить заголовком таблиці для окремих рядків.

Основна інформація CSS [редагувати]

За допомогою властивості border-kolaps ви можете визначити, чи відображаються межі сусідніх елементів таблиці розділеними (border-kolaps: окремо;) чи збігаються (border-kolaps: колапс;).

Шрифт у заголовку та комірках даних відображається стандартним розміром шрифту, шрифт у комірках заголовка виділений жирним шрифтом.

Дизайн головки та комірок даних [редагувати]

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

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

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

Перехід через зебру [редагувати]

Особливо для більших таблиць легше розфарбувати кожен другий рядок.

Заголовки рядків [редагувати]

Ви пам’ятаєте клітинки заголовка в кожному рядку?

Заголовок дизайну [редагувати]

Заголовок, що міститься в елементі підпису, тепер оформлений стрічкою:

Псевдоелемент зліва надає смузі тривимірний вигляд.

Тепер таблиці також надано тінь.

Позначення рядків у: hover [редагувати]

Коли користувач рухає мишею над таблицею, відповідна комірка даних та відповідний рядок таблиці виділяються кольором:

Приклад федеральних штатів сірий сірим [редагувати]

Далі федеральні держави Федеративної Республіки будуть представлені у другому прикладі.