| .
Тепер і таблиця і осередки мають рамки, при цьому і кожна ланка й таблиця мають свої власні рамки. В результаті між рамками з'явилося порожній простір, управляти розміром цього простору дозволяє властивість border-spacing. яке задається для всієї таблиці цілком. Іншими словами, не можна керувати проміжками між різними осередками індивідуально.
Навіть якщо прибрати проміжки між осередками за допомогою значення 0 властивості border-spacing, то рамки осередків будуть стикатися один з одним, подвоюючи. Для об'єднання рамок осередків використовується властивість border-collapse. Воно може приймати два значення:
- separate: є значенням за замовчуванням. Осередки відображаються на невеликій відстані один від одного, кожен осередок має свою власну рамку.
- collapse: з'єднує сусідні рамки в одну, все проміжки між осередками, а також між осередками і рамкою таблиці ігноруються.
спробувати зараз »
Розмір таблиці
Після додавання рамок до осередків таблиці стало помітно, що вміст комірок занадто близько розташоване до країв. Для додавання вільного простору між краями осередків і їх вмістом можна скористатися властивістю padding:
Розмір таблиці залежить від її вмісту, але часто виникають ситуації, коли таблиця виявляється занадто вузькою і з'являється необхідність її розтягнути. Ширину і висоту таблиці можна змінювати за допомогою властивостей width і height. задаючи потрібні розміри або самої таблиці або осередкам:
вирівнювання тексту
За замовчуванням текст в заголовних осередках таблиці вирівнюється по центру, а в звичайних осередках текст вирівняний по лівому краю, використовуючи властивість text-align можна управляти вирівнюванням тексту по горизонталі.
CSS властивість vertical-align дозволяє управляти вирівнюванням текстового вмісту по вертикалі. За замовчуванням текст вирівняний вертикально по центру осередків. Вертикальне вирівнювання можна перевизначити за допомогою одного з значень властивості vertical-align:
- top: текст вирівнюється по верхній межі осередку
- middle: вирівнює текст по центру (значення за замовчуванням)
- bottom: текст вирівнюється по нижній межі комірки
спробувати зараз »
Чергування фонового кольору рядків таблиці
Додавати атрибут class до кожної другому рядку досить обтяжлива заняття. В CSS3 був доданий псевдо-клас: nth-child. дозволяє вирішити цю проблему альтернативним шляхом. Тепер ефекту чергування можна досягти виключно засобами CSS, не вдаючись до зміни HTML-розмітки документа. За допомогою псевдо-класу: nth-child можна вибрати всі парні або непарні рядки таблиці, використовуючи одне з ключових слів: even (парні) чи odd (непарні):
Зміна фону рядка при наведенні курсору
Ще одним способом підвищення зручності читання табличних даних є зміна фонового кольору рядка при наведенні на неї курсора миші. Це допоможе виділити потрібний вміст таблиці і підвищить візуальне сприйняття даних.
Реалізувати такий ефект дуже просто, для цього потрібно додати псевдо-клас: hover до селектору рядки таблиці і задати потрібний колір фону:
|