CSS властивості таблиці і принципи табличної верстки

1. властивості таблиці
2. border
3. border-collapse (Злиття кордону)
4. width і height (Висота і ширина таблиці)
5. text-align (Вирівнювання по горизонталі)
6. vertical-align (Вирівнювання по вертикалі)
7. padding (Внутрішні відступи в таблиці)
8. background-color (задній фон) color (колір тексту)
9. Таблична верстка CSS
10. Таблична верстка з двох колонок
11. Таблична верстка з трьох колонок
12. Використання вкладеної таблиці в гумовому макеті

Мета уроку: Знайомство з властивостями таблиці і з принципами табличної верстки CSS

властивості таблиці

Розглянемо основні CSS властивості таблиці

border

Властивість розглядається в одному з попередніх уроків і включає одночасно кілька властивостей:

• BORDER-STYLE (СТИЛЬ КОРДОНУ)
• BORDER-WIDTH (ШИРИНА КОРДОНУ)
• BORDER-COLOR (КОЛІР КОРДОНУ)

Існує також збірне правило:

border: border-width border-style border-color; border: 1px solid # 000;

border: border-width border-style border-color; border: 1px solid # 000;

border-collapse
(Злиття кордону)

значення:

• collapse (злита межа)
• separate (навколо кожного осередку - своя власна рамка)

приклад:

table.collapse {border-collapse: collapse; } Table.separate {border-collapse: separate; }

table.collapse {border-collapse: collapse; } Table.separate {border-collapse: separate; }

результат:

width і height
(Висота і ширина таблиці)

значення:

приклад:

table {width: 100%; height: 100px; }

table {width: 100%; height: 100px; }

результат:

Таблиця Таблиця Таблиця Таблиця

text-align
(Вирівнювання по горизонталі)

значення:

• center (по центру)
• left (по лівому краю)
• right (по правому краю)
• justify (по ширині)

vertical-align
(Вирівнювання по вертикалі)

значення:

• baseline (за базовою лінії)
• sub (як підіндекс)
• super (як надиндекса)
• top (по верхньому краю)
• middle (посередині)
• bottom (по нижньому краю)
• % (Від висоти міжрядкового інтервалу)

приклад:

table {text-align: right; height: 100px; vertical-align: middle; }

table {text-align: right; height: 100px; vertical-align: middle; }

результат:

Таблиця Таблиця Таблиця Таблиця

padding
(Внутрішні відступи в таблиці)

Дана властивість повністю відповідає правилам даного властивості для всіх елементів. Тому розглянути його можна в одному з попередніх уроків .

background-color (задній фон)
color (колір тексту)

Дані властивості відповідають правилом їх визначення для всіх інших елементів. Тому теми можна розглянути з попередніх уроків: задній фон і колір .

завдання:

Відкрити / создть файл style.css:

1. Додати властивості для наступних тегів (якщо ще не додавали):

• body основна сторінка
• p абзац
• a гіперпосилання
• h1, h2, h3, ... заголовки
• ul, ol, li списки, пункти списків
• table, tr, td таблиця, рядок, комірка рядка
• hr лінія
• span, div рядковий тег, блоковий тег

• Додати коментар з поясненням до кожного властивості:



• прикріпіть стильовий файл до будь-якої готової веб-сторінці

Таблична верстка CSS

Завдяки великій кількості властивостей таблиць і варіацій їх оформлення, таблиці довгий час були деяким станартом верстки веб-сторінок. Якщо зробити кордону таблиці невидимими, то можна використовувати її окремі осередки в якості окремих блоків сраніци: шапка, меню, підвал і т.п.

Але це не зовсім правильно, адже кожному тегу є своє призначення, і таблиці не повинні були служити для верстки сторінок. Однак відсутність альтернативи спонукають дизайнерів саме на такий метод верстки.

Зараз є інший спосіб - використання шарів, які поступово замінили таблиці в цьому виді роботи з веб-сторінкою. Однак і в наш час деякі дизайнери успішно використовують табличну верстку.

Таблична верстка з двох колонок

Один з найпоширеніших способів верстки - дві колонки, тобто сторінка ділиться на дві частини.

задати основний каркас сторінки з двох колонок: перша - з фіксованим розміром, друга - на решту область браузера. Виконати завдання використовуючи CSS стилі ( метод вкладення )
Виконання: <style type = "text / css"> / * для таблиці * / table #maket {width: 100%; padding: 5px; / * Внутрішні відступи * / border-collapse: collapse; / * Прибираємо подвійну кордон * /} / * для лівого вічка * / td # left {width: 200px; } / * Для всіх осередків * / #maket td {vertical-align: top; border: 1px solid black; / * Тимчасово позначимо кордону * /} </ style>

<Style type = "text / css"> / * для таблиці * / table # maket {width: 100%; padding: 5px; / * Внутрішні відступи * / border-collapse: collapse; / * Прибираємо подвійну кордон * /} / * для лівого вічка * / td # left {width: 200px; } / * Для всіх осередків * / #maket td {vertical-align: top; border: 1px solid black; / * Тимчасово позначимо кордону * /} </ style>

</ Head> <body> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1 </ td> <td id = "right"> 2 </ td> < / tr> </ table> ...

</ Head> <body> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1 </ td> <td id = "right"> 2 </ td> < / tr> </ table> ...

результат:

Приклад: задати різний фон осередків (щоб розділити дві колонки один від одного) і встановити відстань між колонками (роздільник)

виконання:

Додамо нові властивості стилів: / * для лівого вічка * / td # left {width: 200px; background: #ccc; / * Колір фону лівої колонки * / border: 1px solid black; / * Тимчасово позначимо кордону * /} / * для правої комірки * / td # right {background: # fc3; / * Колір фону правої колонки * / border: 1px solid black; / * Тимчасово позначимо кордону * /} / * для роздільник * / #razdel {width: 10px; / * Відстань між колонками * /}

/ * Для лівого вічка * / td # left {width: 200px; background: #ccc; / * Колір фону лівої колонки * / border: 1px solid black; / * Тимчасово позначимо кордону * /} / * для правої комірки * / td # right {background: # fc3; / * Колір фону правої колонки * / border: 1px solid black; / * Тимчасово позначимо кордону * /} / * для роздільник * / #razdel {width: 10px; / * Відстань між колонками * /}

Всі разом:

<Style type = "text / css"> / * для таблиці * / table #maket {width: 100%; padding: 5px; / * Внутрішні відступи * / border-collapse: collapse; / * Прибираємо подвійну кордон * /} / * для лівого вічка * / td # left {width: 200px; background: #ccc; / * Колір фону лівої колонки * / border: 1px solid black; / * Тимчасово позначимо кордону * /} / * для правої комірки * / td # right {background: # fc3; / * Колір фону правої колонки * / border: 1px solid black; / * Тимчасово позначимо кордону * /} / * для всіх осередків * / #maket td {vertical-align: top; } / * Для роздільник * / #razdel {width: 10px; / * Відстань між колонками * /} </ style>

<Style type = "text / css"> / * для таблиці * / table # maket {width: 100%; padding: 5px; / * Внутрішні відступи * / border-collapse: collapse; / * Прибираємо подвійну кордон * /} / * для лівого вічка * / td # left {width: 200px; background: #ccc; / * Колір фону лівої колонки * / border: 1px solid black; / * Тимчасово позначимо кордону * /} / * для правої комірки * / td # right {background: # fc3; / * Колір фону правої колонки * / border: 1px solid black; / * Тимчасово позначимо кордону * /} / * для всіх осередків * / #maket td {vertical-align: top; } / * Для роздільник * / #razdel {width: 10px; / * Відстань між колонками * /} </ style>

</ Head> <body> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1 </ td> <td id = "razdel"> </ td> <td id = "right"> 2 </ td> </ tr> </ table>

</ Head> <body> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1 </ td> <td id = "razdel"> </ td> <td id = "right"> 2 </ td> </ tr> </ table>

Для роздільник була додана нова осередок.
результат:

Приклад: зробити роздільник між колонками таблиці, використовуючи пунктирну лінію кордону суміжних осередків

виконання:

Додамо нові властивості кордонів для осередків: / * для лівого вічка * / td # left {width: 200px; background: #ccc; / * Колір фону лівої колонки * / / * нове * / border-right: 1px dashed # 000; / * Параметри правої пунктирною кордону * /}

/ * Для лівого вічка * / td # left {width: 200px; background: #ccc; / * Колір фону лівої колонки * / / * нове * / border-right: 1px dashed # 000; / * Параметри правої пунктирною кордону * /}

Всі разом:

<Style type = "text / css"> / * для таблиці * / table #maket {width: 100%; padding: 5px; / * Внутрішні відступи * / border-collapse: collapse; / * Прибираємо подвійну кордон * /} / * для лівого вічка * / td # left {width: 200px; background: #ccc; / * Колір фону лівої колонки * / border-right: 1px dashed # 000; / * Параметри правої пунктирною кордону * /} / * для правої комірки * / td # right {background: # fc3; / * Колір фону правої колонки * /} / * для всіх осередків * / #maket td {vertical-align: top; } </ Style>

<Style type = "text / css"> / * для таблиці * / table # maket {width: 100%; padding: 5px; / * Внутрішні відступи * / border-collapse: collapse; / * Прибираємо подвійну кордон * /} / * для лівого вічка * / td # left {width: 200px; background: #ccc; / * Колір фону лівої колонки * / border-right: 1px dashed # 000; / * Параметри правої пунктирною кордону * /} / * для правої комірки * / td # right {background: # fc3; / * Колір фону правої колонки * /} / * для всіх осередків * / #maket td {vertical-align: top; } </ Style>

</ Head> <body> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1 </ td> <td id = "right"> 2 </ td> < / tr> </ table>

</ Head> <body> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1 </ td> <td id = "right"> 2 </ td> < / tr> </ table>

результат:

Таблична верстка з трьох колонок

Існує поняття фіксованого або «гумового» макету верстки.

Фіксований макет CSS

• При використанні фіксованого макета ширина всієї таблиці задається в пікселях, і тоді, незалежно від дозволу монітора і вікна браузера, таблиця буде завжди мати однакову ширину.
• В такому випадку ширину інших колонок варто також зробити фіксованою.
• Можна не вказати ширину одного осередку, тоді вона буде обчислена автоматично, виходячи з розмірів інших осередків і всієї таблиці.

створити шаблон сторінки з трьох колонок. Використовувати фіксований макет табличної верстки:

• ліва колонка - 150 пікселів;
• середня колонка - 400 пікселів;
• права колонка - 200 пікселів;

Задати фон для колонок і візуально розділити колонки кордоном.

Виконання:

<style type = "text / css"> / * для таблиці * / table #maket {width: 750px; padding: 5px; / * Внутрішні відступи * / border-collapse: collapse; / * Прибираємо подвійну кордон * /} / * для лівого вічка * / td # left {width: 150px; background: #ccc; / * Колір фону лівої колонки * / border-right: 1px dashed # 000; / * Межа між колонками * /} / * для центрального осередку * / td #central {width: 400px; background: # fc3; / * Колір фону колонки * / border-right: 1px dashed # 000; / * Межа між колонками * /} / * для правої комірки * / td # right {width: 200px; background: #ccc; / * Колір фону правої колонки * /} / * для всіх осередків * / #maket td {vertical-align: top; } </ Style>

<Style type = "text / css"> / * для таблиці * / table # maket {width: 750px; padding: 5px; / * Внутрішні відступи * / border-collapse: collapse; / * Прибираємо подвійну кордон * /} / * для лівого вічка * / td # left {width: 150px; background: #ccc; / * Колір фону лівої колонки * / border-right: 1px dashed # 000; / * Межа між колонками * /} / * для центрального осередку * / td # central {width: 400px; background: # fc3; / * Колір фону колонки * / border-right: 1px dashed # 000; / * Межа між колонками * /} / * для правої комірки * / td # right {width: 200px; background: #ccc; / * Колір фону правої колонки * /} / * для всіх осередків * / #maket td {vertical-align: top; } </ Style>

</ Head> <body> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1 </ td> <td id = "central"> 2 </ td> < td id = "right"> 3 </ td> </ tr> </ table>

</ Head> <body> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1 </ td> <td id = "central"> 2 </ td> < td id = "right"> 3 </ td> </ tr> </ table>

результат:

гумовий макет

• Ширина таблиці при використанні «гумового» дизайну встановлюється в% від ширини вікна браузера. Т.ч. при зміні вікна браузера, змінюються і розміри таблиці.
• Ширина всіх осередків може встановлюватися у відсотках.
• Другий варіант, коли ширина деяких осередків встановлюється у відсотках, а деяких - в пікселях.

Важливо: Сума ширини всіх колонок повинна вийти 100%, незалежно від ширини таблиці.

Приклад:

створити шаблон сторінки з трьох колонок. Використовувати гумовий макет табличної верстки:

• ліва колонка - 20%;
• середня колонка - 40%;
• права колонка - 40%;

Задати фон для колонок і візуально розділити колонки кордоном.

виконання:

<Style type = "text / css"> / * для таблиці * / table #maket {width: 90%; padding: 5px; / * Внутрішні відступи * / border-collapse: collapse; / * Прибираємо подвійну кордон * /} / * для лівого вічка * / td # left {width: 20%; background: #ccc; / * Колір фону лівої колонки * / border-right: 1px dashed # 000; / * Межа між колонками * /} / * для центрального осередку * / td #central {width: 40%; background: # fc3; / * Колір фону колонки * / border-right: 1px dashed # 000; / * Межа між колонками * /} / * для правої комірки * / td # right {width: 40%; background: #ccc; / * Колір фону правої колонки * /} / * для всіх осередків * / #maket td {vertical-align: top; } </ Style>

<Style type = "text / css"> / * для таблиці * / table # maket {width: 90%; padding: 5px; / * Внутрішні відступи * / border-collapse: collapse; / * Прибираємо подвійну кордон * /} / * для лівого вічка * / td # left {width: 20%; background: #ccc; / * Колір фону лівої колонки * / border-right: 1px dashed # 000; / * Межа між колонками * /} / * для центрального осередку * / td # central {width: 40%; background: # fc3; / * Колір фону колонки * / border-right: 1px dashed # 000; / * Межа між колонками * /} / * для правої комірки * / td # right {width: 40%; background: #ccc; / * Колір фону правої колонки * /} / * для всіх осередків * / #maket td {vertical-align: top; } </ Style>

</ Head> <body> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1 </ td> <td id = "central"> 2 </ td> < td id = "right"> 3 </ td> </ tr> </ table>

</ Head> <body> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1 </ td> <td id = "central"> 2 </ td> < td id = "right"> 3 </ td> </ tr> </ table>

результат:

Розглянемо другий варіант, коли ширина центральної колонки автоматично підбирається браузером; прикладом може служити малюнок:

створити шаблон сторінки з трьох колонок. Використовувати гумовий макет табличної верстки:

• ліва колонка - 150 пікселів;
• середня колонка - 40%;
• права колонка - 200 пікселів;

Задати фон для колонок і візуально розділити колонки кордоном.

Виконання:

<style type = "text / css"> / * для таблиці * / table #maket {width: 90%; padding: 5px; / * Внутрішні відступи * / border-collapse: collapse; / * Прибираємо подвійну кордон * /} / * для лівого вічка * / td # left {width: 150px; background: #ccc; / * Колір фону лівої колонки * / border-right: 1px dashed # 000; / * Межа між колонками * /} / * для центрального осередку * / td #central {background: # fc3; / * Колір фону колонки * / border-right: 1px dashed # 000; / * Межа між колонками * /} / * для правої комірки * / td # right {width: 200px; background: #ccc; / * Колір фону правої колонки * /} / * для всіх осередків * / #maket td {vertical-align: top; } </ Style>

<Style type = "text / css"> / * для таблиці * / table # maket {width: 90%; padding: 5px; / * Внутрішні відступи * / border-collapse: collapse; / * Прибираємо подвійну кордон * /} / * для лівого вічка * / td # left {width: 150px; background: #ccc; / * Колір фону лівої колонки * / border-right: 1px dashed # 000; / * Межа між колонками * /} / * для центрального осередку * / td # central {background: # fc3; / * Колір фону колонки * / border-right: 1px dashed # 000; / * Межа між колонками * /} / * для правої комірки * / td # right {width: 200px; background: #ccc; / * Колір фону правої колонки * /} / * для всіх осередків * / #maket td {vertical-align: top; } </ Style>

</ Head> <body> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1 </ td> <td id = "central"> 2 </ td> < td id = "right"> 3 </ td> </ tr> </ table>

</ Head> <body> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1 </ td> <td id = "central"> 2 </ td> < td id = "right"> 3 </ td> </ tr> </ table>

результат:
Результат буде приблизно такою ж, тільки «розтягування» буде відбувається за рахунок центральної колонки.

Використання вкладеної таблиці в гумовому макеті

Якщо ширина двох колонок встановлюється у відсотках, а третій - в пікселях, обійтися однією таблицею не вийде. Так, якщо ширина всієї таблиці дорівнює 100 відсотків, першої колонки - 200 пікселів, а що залишилися колонок по 20 відсотків, то просте обчислення показує, що розмір першої колонки виходить рівним 60 відсотків. В такому випадку задане значення в пікселях браузер не сприйметься, а розмір буде встановлено у відсотках.

• Вихідна таблиця створюється з двома осередками. Ширина таблиці задається у відсотках.
• Для лівої комірки (першої колонки) встановлюється ширина в пікселях.
• Ширина правої комірки (основа для інших колонок) не вказується. Всередину цього осередку вставляється друга таблиця, теж складається з двох осередків.
• У осередків вкладеної таблиці ширина встановлюється у відсотках.
• Ширина внутрішньої таблиці повинна бути встановлена в 100 відсотків, щоб ця таблиця займала весь вільний простір у зовнішній таблиці.
• Ширина центральної і правої колонки обчислюється щодо ширини осередку, а не зовнішньої таблиці в цілому.

створити шаблон сторінки з трьох колонок. Використовувати гумовий макет з вкладеною таблицею:

• ліва колонка - 150 пікселів;
• середня колонка - 60%;
• права колонка - 40%;

Задати фон для колонок.

виконання:

<Style type = "text / css"> / * для таблиці * / table {width: 100%; border-collapse: collapse; / * Прибираємо подвійну кордон * /} / * для лівого вічка * / td # left {width: 150px; background: #ccc; / * Колір фону лівої колонки * /} / * для центрального осередку * / td #central {width: 60%; background: # fc3; / * Колір фону колонки * /} / * для правої комірки * / td # right {width: 40%; background: #ccc; / * Колір фону правої колонки * /} / * для всіх осередків * / td {vertical-align: top; } # Left, #central, #right {padding: 5px; / * Внутрішні відступи * /}

<Style type = "text / css"> / * для таблиці * / table {width: 100%; border-collapse: collapse; / * Прибираємо подвійну кордон * /} / * для лівого вічка * / td # left {width: 150px; background: #ccc; / * Колір фону лівої колонки * /} / * для центрального осередку * / td # central {width: 60%; background: # fc3; / * Колір фону колонки * /} / * для правої комірки * / td # right {width: 40%; background: #ccc; / * Колір фону правої колонки * /} / * для всіх осередків * / td {vertical-align: top; } # Left, # central, # right {padding: 5px; / * Внутрішні відступи * /}

</ Style> </ head> <body> <table cellpadding = "0" cellspacing = "0"> <tr> <td id = "left"> 1 </ td> <td> <table cellpadding = "0" cellspacing = "0"> <td id = "central"> 2 </ td> <td id = "right"> 3 </ td> </ table> </ td> </ tr> </ table>

</ Style> </ head> <body> <table cellpadding = "0" cellspacing = "0"> <tr> <td id = "left"> 1 </ td> <td> <table cellpadding = "0" cellspacing = "0"> <td id = "central"> 2 </ td> <td id = "right"> 3 </ td> </ table> </ td> </ tr> </ table>

Атрибути тегів cellpadding і cellspacing тут необхідні, для того, щоб не було «зазору» між таблицями.
результат: