За замовчуванням ширина таблиці встановлюється браузером самостійно, виходячи з обсягу в ній табличних даних. Якщо тексту в осередках багато, тоді таблиця буде займати всю доступну їй ширину, а якщо мало, то ширина таблиці автоматично зменшиться. При наявності на сторінці кількох таблиць їх різна ширина виглядає часом недбало. Так що краще явно задати ширину таблиці у відсотках, пікселях, em або будь-яких інших одиницях CSS, як показано в прикладі 1.
Приклад 1. Ширина таблиці у відсотках
В даному прикладі ширина 100% застосовується до всіх таблиць. Знову ж, класи допомагають встановити ширину для обраних таблиць задіюючи раніше створений клас. Щоб вказати таблиці ширину в 200 пікселів треба додати до елементу
клас tbl-small.
вирівнювання таблиць
Початково будь-яка таблиця розташовується по лівому краю вікна браузера. Можна вирівняти її по центру, якщо тільки таблиця не займає всю доступну область, іншими словами, менше 100%. Для цього до стилю таблиці слід додати відступи через властивість margin зі значенням auto. як показано в прикладі 2.
Приклад 2. Вирівнювання таблиці за допомогою margin
В даному прикладі для всіх таблиць на сторінці задано вирівнювання по центру.
Колір фону одночасно всіх елементів таблиці встановлюється через властивість background. яке застосовується до селектора table. При цьому слід пам'ятати про правила використання стилів, зокрема, спадкуванні властивостей елементів. Якщо одночасно з table задати колір у селектора td або th. то він і буде встановлений в якості фону (приклад 3).
Приклад 3. Колір фону
Результат даного прикладу показаний на рис. 1.
Мал. 1. Зміна кольору фону
Якщо нам потрібно зробити зебру - так називається чергування рядків різного кольору, то слід скористатися псевдоклас: nth-child. додаючи його до селектора tr. Щоб зебра поширювалася тільки на тіло таблиці, а не її заголовок, відокремимо їх один від одного за допомогою елементів і
(Приклад 4).
Приклад 4. Створення зебри
Результат даного прикладу показаний на рис. 2.
Значення even у селектора: nth-child застосовує стиль до всіх парних рядках і задає їх колір фону. Можна, також, поміняти його на odd. тоді сірим кольором будуть виділятися непарні рядки.
Аналогічним чином кольором виділяються не рядки, а колонки, для цього слід використовувати селектор tbody td: nth-child (even).
Поля всередині осередків
Полем називається відстань між кордоном осередки і її вмістом. Без полів текст в таблиці «налипає» на рамку, погіршуючи тим самим його сприйняття, додавання ж полів дозволяє поліпшити Новомосковскбельность тексту. Для цієї мети застосовується стильова властивість padding. яке працює з селектором td або th. як показано вище в прикладах 3 і 4. Зазвичай вказують одне значення, воно тоді задає порожній простір навколо вмісту осередки відразу з усіх боків. Два значення пишуться, коли треба задати різні поля по вертикалі (перше значення) і горизонталі (друге значення).
Відстань між осередків
Між осередків є невелика пусте відстань, яке не видно, поки для вічок не встановити кордон або фоновий колір. Початково ця відстань дорівнює 2px і його можна змінити за допомогою властивості border-spacing. додаючи його до селектора table (приклад 5).
Приклад 5. Використання border-spacing
Додаючи цей стиль до будь-якої таблиці отримаємо результат продемонстрований на рис. 3.
Мал. 3. Вид таблиці з відстанню між осередків
Якщо до table додається властивість border-collapse із значенням collapse. то border-spacing ігнорується, тому як відстані між осередків вже немає.
Межі і рамки
Щоб чітко відокремити вміст одного осередку від іншої, до осередків додаються кордону. За їх створення відповідає стильова властивість border. яке застосовується до елементів (
або | ). Однак тут нас підстерігають підводні камені. Оскільки рамка створюється для кожного осередку, то в місцях зіткнення осередків виходить межа подвоєною товщини. Для усунення зазначеної особливості існує кілька шляхів. Найпростіший - скористатися властивістю border-collapse із значенням collapse. У його завдання входить відстежувати зіткнення ліній і замість подвійної кордону зображати одинарну. Це властивість досить додати до селектора table. а далі воно все зробить самостійно (приклад 6).
Приклад 6. Застосування властивості border-collapse при створенні рамок таблиці
Різниця між кордонами таблиці при додаванні властивості border-collapse. а також без нього, представлена на рис. 4.
а - властивість не встановлено
б - властивість встановлено
Мал. 4. Форма таблиці при використанні border-collapse
На рис. 4а показана рамка таблиці, яка використовується за замовчуванням. Зверніть увагу, що всередині таблиці всі лінії мають подвоєну товщину. Додавання border-collapse прибирає цю особливість, і товщина всіх ліній стає однаковою (рис. 4б).
Лінії не обов'язково робити для всіх сторін осередків, згідно дизайну вони можуть відокремлювати один рядок або колонку від іншої. Для цього ми використовуємо властивості border-bottom. border-left і інші подібні. Застосовувати кордону до елементів | . .
і не можна, тому додаємо їх до селектору table і td (приклад 7).
Приклад 7. Лінії між рядків
Результат даного прикладу показаний на рис. 5.
Мал. 5. Таблиця з горизонтальними лініями
Вирівнювання тексту в осередках
За замовчуванням текст в комірці таблиці вирівнюється по лівому краю і по центру висоти. Винятком є елемент
. він визначає осередок заголовка, в якому вирівнювання відбувається по центру. Щоб змінити спосіб вирівнювання застосовується стильова властивість text-align (приклад 8).
Приклад 8. Вирівнювання вмісту комірок по горизонталі
В даному прикладі вміст | вирівнюється по лівому краю, а вміст | - по центру. Результат прикладу показаний нижче (рис. 6).
Мал. 6. Вирівнювання тексту в осередках
Вирівнювання по вертикалі в осередку завжди відбувається по її центру, якщо це не обумовлено. Це не завжди зручно, особливо для таблиць, у яких вміст комірок розрізняється по висоті. В такому випадку вирівнювання встановлюють по верхньому краю осередки за допомогою властивості vertical-align із значенням top. як показано в прикладі 9.
Приклад 9. Вирівнювання вмісту комірок по вертикалі
В даному прикладі вирівнювання тексту відбувається по верхньому краю. Результат прикладу показаний на рис. 7.
Мал. 7. Вирівнювання тексту в осередках
Cookie на сайті
Ми використовуємо cookie для коректної роботи сайту та покращення сервісу.
|
