Отже, ми вивчили з вами найбільше прості дії, які можна здійснювати за межами таблиць. І тепер таблиця виглядає значно естетичніше. Однак, наповнення осередків прямо-таки упирається в межі. Це легко можна виправити, достатньо лише зробити відступи в осередках у таблиці HTML. І тоді текст усередині рамки, у комірці, буде більш читабельним.
Для того, щоб зробити відступи в комірці, слід використовувати атрибут. cellpaddingдля тега
. Однак, є й інший, кращий варіант: CSS.
У такому разі відступи задаються за допомогою властивості 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; )
Результат у браузері:
Відступи між осередками
Як правило, завдання, пов'язані зі створенням таблиць, можна вирішити, використовуючи для цього теги, атрибути та властивості, які дозволяють створювати рамки, відступи в осередках, а також задати колірний фон самих осередків.
Відступи в таблицях бувають не тільки всередині осередків. Вони можуть також бути присутніми і між самими осередками.
Існує дві можливості зробити відступи між осередками:
- з використанням атрибуту cellspacingдля тега
.
- з використанням CSS-Властивості border-spacing.
Треба наголосити, що 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. Важливо розуміти, що це значення є значенням за умовчанням. І застосовується воно лише для того, щоб наочно показати, як вирішується це завдання. Якщо ми видалимо цей рядок, то результат у вигляді окремо розташованих один від одного осередків буде збережено.
Таблиця - один із основних інструментів для створення web-сторінок.
Без використання CSSтільки за допомогою таблиць можна створювати сторінки зі складним дизайном. Якщо ви пройшли серію уроків Робимо сайт – перші кроки, то ви розумієте про що мова.
Будь-яка таблиця є набором рядків і стовпців, на перетині яких знаходяться комірки. Наприклад:
Розглянемо нашу таблицю з погляду HTML:
- сама таблиця задається за допомогою тегів
,
- у таблиці є назва - теги
,
- таблиця складається з рядків - теги
|
, - кожен рядок складається зі стовпців - теги
|
, - стовпці мають назви, розташовані в першому рядку - теги
|
.
Створимо таблицю, де як вміст вкажемо перетин номерів рядків і стовпців: Результат:
Як бачите, вийшло не дуже красиво, прикрашатимемо.
Параметри html таблиць: відступ, ширина, колір тла, рамка
Для цього у тега
існує низка параметрів:- width- Вказує ширину таблиці (у пікселах або % від ширини екрана),
- bgcolor- задає колір фону осередків таблиці,
- background- заливає фон таблиці малюнком,
- border- задає рамку вказаної ширини (у пікселах) навколо всієї таблиці,
- cellpadding- задає відступ у пікселях між кордоном клітини та її вмістом.
Застосуємо ці параметри: Результат:
Вже краще, але наша таблиця притиснута до лівого краю вікна, як і текст у ній. Виправимо це, додавши ще три параметри:
- align- Задає вирівнювання таблиці: зліва (right), праворуч (left), по центру (center),
- cellspacing- задає відстань між осередками таблиці (у пікселах),
- cellpadding- задає відстань між текстом та внутрішнім кордоном осередку таблиці (у пікселах).
Застосуємо ці параметри: Результат:
Зверніть увагу, межі таблиці подвійні. Якщо вказати cellspacing="0", то межі набудуть звичного вигляду:
Результат:
Взагалі, за межі відповідають два параметри:
- frame- задає вигляд рамки навколо таблиці і може набувати таких значень:
- void- рамки немає,
- above- Тільки верхня рамка,
- below- Тільки нижня рамка,
- hsides- тільки верхня та нижня рамки,
- vsides- тільки ліва та права рамки,
- lhs- Тільки ліва рамка,
- rhs- Тільки права рамка,
- box- Усі чотири частини рамки.
- rules- задає вигляд внутрішніх кордонів таблиці та може набувати таких значень:
- none- між осередками немає меж,
- groups- межі лише між групами рядків та групами стовпців (будуть розглянуті трохи пізніше),
- rows- межі лише між рядками,
- cols- межі тільки між стобцями,
- all- Відображати всі межі.
За допомогою цих параметрів можна задавати межі так, як вам заманеться. Тут наведемо лише один приклад, самі ж поекспериментуйте з усіма. Результат:
Слід зазначити, що межі в різних браузерахвідображаються трохи по-різному.
HTML теги tr і td
Таблиці формуються рядково. Тому задані в рядку (tr) параметри поширюють свою дію на всі осередки (td) рядка. У рядків можна використовувати три параметри:
- align- вирівнює текст у осередках по горизонталі, може приймати значення: зліва (right), праворуч (left), по центру (center),
- valign- вирівнює текст у осередках по вертикалі, може приймати значення: вгору (top), вниз (bottom), по центру (middle),
- bgcolor- Задає колір рядка.
Подивимося на прикладі: - width- Задає ширину стовпця (у пікселах або у відсотковому співвідношенні, де за 100% приймається ширина таблиці),
- height- задає висоту комірки, причому всі комірки у цьому рядку стануть цієї висоти.
Наприклад, додамо до нашого коду, в теги
ці параметри | | 1
|
2
|
3
|
|---|
Результат:
Слід зазначити, якщо не задавати ширину та висоту, то таблиця буде формуватися за вмістом (так було в попередніх прикладах).
На цьому урок закінчено, потренуйтеся створювати та оформлювати таблиці, ці вміння знадобляться вам на наступному уроці, де ми створюватимемо таблиці складних структур.
CSS дозволяє встановити не тільки стиль кордону таблиці, а й стиль кордонів окремих осередків. Так як у кожного осередку свої кордони, то між сусідніми осередками кордон виходить здвоєний. Але є можливість об'єднати межі сусідніх осередків в одну. І тому властивість border-collapse . Воно набуває значення:
border-collapse: separate - у кожного осередку своя межа (за замовчуванням)
border-collapse: collapse – спільний кордон
border-collapse: inherit – значення приймається від батьківського елемента
Наприклад створимо таблицю і задаємо рамку осередкам всіх таблиць, які будуть на сторінці. Спочатку не будемо нічого міняти, щоб подивитися, як таблиця виглядатиме:
Стиль:
1
2
3
4
5
6
|
Сторінка
Домашнє завдання.
У цьому уроці я теж не все докладно описуватиму - тільки загальні моменти. Для повноти картини перегляньте результат прикладу.
- Створіть три таблиці, кожна має складатися з одного рядка і трьох стовпців (колонок).
- У першій таблиці розмістіть Header або "шапку" сторінки (не плутати з "шапкою" HTML-документа), у другій - ліве та праве меню, а також основний вміст (контент), у третій - Footer або "підвал" сторінки.
- Нехай ширина першого та останнього стовпця кожної таблиці буде фіксована.
- Важливо. Використовуйте тег
![]() тільки для створення чотирьох кнопок горизонтального менюу «шапці» сторінки. В інших випадках нехай зображення йдуть тлом, а у других осередках таблиць взагалі використовуються тільки кольори, причому в першій та останній таблиці це #99FF99.
- Нехай текст контенту сторінки буде вирівняний по обидва боки осередку таблиці, а заголовок розташовується по центру.
- Що стосується відстаней між осередками таблиць, а також відступів осередків, то думайте самі, де їх треба зовсім прибрати, а де збільшити.
Став популярним, web-дизайнери в основному використовували метод табличної верстки і отримували дуже добрий результат.
Теги, що використовуються для побудови таблиці в htmltable - обов'язковий тег, що відкриває та закриває таблицю
caption- необов'язковий тег, що означає заголовок таблиці
th- необов'язковий тег, у який відкриває та закриває теги якого вписується назва стовпця. Як правило, виділяється жирним
tr- обов'язковий тег, з якого відкривається та закривається рядок
td- обов'язковий тег, що позначає відкриття та закриття комірки у рядку
Приклад коду простої таблиці
Таблиця html
Назва таблиці
Стобіць 1
|
Стобіць 2
|
Текст у першому осередку
|
Текст у другому осередку
|
У браузері відобразиться
Призначення таблиць у htmlУрок за таблицями дуже важливий! Завдяки таблицям Ви можете розмістити не тільки текст, а й зображення, посилання та багато іншого. У таблиці можна ставити фон(або його колір), відступ, ширину, кордоні інші параметри, що додасть їй гарний зовнішній вигляд. Таблиця – Ваш перший крок до розумію web-дизайну! Раніше багато сайтів були повністю зверстані як таблиці, тобто все, що бачив користувач (бічне меню, верхнє меню, зміст) - було змістом осередків великої таблиці.
На цій ноті перейдемо безпосередньо до атрибутів, які роблять таблицю красивою. Властивості та параметри html таблиць: відступ, ширина, колір фону, межа (рамка)У тега tableє такі атрибути: width- Ширина таблиці. може бути в пікселях або % від ширини екрана.
bgcolor- колір фону осередків таблиці
background- заливає фон таблиці малюнком
border- рамка та межі в таблиці. Товщина вказується у пікселях
cellpadding- відступ у пікселях між вмістом комірки та її внутрішнім кордоном
Як і раніше, значення атрибуту прописуємо у лапках.
Розглянемо застосування даних атрибутів з прикладу. Для цього створимо таблицю (але вже без вкрай рідко застосовуваних тегів caption та th) і задаємо параметр атрибуту border (кордон), width (ширина таблиці, рядки або комірки)і bgcolor (колір осередку)
Таблиця html
Стобіць 1
|
Стобіць 2
|
|
|
В результаті в браузері буде виведено таблицю наступного виду
frame- атрибут, що означає рамку навколо таблиці. Є такі значення: Void – рамки немає,
above - тільки верхня рамка,
below - тільки нижня рамка,
hsides - тільки верхня та нижня рамки,
vsides - тільки ліва та права рамки,
lhs - тільки ліва рамка,
rhs - тільки права рамка,
box - усі чотири частини рамки. rules- атрибут, що позначає межі всередині таблиці, між осередками. Є такі значення: None - між осередками немає меж,
groups - межі лише між групами рядків і групами стовпців (розглянуті трохи пізніше),
rows - межі тільки між рядками,
cols - межі тільки між стовпцями,
all – відображати всі межі. Розглянемо приклад коду
Таблиця html
Стобіць 1
|
Стобіць 2
|
Текст у першому осередку першого стовпця
|
Текст у другому осередку другого стовпця
|
Результат 
Тепер спробуємо створити чудову таблицю. Для цього давайте почнемо використовувати вирівнювання у таблиці. Для цього є такі вже знайомі параметри: align- Вирівнювання таблиці. Її можна розташувати зліва (left), праворуч (right), по центру (center)
cellspacing- Відстань між осередками таблиці. Вказується у пікселях (за замовчуванням 0 пікселів)
cellpadding- відступ у пікселях між вмістом комірки та її внутрішнім кордоном (за замовчуванням 0 пікселів)
Розглянемо приклад
Таблиця html
Стобіць 1
|
Стобіць 2
|
Текст у першому осередку першого стовпця
|
Текст у другому осередку другого стовпця
|
У браузері з'явиться вирівняна по центру таблиця такого виду 
Рядки tr та комірки td у таблицях HTMLЗнову нагадаю, що таблиці формуються рядково (tr). У рядках (tr) вже є комірки (td). Якщо встановити параметр для рядка (tr), то він буде дійсним для всіх осередків(td) у цьому рядку, якщо для конкретного осередку, то тільки для неї. У прикладах вище я вказував колір для рядка, цей параметр поширювався відповідно до всіх осередків.
Стобіць 1
|
Стобіць 2
|
Для тегів tr і td є наступніalign- Вирівнювання тексту всередині комірки. По лівому краю (left), по правому краю (right), по центру (center)
valign- Вирівнювання тексту всередині комірки по вертикалі. Вгору (top), вниз (bottom), по центру (middle)
bgcolor- задає колір рядка
width- ширина стовпця (всі осередки нижче приймуть даний параметр) вказується в пікселях або у відсотках, де 100% ширина всієї таблиці
height- висота комірки (всі комірки у рядку приймуть даний параметр) Розглянемо код, де вміст осередків (td), вирівняний по різних краях: у першій по лівому, у другій по правому:
Таблиця html
Стобіць 1
|
Стобіць 2
|
Текст у першому осередку першого стовпця
|
Текст у другому осередку другого стовпця
|
Результат
 За допомогою таблиць можна згортати дуже хорошу сторінку. Не забувайте, що в комірки можна вставляти не тільки текст, а й зображення, посилання та інше!) Дякую за увагу! Сподіваюся, матеріал був корисний!
|
