Самі собою таблиці виглядають досить «бідно», до того ж браузери по-своєму відображають деякі характеристики таблиць, зокрема, рамки. Водночас ці недоліки легко виправити скориставшись міццю стилів. При цьому дуже розширюються засоби оформлення таблиць, що дозволяє успішно вписати таблиці в дизайн сайту і наочно представити табличні дані.
Колір фону осередків
Колір фону одночасно всіх осередків таблиці встановлюється через властивість background, яке застосовується до селектора TABLE. При цьому слід пам'ятати про правила використання стилів, зокрема, успадкування властивостей елементів. Хоча якість background не успадковується, для осередків значенням тла за замовчуванням виступає transparent , тобто. прозорість, тому ефект заливки фону виходить і в осередків. Якщо одночасно з TABLE встановити колір у селектора TD або TH , то цей колір буде встановлений як тло комірки (приклад 2.3).
Приклад 2.3. Колір фону
| Заголовок 1 | Заголовок 2 |
|---|---|
| Осередок 3 | Осередок 4 |
У цьому прикладі отримаємо синій колір фону у осередків (тег
Результат цього прикладу показаний на рис. 2.4.
Рис. 2.4. Зміна кольору фону
Поля всередині осередків
Полем називається відстань між краєм вмісту осередку та її кордоном. Зазвичай для цієї мети застосовується атрибут cellpadding тега
| Заголовок 1 | Заголовок 2 |
|---|---|
| Осередок 3 | Осередок 4 |
У цьому прикладі за допомогою групування селекторів поля встановлені одночасно для селектора TD та TH. Результат прикладу показано на рис. 2.5.
Рис. 2.5. Поля в осередках
Якщо застосовується стильова властивість padding для осередків таблиці, то дія атрибуту cellpadding тега
| Леонардо | 5 | 8 |
| Рафаель | 4 | 11 |
| Мікеланджело | 24 | 9 |
| Донателло | 2 | 13 |
Результат цього прикладу показаний на рис. 2.6.
Рис. 2.6. Вигляд таблиці під час використання border-spacing
Браузер Internet Explorer до сьомої версії включно не підтримує властивість border-spacing, тому в цьому браузері для таблиць буде застосовуватися значення cellspacing, задане за замовчуванням (зазвичай воно дорівнює 2px).
При додаванні до селектора TABLE властивості border-collapse зі значенням collapse атрибут cellspacing ігнорується, а значення border-spacing обнуляється.
Межі та рамки
За замовчуванням межі в таблиці спочатку немає, а її додавання відбувається за допомогою атрибуту.
| Заголовок 1 | Заголовок 2 |
|---|---|
| Осередок 3 | Осередок 4 |
У цьому прикладі використовується подвійна рамка чорного кольору навколо самої таблиці та суцільна рамка білого кольору навколо кожного осередку. Результат прикладу показано на рис. 2.7.
Рис. 2.7. Кордон навколо таблиці та осередків
Зверніть увагу, що в місці стикування осередків утворюються подвійні лінії. Вони виходять знову ж таки за рахунок дії атрибуту cellspacing тега
| Заголовок 1 | Заголовок 2 |
|---|---|
| Осередок 3 | Осередок 4 |
У цьому прикладі створюється суцільна лінія зеленого кольору між осередками та чорна навколо таблиці. Усі межі всередині таблиці мають однакову товщину. Результат прикладу показано на рис. 2.8.
Рис. 2.8. Кордон навколо таблиці
Вирівнювання вмісту осередків
За замовчуванням текст у осередку таблиці вирівнюється ліворуч. Винятком із цього правила служить тег
Приклад 2.8. Вирівнювання вмісту осередків по горизонталі
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
| Заголовок 1 | Осередок 1 | Осередок 2 |
|---|---|---|
| Заголовок 2 | Осередок 3 | Осередок 4 |
В даному прикладі вміст тега
Рис. 2.9. Вирівнювання тексту в осередках
Вирівнювання по вертикалі в осередку завжди відбувається по її центру, якщо це не зазначено особливо. Не завжди зручно, особливо для таблиць, які мають вміст осередків відрізняється за висотою. У такому разі вирівнювання встановлюють по верхньому краю осередку за допомогою властивості vertical-align, як показано в прикладі 2.9.
Приклад 2.9. Вирівнювання вмісту осередків по вертикалі
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
| Заголовок 1 | Заголовок 2 |
|---|---|
| Осередок 1 | Осередок 2 |
У цьому прикладі встановлюється висота заголовка
Рис. 2.10. Вирівнювання тексту в осередках
Порожні осередки
Браузери інакше відображають осередок, усередині якого нічого немає. «Нічого» в даному випадку означає, що всередину осередку не додали ні малюнок, ні текст, причому прогалину не приймається. Звичайно, вид осередків відрізняється тільки в тому випадку, якщо навколо них встановлена межа. При використанні невидимої рамки вид осередків, незалежно від того, є в них що-небудь, збігається.
Старі браузери не відображали колір фону порожніх осередків вигляду
На щастя, епоха однопіксельних малюнків і всіляких розпірок на їх основі пройшла. Браузери досить коректно працюють з таблицями та без присутності вмісту осередків.
Для керування видом порожніх осередків використовується властивість empty-cells, при значенні hide межа і фон у порожніх осередках не відображається. Якщо всі комірки в рядку порожні, рядок ховається цілком. Осередок вважається порожнім у таких випадках:
- немає взагалі жодних символів;
- у комірці міститься лише переклад рядка, символ табуляції або пробіл;
- значення visibility встановлено як hidden.
Додавання нерозривного пропуску сприймається як видиме зміст, тобто. осередок вже буде не порожнім (приклад 2.10).
Приклад 2.10. Порожні осередки
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
| Леонардо | 5 | 8 |
| Рафаель | 11 | |
| Мікеланджело | 24 | |
| Донателло | 13 |
Вигляд таблиці в браузері Safari показано на рис. 2.11а. Та ж таблиця у браузері IE7 продемонстрована на рис. 2.11б.
а. У браузері Safari, Firefox, Opera, IE8, IE9
б. У браузері IE7
Рис. 2.11. Вигляд таблиці з порожніми осередками
CSS дозволяє встановити не тільки стиль межі таблиці, а й стиль меж окремих осередків. Так як у кожного осередку свої межі, то між сусідніми осередками кордон виходить здвоєний. Але є можливість об'єднати межі сусідніх осередків в одну. І тому властивість border-collapse . Воно набуває значення:
border-collapse: separate - у кожного осередку своя межа (за замовчуванням)
border-collapse: collapse – спільний кордон
border-collapse: inherit – значення приймається від батьківського елемента
Наприклад створимо таблицю і задаємо рамку осередків всіх таблиць, що будуть на сторінці. Спочатку не будемо нічого міняти, щоб подивитися, як таблиця виглядатиме:
Стиль:
1 |
Результат цього прикладу показаний ні рис. 1.
Рис. 1. Використання параметра border-spacing ПриміткаЯкщо до тегу Для зміни відстані між осередками(їх межами) та від осередків до рамкитаблиці у тезі Щоб встановити внутрішні відступи від кордонів осередків до їхнього вмістунеобхідно у тезі Зверніть увагу, що браузери за замовчуванням встановлюють невеликі (в два пікселі) значення cellspacing і cellpadding , тому щоб прибрати відстані зовсім - встановіть атрибути значення нуль (0). Приклад меж, рамок та відступів HTML-таблиць
Таблиця лише з встановленими рамкою та межами осередків:
Результат у браузері Таблиця зі зміненими відступами та відстанями: Природно не обов'язково малювати у таблиці рамку та межі осередків, щоб змінювати внутрішні відступи та відстані між осередками. Відповідно до синтаксису HTML, браузери додають значення cellspacing і cellpadding до розмірів таблиці та її осередків. Наприклад, якщо ви встановите ширину комірки в 100 пікселів і cellpadding = "10" - браузери додадуть до ширини 20 пікселів (по 10 зліва і справа) і вона дорівнюватиме 120 пікселів. Загалом, у справі розберетеся. Відступ від теми або як усунути відступи по краях сторінкиСпочатку всі браузери встановлюють невеликі відступи по краях HTML-сторінки, які часто не потрібні, тому зараз ви навчитеся їх прибирати. Взагалі, цю інформацію слід було б помістити на початок підручника, але там вона навряд чи знадобилася б. Свого часу біля тега існувало чотири атрибути, які встановлювали розмір цих відступів для кожної сторони сторінки: topmargin (зверху), rightmargin (праворуч), bottommargin (знизу) та leftmargin (ліворуч). Зараз ці атрибути застаріли, тому застосовуватимемо стилі (CSS). Отже, змінити відстані відступів по краях сторінки можна декількома способами, я покажу вам два, а про третій дізнаєтесь, якщо вирішите вивчати CSS.Спосіб перший. B тезі вказати атрибут style з такими значеннями: style="margin:0" >... - прибирає відступи одразу з усіх боків HTML-сторінки. style= "margin:зверху праворуч знизу ліворуч">... - регулює розмір відступів для кожної сторони за годинниковою стрілкою. Як правило, використовуються розміри в пікселях, наприклад: style= "margin:5px 3px 4px 5px" >...Другий і зручніший спосіб. У тезі
Домашнє завдання. У цьому уроці я теж не буду докладно описувати - тільки загальні моменти. Для повноти картини перегляньте результат прикладу.
Отже, ми вивчили найпростіші дії, які можна здійснювати з межами таблиць. І тепер таблиця виглядає значно естетичнішою. Однак, наповнення осередків прямо-таки упирається в межі. Це легко можна виправити, достатньо зробити відступи в осередках у таблиці HTML. І тоді текст усередині рамки, у осередку, буде більш читабельним. Для того, щоб зробити відступи в осередку, слід використовувати атрибут. cellpaddingдля тега У такому разі відступи задаються за допомогою властивості padding. З його допомогою не важко зробити відступ там, де треба, тобто - зверху, справа, знизу або зліва, використовуючи, відповідно, одну з даних властивостей: padding-top, padding-right, padding-bottomі padding-left. Можна задати, на скільки саме пікселів має здійснюватися відступ. Наведемо приклад, у якому нижній відступ становитиме 20
пікселів, а всі інші будуть по 10
. Такий CSS-код виглядатиме ось так: Td ( padding: 10px; padding-bottom: 20px; ) А повний код стилів на цьому етапі: Table ( border: solid 1px blue; border-collapse: collapse; ) td ( border: solid 1px blue; padding: 10px; padding-bottom: 20px; ) Результат у браузері: Як правило, завдання, пов'язані зі створенням таблиць, можна вирішити, використовуючи для цього теги, атрибути та властивості, які дозволяють створювати рамки, відступи в осередках, а також задати колірний фон самих осередків. Відступи в таблицях бувають не лише всередині осередків. Вони можуть також бути присутніми і між самими осередками. Існує дві можливості зробити відступи між осередками: Треба наголосити, що border-spacingпрописується для таблиці загалом, тоді як властивість paddingпрописується безпосередньо для осередків. Давайте глянемо на приклад: Table ( border: solid 1px blue; border-collapse: separate; border-spacing: 5px; ) td ( border: solid 1px blue; padding: 10px; padding-bottom: 20px; ) І на результат, що вийшов: Відразу обмовимо, що не треба намагатися зробити такі відступи за допомогою border-collapse: collapse. Адже при використанні цієї опції осередки «липнуть» один до одного. А щоб вони були окремо один від одного, слід використовувати border-collapse: separate. Важливо розуміти, що це значення є значенням за замовчуванням. І застосовується воно лише для того, щоб наочно показати, як вирішується це завдання. Якщо ми видалимо цей рядок, то результат у вигляді окремо розташованих один від одного осередків буде збережено. |
