При великій кількості рядків у таблиці буває важко зіставляти дані різних колонок між собою. Для цього потрібно візуально відокремити один рядок таблиці від іншого - або за допомогою ліній або за рахунок додавання фонового кольору.
Спочатку розберемо варіант використання горизонтальних ліній. На рис. 1 наведено один із можливих способів акцентування уваги на рядках таблиці. Кожен рядок зверху та знизу обрамляється лінією, за рахунок цього погляд відвідувача ковзає вздовж них і не перескакує на сусідній рядок. При цьому дані, що знаходяться в колонках, також зв'язуються між собою, але вже за рахунок одночасного вирівнювання лівим краєм і порожнього простору між колонками.
Лінії між рядками встановлюються досить просто, для цього слід додати стильовий атрибут border-bottom до селектора TD. Якщо навколо таблиці міститься рамка, нижня межа вийде подвоєної товщини. У цьому випадку можна прибрати нижню лінію в останньому рядку або приховати нижню межу таблиці (приклад 1).
Приклад 1. Поділ рядків таблиці лініями
| 2004 | 2005 | 2006 | |
|---|---|---|---|
| Рубіни | 43 | 51 | 79 |
| Смарагди | 28 | 34 | 48 |
| Сапфіри | 29 | 57 | 36 |
У цьому прикладі вертикальні лінії між осередками заголовка додаються за рахунок параметра border, який використовується для селектора TH. При цьому виникає порожній простір завтовшки один піксел між межею таблиці та фоновою областю заголовка.
Застосування кольору розширює можливості зміни виду таблиці. Наприклад, колір фону парних рядків може відрізнятися.
Для зміни кольору фону потрібних рядків введемо додатковий клас, назвемо його even , і додаватимемо його до парних рядків таблиці, а саме до тегу
Колір фону непарних рядків визначається шляхом зміни кольору всієї таблиці. Але оскільки для вибіркових рядків (для яких доданий параметр class="even") встановлюється індивідуальний колір, він «перекриває» колір фону таблиці. За рахунок цього і виходить чергування кольорових рядків.
Приклад 2. Виділення рядків таблиці кольором
| 2004 | 2005 | 2006 | |
|---|---|---|---|
| Рубіни | 43 | 51 | 79 |
| Смарагди | 28 | 34 | 48 |
| Сапфіри | 29 | 57 | 36 |
| Аметисти | 23 | 64 | 97 |
У цьому прикладі подвійний лінії внизу таблиці не виникає в результаті застосування властивості border-collapse значення collapse до селектора TABLE . Цей параметр відстежує появу подвійних ліній у місцях зіткнення осередків та замінює їх одинарними лініями. Зауважимо, що в різних браузерах можуть виникнути різночитання з приводу кольору ліній, що залишаються в тому випадку, якщо колір кордону навколо таблиці не збігається з кольором ліній під рядками.
Здрастуйте, шановні читачі блогу сайт. Вирішив написати невелику посаду на тему використання CSS з метою поліпшення сприйняття відвідувачами сайту.
Ні з того, ні з цього на думку спала думка, що якщо пункти в правому меню мого блогу оживити за допомогою чергування фонового кольору(зробити різні кольори для парних та непарних рядків), то це може підвищити юзабіліті. Надії я покладаю на зручність сприйняття великої кількості інформації при її розбитті на блоки (як це, наприклад, відбувається при використанні абзаців у тексті).
Подібну практику дуже часто застосовують при стильовому оформленні таблиць, коли хочуть підвищити наочність інформації, що виводиться в них. У ході пошуку рішення виявилося, що це завдання вирішується досить просто і засобами одного лише CSS.
Не потрібно позначати класами парні та непарні елементи списку (праве меню у мене на основі функціонує). Достатньо лише дописати пару рядків коду з використанням псевдокласу nth-child у файл CSS, який відповідає за стильове оформлення сайту Однак, nth-child має і масу інших застосувань, про що теж не згадати в пості.
Можливості псевдокласу nth-child та його застосування на сайті
Власне, після анонсування псеводкласу nth-child можна було б піст і завершувати, бо ви самі можете нагуглити масу інформації щодо нього. Але це не наш шлях, тож продовжимо. Отже, спочатку я опишу свої дії щодо перетворення правого меню на «смугасте». Досить було з'ясувати за допомогою вбудованих у браузери інструментів для розробників (викликається з контекстного меню потрібного елемента на веб-сторінці вибором пункту подібного «Перегляд код елемента») де файлу стилів задається зовнішній вигляд рядків цього списку.
Принцип роботи з інструментами розробників аналогічний тому, що описував у статті про . Клацаємо правою кнопкою по будь-якому пункту в лівому меню мого блогу і дивимося на панелі, що відкрилася, результуючий звіт:
Зліва ви побачите Html код цього елемента (нас цікавить елемент з тегами LI — рядок списку), а у правій колонці наведено CSS правила, які браузер використовує для його стильового оформлення. Де знаходиться стильовий файл, ви зможете негайно дізнатися, підвівши курсор миші до його назви.
У моєму випадку це буде файл , який можна відкрити підключившись до сайту по ФТП і пройшовши наступним шляхом (редагувати файли шаблону з адмінки WordPress я б не радив, бо немає можливості зробити крок назад, як це дозволяє, наприклад, ).
/wp-content/themes
Власне, на панелі інструментів для розробників у області CSS стилів ви навіть рядок знайдете, на якому потрібне правило прописане у файлі стилів. У моєму випадку це 281 рядок. Тому, відкривши style.css у Нотепаді (він у мене призначений редактором за замовчуванням для всіх файлів, які зустрічаються в движку сайту), я на цей рядок негайно перемістився.
І дописав відразу під нею ще пару правил (це правило відповідає за зміну кольору фону рядка правого меню, коли прямо над нею знаходиться курсор миші — це робить меню більш «живим», чи що) і зі згаданим вище псевдокласом nth-child. Якщо про hovver ми вже говорили (див. посилання трохи вище), то про nth-child поговоримо зараз. Якщо звернули увагу, що у круглих дужках для цього псевдокласу прописано параметр 2n.
Nth-child(2n)
Загалом значення цього псевдокласу nth-childзадається за допомогою виразу: an+b, де a і b - цілі числа, а n - лічильник, що приймає цілі значення від 0 і більше: 0,1,2,3... У нашому випадку при зміні лічильника n ми будемо отримувати цифри 0, 2, 4, 6 і т.д. Це означає, що прописана для цього псевдокласу властивість (у нашому випадку це правило для завдання фону рядка списку за допомогою ) у списку #E4F2FA.
Цей шістнадцятковий найбільш часто. Для пошуку відповідних кольорів я використовував програму Contrast Analyser 2.0, описану за наведеним посиланням. Вона дозволяє захопити колір з екрану та підібрати його світліші тони, що я, власне, і зробив.
Для фону рядка меню, при наведенні на неї курсором миші (псевдоклас hover), я вибрав ще світліший відтінок з того ж ряду.
Інші приклади використання nth-child
Якщо захочете змінити фон або якимось чином впливати на зовнішній вигляд (наприклад, додати їм відступи, збільшити шрифт або зробити ще щось непристойне), то використовуйте вираз. Можете перевірити, що підставляючи замість n цілі числа починаючи з нуля, ви отримаєте лише непарні числа. Можна використовувати відразу обидва варіанти (для парних і непарних рядків списків, таблиць або ще).
Ще кілька прикладів використання nth-childдля виділення різних рядків списків, таблиць тощо:
- Для глумлення над непарними елементами можна використовувати замість наведеного вище виразу nth-child (odd), а для парних - nth-child (even).
- Якщо захочете внести зміни лише до четвертого рядка? то допишіть до CSS правил через двокрапку псевдоклас nth-child (4).
- Бажаєте змінити вигляд рядків починаючи з дев'ятого? Немає проблем – nth-child (n+9).
- Якщо хочете навпаки, виділити лише перші дев'ять елементів, то скористайтесь конструкцією nth-child (-n+9).
- Бажаєте виділити елементи починаючи з дев'ятого по вісімнадцятий — додайте складовий псевдоклас: nth-child (n+9): nth-child (-n+18). Чиста логіка.
- Хочете зробити те саме, що й у попередньому пункті, але при цьому виділити в цьому діапазоні лише парні рядки? Так немає проблем - nth-child (n+9): nth-child (-n+18): nth-child (even).
Ну ось де так. Штука може виявитися дуже корисною. У всякому разі, мені знадобилася.
Удачі вам! До швидких зустрічей на сторінках блогу сайт
Вам може бути цікаво
Селектори псевдокласів та псевдоелементів у CSS (hover, first-child, first-line та інші), відносини між тегами Html коду 
Display (block, none, inline) у CSS - задаємо тип відображення Html елементів на веб-сторінці 
CSS властивості text-decoration, vertical-align, text-align, text-indent для оформлення тексту в HTML 
List style (type, image, position) - Css правила для налаштування зовнішнього вигляду списків у Html коді 
Як знайти і видалити рядки стилів (зайві селектори), що не використовуються, в CSS файлі вашого сайту 
Position (absolute, relative і fixed) - способи позиціонування Html елементів CSS (правила left, right, top і bottom) Різне оформлення для внутрішніх та зовнішніх посилань через CSS 
Пріоритети в Css та їх підвищення за рахунок Important, комбінація та угруповання селекторів, стилі користувача та авторські 
Правила Font (Weight, Family, Size, Style) та Line Height для оформлення шрифтів у CSS 
Float і clear у CSS - інструменти блокової верстки 
Для чого потрібен CSS, як підключити каскадні таблиці стилів до Html документа та основи синтаксису цієї мови 
Селектори тега, класу (class), Id та універсальні, а також селектори атрибутів у сучасному CSS
Чи не здається вам, що чорно-біла таблиця виглядає нудно? От і ми так думаємо! Тому в цьому уроці ми поговоримо про те, як змінити колір таблиці HTML. Існує три можливості додавання кольору, для кожної з яких є своя властивість.
- Вказівка кольору осередків фону. Здійснюється за допомогою властивості background-color.
- Вказує колір тексту в комірках. Здійснюється за допомогою властивості color.
- Вказує колір рамок осередків. Здійснюється за допомогою властивості border-color.
Раніше, щоб змінити колір, застосовувалася більш стисла форма опису рамки. Виглядала вона так:
Border: 1px solid lightgray
І за колір тут відповідала остання частина – lightrgay.
Існують різні способи, що дозволяють задати значення кольорів у CSS. Ми покажемо вам, як відбувається опис кольору з використанням атрибутів.
Як змінити колір комірки
Давайте подивимося, як виглядає код у CSS, в якому встановлено колір для комірки.
Td (background-color: колір-фону; )
Зрозуміло, змінювати кольори можна і в table, і у td, і у th. Давайте спробуємо надати нашій таблиці множення більш солідний вигляд.
Додамо стилі для осередків-заголовків із тегом th, а також для осередків по діагоналі, в яких розташовані квадрати чисел:
| * | 2 | 3 |
|---|---|---|
| 2 | 4 | 6 |
| 3 | 6 | 9 |
Результат у браузері:
Як змінити колір рамки у таблиці
Як ви вже помітили у прикладі вище, у таблиці ми змінили колір рамки. Для цього ми використовували якість border. У ньому задаються параметри в порядку, наведеному нижче:
- тип лінії, у нашому випадку solid (суцільна)
- товщина лінії, у нашому випадку 1px
- колір лінії, у нашому випадку синій
Нагадаємо ще раз, як виглядає завдання кольору рамки для комірки:
Td ( border: 1px solid blue; )
Як змінити колір рядка у таблиці
Отже, ми з вами навчилися змінювати кольори осередків, а також осередків-заголовків, використовуючи можливості CSS. Якщо ми вказуємо стилі для таких тегів, як thабо td, то повинні розуміти, що застосовні стилі будуть і до інших тегів.
Однак, бувають ситуації, коли треба змінити колір конкретного осередку або кілька осередків, або весь рядок цілком. Що робити у цьому випадку? Тут слід використовувати класи, а також застосовувати їх стилі. На практиці це виглядає так:
RowGreen ( background-color:green; )
А щоб змінити колір за допомогою цього класу, певні рядки потрібно зробити наступне:
| 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
І результат у браузері: 
Як змінити колір тексту в таблиці
Для того, щоб змінити колір тексту в таблиці, використовується властивість color. Застосовувати його можна до різних елементів: до table, tr, th, td. Залежно від цього, колір у вибраному елементі буде змінено. Наприклад, для всієї таблиці поставимо зелений колір шрифту:
Table ( color: green; ... )
Аналогічно можна змінювати колір окремих осередків. А на цьому цей урок закінчується, не забудьте зробити домашнє завдання. Бувайте усі!
Став популярним, web-дизайнери в основному використовували метод табличної верстки і отримували дуже добрий результат.
Теги, що використовуються для побудови таблиці в html
table- обов'язковий тег, що відкриває та закриває таблицю
caption- необов'язковий тег, що означає заголовок таблиці
th- необов'язковий тег, у тег, що відкриває і закриває, якого вписується назва стовпця. Як правило, виділяється жирним
tr- обов'язковий тег, з якого відкривається та закривається рядок
td- обов'язковий тег, що позначає відкриття та закриття комірки у рядку
Приклад коду простої таблиці
| Стобіць 1 | Стобіць 2 |
|---|---|
| Текст у першому осередку | Текст у другому осередку |
У браузері відобразиться
Призначення таблиць у html
Урок за таблицями дуже важливий! Завдяки таблицям Ви можете розмістити не тільки текст, а й зображення, посилання та багато іншого. У таблиці можна ставити фон(або його колір), відступ, ширину, кордоні інші параметрищо надасть їй красивий зовнішній вигляд. Таблиця – Ваш перший крок до розумію web-дизайну! Раніше багато сайтів були повністю зверстані як таблиці, тобто все, що бачив користувач (бічне меню, верхнє меню, зміст) - було змістом осередків великої таблиці.На цій ноті перейдемо безпосередньо до атрибутів, які роблять таблицю красивою.
Властивості та параметри html таблиць: відступ, ширина, колір фону, межа (рамка)
У тега tableє такі атрибути:width- Ширина таблиці. може бути в пікселях або % від ширини екрана.
bgcolor- колір фону осередків таблиці
background- заливає фон таблиці малюнком
border- рамка та межі в таблиці. Товщина вказується у пікселях
cellpadding- відступ у пікселях між вмістом комірки та її внутрішнім кордоном
Як і раніше, значення атрибуту прописуємо у лапках.
| Стобіць 1 | Стобіць 2 |
| |
| Стобіць 1 | Стобіць 2 |
Текст у першому осередку першого стовпця | Текст у другому осередку другого стовпця |
| Стобіць 1 | Стобіць 2 |
Текст у першому осередку першого стовпця | Текст у другому осередку другого стовпця |
| Стобіць 1 | Стобіць 2 |
| Стобіць 1 | Стобіць 2 |
Текст у першому осередку першого стовпця | Текст у другому осередку другого стовпця |
