- властивості таблиці
- border
- border-collapse (Злиття кордону)
- width і height (Висота і ширина таблиці)
- text-align (Вирівнювання по горизонталі)
- vertical-align (Вирівнювання по вертикалі)
- padding (Внутрішні відступи в таблиці)
- background-color (задній фон) color (колір тексту)
- Таблична верстка CSS
- Таблична верстка з двох колонок
- Таблична верстка з трьох колонок
- Використання вкладеної таблиці в гумовому макеті
Мета уроку: Знайомство з властивостями таблиці і з принципами табличної верстки 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:
- Додати властивості для наступних тегів (якщо ще не додавали):
- 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 тут необхідні, для того, щоб не було «зазору» між таблицями.
результат: