Колір та фон у таблиці
Створіть таблицю, показану на рис. 1, задавши кольори через стилі. Ширина таблиці складає 100%.
Колір та фон у таблиці - Druzhba body < font-size: 1.5em; /* Розмір тексту */ >table < width: 100%; /* Ширина таблиці */ >td < padding: 5px; >td.col1 < background: red; color: white; >td.col2 < background: orange; color: grey; >td.col3
Статті на тему
Не викладайте свій код безпосередньо у коментарях, він відображається некоректно. Скористайтеся сервісом cssdeck.com або jsfiddle.net, збережіть код та у коментарях дайте на нього посилання. Так і результат одразу побачать.
Популярні завдання
- TEX
- Відступи між блоками
- Андроїд у тіні
- Посилання як кнопка
- Вкладені списки
- Форма реєстрації
- Об'єднання осередків таблиці
- Обов'язкові поля форми
- Колір та фон у таблиці
- Асуанська гребля
- Батарейка
- Заголовки
Самі собою таблиці виглядають досить «бідно», до того ж браузери по-своєму відображають деякі характеристики таблиць, зокрема, рамки. Разом з тим, ці недоліки легко виправити скориставшись потужністю стилів. При цьому дуже розширюються засоби оформлення таблиць, що дозволяє вдало вписати таблиці в дизайн сайту і наочніше представити табличні дані.
Колір фону осередків
Колір фону одночасно всіх осередків таблиці встановлюється через властивість background, яке застосовується до селектора TABLE. При цьому слід пам'ятати про правила використання стилів, зокрема, успадкування властивостей елементів. Хоча властивість background не успадковується, для осередків значенням тла за умовчанням виступає transparent , тобто. прозорість, тому ефект заливання фону виходить і в осередків. Якщо одночасно з TABLE встановити колір у селектора TD або TH , то цей колір буде встановлений як фон комірки (приклад 2.3).
приклад 2.3. Колір тла
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Колір та фон у таблиці - Druzhba Заголовок 1 Заголовок 2 Осередок 3 Осередок 4
Результат цього прикладу показано на рис. 2.4.
Мал. 2.4. Зміна кольору фону
Поля всередині осередків
Приклад 2.4. Поля у таблицях
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Колір та фон у таблиці - Druzhba Заголовок 1 Заголовок 2 Осередок 3 Осередок 4
У цьому прикладі за допомогою групування селекторів поля встановлені одночасно для селектора TD та TH. Результат прикладу показано на рис. 2.5.
Мал. 2.5. Поля в осередках
Відстань між осередками
Властивість border-spacing діє тільки в тому випадку, якщо для селектора TABLE не встановлено властивість border-collapse зі значенням collapse (приклад 2.5).
приклад 2.5. Відстань між кордонами осередків
XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Колір та фон у таблиці - Druzhba Леонардо 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 обнулюється.
Межі та рамки
Використання атрибуту cellspacing
Зауважимо, що це не зовсім зручний спосіб створення кордонів, оскільки він має обмежену сферу застосування. Так можна отримати лише одноколірну сітку, а не вертикальні чи горизонтальні лінії у потрібних місцях.
Використання властивості border
Стильова властивість border одночасно встановлює колір межі, її стиль та товщину навколо елемента.Коли потрібно створити окремі лінії на різних сторонах, краще використовувати похідні – border-left, border-right, border-top і border-bottom, ці властивості визначають межу зліва, справа, зверху і знизу.
Застосовуючи властивість border до селектора TABLE ми додаємо рамку навколо таблиці в цілому, а до селектора TD або TH – рамку навколо осередків (приклад 2.6).
приклад 2.6. Додавання подвійної рамки
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Колір та фон у таблиці - Druzhba Заголовок 1 Заголовок 2 Осередок 3 Осередок 4
У цьому прикладі використовується подвійна рамка чорного кольору навколо самої таблиці і суцільна рамка білого кольору навколо комірки. Результат прикладу показано на рис. 2.7.
Мал. 2.7. Кордон навколо таблиці та осередків
приклад 2.7. Створення одинарної рамки
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Колір та фон у таблиці - Druzhba Заголовок 1 Заголовок 2 Осередок 3 Осередок 4
У цьому прикладі створюється суцільна лінія зеленого кольору між осередками та чорна навколо таблиці. Усі межі всередині таблиці мають однакову товщину. Результат прикладу показано на рис. 2.8.
Мал. 2.8. Кордон навколо таблиці
Вирівнювання вмісту осередків
За умовчанням текст у комірці таблиці вирівнюється ліворуч. Винятком із цього правила служить тег , він визначає заголовок, у якому вирівнювання відбувається центром. Щоб змінити спосіб вирівнювання, застосовується стильова властивість text-align (приклад 2.8).
приклад 2.8. Вирівнювання вмісту осередків по горизонталі
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Колір та фон у таблиці - Druzhba Заголовок 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
Колір та фон у таблиці - Druzhba Заголовок 1 Заголовок 2 Осередок 1 Осередок 2
У цьому прикладі встановлюється висота заголовка як 40 пікселів і вирівнювання тексту відбувається по нижньому краю. Результат прикладу показано на рис. 2.10.
Мал. 2.10. Вирівнювання тексту в осередках
Порожні осередки
Браузери інакше відображають комірку, всередині якої нічого немає. «Нічого» в даному випадку означає, що всередину осередку не додали ні малюнок, ні текст, причому прогалину не приймається. Звичайно, вид осередків відрізняється тільки в тому випадку, якщо навколо них встановлена межа. При використанні невидимої рамки, вид осередків, незалежно від того, є в них щось чи ні, збігається.
Старі браузери не відображали колір фону порожніх осередків вигляду , тому в тому випадку, коли потрібно залишити комірку без вмісту, але відобразити колір фону, всередину комірки додавали пробіл ( ). Пробіл не завжди підходить, особливо коли потрібно встановити висоту осередку 1-2 пікселі, через що широкого поширення набув однопіксельний прозорий малюнок. Такий малюнок можна масштабувати на свій розсуд, але він на веб-сторінці ніяк не відображається.
На щастя, епоха однопіксельних малюнків і всіляких розпірок на їх основі пройшла. Браузери досить коректно працюють з таблицями та без присутності вмісту осередків.
Для керування виглядом порожніх осередків використовується властивість empty-cells, при значенні hide межа і фон у порожніх осередках не відображається. Якщо всі комірки в рядку порожні, рядок ховається цілком. Осередок вважається порожнім у таких випадках:
- немає взагалі жодних символів;
- у комірці міститься лише переклад рядка, символ табуляції або пробіл;
- значення visibility встановлено як hidden.
Додавання нерозривного пропуску сприймається як видиме зміст, тобто. осередок вже буде не порожнім (приклад 2.10).
Приклад 2.10. Порожні осередки
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Колір та фон у таблиці - Druzhba Леонардо 5 8 Рафаель 11 Мікеланджело 24 Донателло 13
Вигляд таблиці в браузері Safari показано на рис. 2.11а. Та ж таблиця у браузері IE7 продемонстрована на рис. 2.11б.
а. У браузері Safari, Firefox, Opera, IE8, IE9
Мал. 2.11. Вигляд таблиці з порожніми осередками
Саме властивість color служить для зміни кольору тексту і не обов'язково в таблиці, а будь-де на веб-сторінці. Колір можна встановити за назвою, шістнадцятковим числом, RGB, RGBA, HSL і HSLA. Далі приклад:
Властивість background-color або просто background служить зміни фону блоку, таблиці, осередки та іншого. Колір можна встановити за назвою, шістнадцятковим числом, RGB, RGBA, HSL і HSLA. Далі приклад:
Властивість ми вже трохи навчилися користуватися універсальною властивістю border (пізніше ми його ще згадаємо), але тут ми будемо використовувати вузькоспеціалізовану властивість border-color, яка змінює тільки колір рамок, на відміну від border (відразу три значення можна встановити: товщина, стиль і колір ). Далі приклад:
Таблиці в HTML – Створення таблиць – Висота та ширина, фон таблиці
Таблиці досить широко застосовуються при створенні веб-сторінок: вони служать не тільки способом представлення та впорядкування даних, але й є інструментом форматування сторінок – їх використовують для створення каркасу сторінки – застосовують табличну верстку.
Визначення у Вікіпедії: Таблична верстка – умовна назва методу верстки HTML-документів, при якому як структурну основу для розташування текстових та графічних елементів документа використовуються таблиці (тобто HTML-тег).
Якщо коротко, то при табличній верстці створюється таблиця, що займає в основному всю ширину вікна браузера, у кожному осередку якої розташовується той чи інший елемент (або елементи) сторінки.
Створення таблиці: рядки та комірки. Заголовок таблиці
Таблиця створюється за допомогою тега
інформує браузер про завершення таблиці.
Будь-яка таблиця складається зі стовпців та рядків.
Вирівнювання таблиці. Вирівнювання вмісту осередків
За допомогою атрибуту align Ви можете розмістити таблицю в лівій або правій ( align = "left" і align = "right" ) частині вікна браузера (батьківського елемента) або за його центром (align = "center").
Вирівнювання вмісту рядків (тег) та осередків (тег) по горизонталі також здійснюється за допомогою атрибуту align, а по вертикалі за допомогою атрибуту valign:
– атрибут align приймає значення left, right, center і justify, які задають вирівнювання вмісту рядків і осередків за їх лівим, правим краєм, по центру і по ширині відповідно;
— атрибут valign , що приймає значення top , bottom і middle , задає вирівнювання вмісту рядків і осередків по верхньому, нижньому краю і в середині відповідно.
Атрибут align служить також для вирівнювання заголовка (тег) по горизонталі та визначення його розташування над таблицею або під нею.
За умовчанням вміст осередків розташований по лівому краю по горизонталі, і вирівняний посередині у вертикальній площині.
Висота та ширина таблиці та осередків
За замовчуванням розміри (висота та ширина) і таблиці, і осередків змінюються залежно від розмірів їхнього вмісту.
Але висоту і ширину як таблиці, так і окремих її осередків можна задати явно за допомогою атрибутів hieght і width відповідно.
Значення висоти та ширини задаються у пікселях або у відсотках щодо вільного простору. Для завдання значень:
– Вказується ціле позитивне число. В цьому випадку розмір буде заданий у пікселях;
– Вказується ціле позитивне число із символом %.
Якщо вміст таблиці або комірки перевищує задані розміри, вони будуть проігноровані браузером, а нові розміри автоматично підібрані відповідно до розмірів вмісту.
Як видно з прикладу: вказуючи ширину одного з осередків стовпця, Ви цим задаєте ширину всього стовпця; і, вказуючи висоту одного з осередків рядка, Ви задаєте висоту всього рядка.
Межі таблиці та осередків
Таблиця та кожен її осередок мають свої власні межі, які за умовчанням не видно.
Товщина кордону (або рамки) задається у пікселях. Як значення атрибуту border вказується ціле позитивне число. Якщо атрибут border вказаний без значення, товщина рамки становитиме 1 піксель.
Товщина кордону визначається лише для таблиці. Товщина рамки навколо осередків завжди складає 1 піксель (або відсутня).
За промовчанням межа відображається з ефектом тривимірності та має чорний колір.
Атрибут bordercolor задає колір кордону та усуває ефект тривимірності. Атрибут може використовуватися для завдання кольору межі таблиці (тег), рядка (тег) або комірки (тег).
Атрибут bordercolor підтримується не всіма браузерами і тому не рекомендується використовувати його. Для завдання кольору кордону краще скористатися стилями (це вже в CSS).
Часткове відображення кордонів
Кордон таблиці та рамка навколо осередків можуть бути відображені частково.
Відступи всередині та зовні осередків
При форматуванні таблиць в HTML, для наочного подання деякої інформації та зручного її сприйняття, може виявитися корисним використання відступів усередині та зовні осередків.
Як значення атрибутів вказуються цілі позитивні числа, які задають відстань у пікселях.
Об'єднання осередків
Атрибут colspan вказує кількість осередків, які будуть об'єднані по горизонталі, а атрибут rowspan встановлює кількість осередків, що об'єднуються по вертикалі.
Обидва атрибути мають сенс, якщо таблиця складається з кількох рядків.
Фон таблиці. Фон клітинок таблиці
HTML має можливість задати загальний фон як для всієї таблиці, так і фон для окремо виділеного осередку.
За допомогою цих атрибутів задають фоновий малюнок і колір фону для будь-якої комірки таблиці (тег ).
Використання атрибута cols дозволяє браузеру швидше відобразити вміст таблиці.
Редагування таблиці
У цьому розділі розглянемо теги, які застосовують при редагуванні відразу кількох елементів таблиці. Ці теги можна розділити на дві групи.
До першої групи належать теги та . Вони практично ідентичні та служать для завдання деяких властивостей та зміни характеристик однієї чи кількох колонок таблиці.
За допомогою атрибуту span тега вказують кількість колонок, до яких будуть застосовані атрибути align, valign або width (вирівнювання вмісту осередків колонок по горизонталі, вертикалі або завдання ширини колонок).
Якщо атрибут span у тезі відсутня, то буде змінено характеристики однієї — першої колонки таблиці. При другому використанні тега задаються властивості для наступних (наступного – якщо атрибут span відсутній) колонок таблиці і т.д.
До другої групи тегів відносяться також практично ідентичні між собою теги, і.
Будь-який з них можна застосувати для зміни деяких властивостей одного або декількох рядків таблиці: це знову ж таки вирівнювання вмісту осередків у рядках по горизонталі та по вертикалі – за допомогою атрибутів align і valign відповідно; та завдання фонового кольору осередків за допомогою атрибута bgcolor.
З використанням цих тегів слід знати кілька нюансів, які й визначають відмінності з-поміж них.
Урок 8. Таблиці у html
Таблиця у html — один із основних та перших методів верстки web-сторінок. До того, як CSS став популярним, web-дизайнери в основному використовували метод табличної верстки та отримували дуже гарний результат.
Теги, що використовуються для побудови таблиці в html
table — обов'язковий тег, що відкриває та закриває таблицю
caption – Необов'язковий тег, що позначає заголовок таблиці
th — необов'язковий тег, у тег, що відкриває і закриває, якого вписується назва стовпця. Як правило, виділяється жирним
tr — обов'язковий тег, з якого відкривається та закривається рядок
td — обов'язковий тег, що позначає відкриття та закриття комірки у рядку
Приклад коду простої таблиці
У браузері відобразиться
| Уважно перегляньте таблицю та прочитайте коментар до кожного тегу.Дуже важливо зрозуміти принцип побудови таблиці. По-перше, у ній всі теги парні (не забувайте закривати їх), по-другеслід уважно включати всередину одних тегів інші, щоб таблиця відобразилася коректно, по-третє, намагайтеся робити відступи перед кожним рядком, осередком, щоб Код був читаним і у разі помилки можна було легко знайти. |
Призначення таблиць у html
Урок за таблицями дуже важливий! Завдяки таблицям Ви можете розмістити не тільки текст, а й зображення, посилання та багато іншого. У таблиці можна ставити фон (або його колір), відступ, ширину, кордон і інші параметрищо надасть їй красивий зовнішній вигляд. Таблиця – Ваш перший крок до розумію web-дизайну! Раніше багато сайтів були повністю зверстані як таблиці, тобто все, що бачив користувач (бічне меню, верхнє меню, зміст) було змістом осередків великої таблиці.
На цій ноті перейдемо безпосередньо до атрибутів, які роблять красиву таблицю.
Властивості та параметри html таблиць: відступ, ширина, колір фону, межа (рамка)
У тега table є такі атрибути:
width – Ширина таблиці. може бути в пікселях або % від ширини екрана.
bgcolor – колір фону осередків таблиці
background – Заливає фон таблиці малюнком
border – рамка та межі в таблиці. Товщина вказується у пікселях
cellpadding — відступ у пікселях між вмістом комірки та її внутрішнім кордоном
Як і раніше, значення атрибуту прописуємо у лапках.
Розглянемо застосування даних атрибутів з прикладу. Для цього створимо таблицю (але вже без вкрай рідко застосовуваних тегів caption та th) і задаємо параметр атрибуту border (кордон), width (ширина таблиці, рядки або комірки) і bgcolor (колір осередку)
У результаті в браузері буде виведено таблицю наступного виду
frame – Атрибут, що позначає рамку навколо таблиці. Є такі значення:
void – рамки немає,
above – тільки верхня рамка,
below – тільки нижня рамка,
hsides – тільки верхня та нижня рамки,
vsides – тільки ліва та права рамки,
lhs – тільки ліва рамка,
rhs – тільки права рамка,
box – всі чотири частини рамки.
rules – Атрибут, що позначає межі всередині таблиці, між осередками. Є такі значення:
none – між осередками немає кордонів,
groups — межі лише між групами рядків і групами стовпців (розглянуті трохи пізніше),
rows — межі лише між рядками,
cols – межі тільки між стовпцями,
all – відображати всі межі.
Розглянемо приклад коду
| Оскільки атрибутом border тепер рідко користуються, то я рекомендую Вам не звикати до нього і наступні приклади будуть без вказівки меж. |
Тепер спробуємо створити чудову таблицю. Для цього давайте почнемо використовувати вирівнювання у таблиці. Для цього є такі вже знайомі параметри:
align – Вирівнювання таблиці. Її можна розташувати зліва (left), праворуч (right), по центру (center)
cellspacing – Відстань між осередками таблиці. Вказується у пікселях (за замовчуванням 0 пікселів)
cellpadding — відступ у пікселях між вмістом комірки та її внутрішнім кордоном (за замовчуванням 0 пікселів)
Розглянемо приклад
У браузері з'явиться вирівняна по центру таблиця такого виду
| Увага! Якщо не вказувати ширину таблиці або комірки, не задавати відступи та вирівнювання, то ширина таблиці будуватиметься за вмістом – межі примикатимуть до слів, а ширина вибиратиметься автоматично. |
Рядки tr та комірки td у таблицях HTML
Знову нагадаю, що таблиці формуються рядково (tr). У рядках (tr) вже є комірки (td). Якщо встановити параметр для рядка (tr), то він буде дійсним для всіх осередків (td) у цьому рядку, якщо для конкретного осередку, то тільки для неї. У прикладах вище я вказував колір для рядка, цей параметр поширювався відповідно до всіх осередків.
Для тегів tr і td є наступні
align – Вирівнювання тексту всередині комірки. По лівому краю (left), по правому краю (right), по центру (center)
valign – Вирівнювання тексту всередині комірки по вертикалі. Вгору (top), вниз (bottom), по центру (middle)
bgcolor – Задає колір рядка
width – ширина стовпця (всі осередки нижче приймуть даний параметр) вказується в пікселях або у відсотках, де 100% ширина всієї таблиці
height – Висота комірки (всі комірки в рядку приймуть даний параметр)
Розглянемо код, де вміст осередків (td), вирівняний по різних краях: у першій по лівому, у другій по правому:
За допомогою таблиць можна згортати дуже хорошу сторінку. Не забувайте, що в комірки можна вставляти не тільки текст, а й зображення, посилання та інше!)