Тема Оформлення таблиць Питання що розглядаються 1

Тема: Оформлення таблиць

Питання, що розглядаються: 1. Структура таблиці 2. Розповсюджені варіанти використання

Цілі і завдання вивчення теми: Ознайомитися зі структурою таблиць, розглянути розповсюджені елементи використання таблиць та поширені помилки у створенні таблиць. Company Logo

1. Структура таблиці Структурні елементи таблиці: - Заголовки стовпців таблиці - Осередки даних таблиці - Заголовок таблиці

1. Структура таблиці. Нестилізовані таблиці. Розглянемо, як зображується наступна нестилізованна таблиця. Дані легко зрозумілі, але потрібно деяке зусилля, щоб визначити, що відбувається. Давайте додамо деяке оформлення, щоб полегшити читання.

Структура таблиці. Ширина таблиці та комірок Браузер за замовчуванням використовує налаштування table {width: auto; }, що призводить до виводу таблиці на всю ширину контенту. Це зазвичай виглядає не дуже добре. Давайте припустимо, що таблиця пов’язана зі стовпцем контенту шириною 600 px. Задамо для таблиці розмір у 100% доступної ширини, щоб максимально використовувати доступний простір. Так як є чотири стовпці, давайте також поставимо ширину комірок таблиці по 25% для кожної: table { width: 100%; } th, td { width: 25%; } Це просте оформлення створює результат, показаний на малюнку вище.

Структура таблиці. Вирівнювання тексту Таблицю все ще трохи незручно читати, тому давайте задамо вирівнювання тексту трохи точнішим – додаткове правило нижче буде вирівнювати заголовки стовпців зліва відповідно з контентом (за замовчуванням браузери центрують заголовки стовпців таблиці). table { width: 100%; } th, td { width: 25%; text-align: left; } Це трохи покращує зовнішній вигляд, як можна бачити на малюнку.

Структура таблиці. Межі Таблиця виглядає трохи краще, проте її все ще важко читати уздовж кожного рядка. Настав час поставити кілька кордонів, щоб полегшити читання вмісту. Необхідно задати межі окремо для кожної частини таблиці, а потім вирішити, як ці кордони мають комбінуватися. Щоб показати, де буде заданий кордон, малюнок 4 нижче показує різні межі для таблиці (суцільна чорна), заголовку таблиці (суцільна сіра), th (штрихова синя) і td (точкова червона).

Структура таблиці. Межі Створюємо межі таблиці за допомогою коду: table { width: 100%; border: 1 px solid #000; } th, td { width: 25%; text-align: left; vertical-align: top; border: 1 px solid #000; }

Структура таблиці Одержаний результат:

Структура таблиці. Заповнення Тепер комірки мають кордони. Може бути корисно додати вільний простір у заголовок і елементи таблиці. Для цього використовується заповнення: table { width: 100%; border: 1 px solid #000; } th, td { width: 25%; text-align: left; vertical-align: top; border: 1 px solid #000; border-collapse: collapse; padding: 0. 3 em; } caption { padding: 0. 3 em; }

Структура таблиці. Заповнення Ось результат коду:

Структура таблиці. Розміщення заголовка таблиці Заголовок таблиці можна перемістимо його вниз: table { width: 100%; border: 1 px solid #000; } th, td { width: 25%; text-align: left; vertical-align: top; border: 1 px solid #000; border-collapse: collapse; padding: 0. 3 em; caption-side: bottom; } caption { padding: 0. 3 em; } перемістити в інше місце. Давайте

Структура таблиці. Розміщення заголовка таблиці Результат коду:

Фон Ще одним простим способом оформлення таблиць є додавання кольору фону і зображень. Це робиться за допомогою властивості background, хоча потрібно пам’ятати, що різні частини таблиці будуть “нашаровуватися” одна на одну. Специфікація CSS 2 докладно пояснює шари фону, проте коротка версія полягає в тому, що фон буде перевизначати один одного в наступному порядку: • таблиця (яка визначає “низ” або “основу”) • групи стовпців • стовпці • групи рядків • рядки • комірки (“верх” або “фронтальний”, їх фон перевизначає всі інші).

2. Розповсюджені варіанти використання Розмітка зебра Приклад коду: . . . <tr class="odd"> <tr class="even">. . .

Розповсюджені варіанти використання Потім додається контекстний клас для завдання фону всіх комірок у рядках класу odd: . odd th, . odd td { background: #eee; }

Неповні сітки Для деяких рішень добре підходять менш структуровані, більш відкриті сітки. Простим варіантом є видалення вертикальних кордонів та видалення заливки фону заголовка таблиці, як показано на малюнку. Код CSS для цього подання має вигляд: table { width: 100%; border: 1 px solid #999; text-align: left; border-collapse: collapse; margin: 0 0 1 em 0; caption-side: top; } caption, td, th { padding: 0. 3 em; } th, td { border-bottom: 1 px solid width: 25%; } caption { font-weight: bold; font-style: italic; } #999;