- Крок 1. Основна таблиця
- Крок 2. Таблиця для контенту
- Крок 3. Вертикальне вирівнювання
- Крок 4. Заповнюємо таблицю: шапка, підвал і контент
- Крок 5. Оформляємо кордону
Крок 1. Основна таблиця
Крок 2. Таблиця для контенту
Крок 3. Вертикальне вирівнювання
Крок 4. Заповнюємо таблицю: шапка, підвал і контент
Крок 5. Оформляємо кордону
- це умовне назви методу верстки сторінок сайту.
При табличному методі верстки каркас сторінок сайту створюється за допомогою тега <table> , Тобто структурною основою сторінки є таблиця, в осередках якої мають у своєму розпорядженні той чи інший контент.
Це найбільш поширений спосіб верстки веб-сторінок. Перевага табличній комп'ютерного набору тим, що вона проста і швидка у виконанні. Крім цього, сторінки, які мають у своїй основі таблицю, коректно відображаються в різних браузерах.
Я думаю, що Ви вже знайомі з основними тегами таблиць: це теги <Tr> і <Td> , Що створюють рядок і клітинку таблиці відповідно. А також Ви, напевно, знаєте основи роботи з таблицями в HTML . Якщо немає, то раджу спочатку трохи почитати про це.
А зараз давайте перейдемо безпосередньо до створення каркаса сторінки методом табличної верстки.
В основному верстка зі створенням таблиць виконується так, що кордони і таблиць і їх осередків невидимі (атрибут border = "0"). Я ж буду створювати таблиці, які мають кордони (атрибут border = "1"). Так Вам простіше буде орієнтуватися.
Крок 1. Основна таблиця 
Стандартна початкова таблиця, яка складає основу сторінки, зазвичай складається з трьох рядків: верхня рядок призначена для шапки сайту - це може бути будь-яке зображення, створене Вами в редакторі Adobe Photoshop або запозичене з будь-якого джерела; нижній рядок займає підвал або так званий «футер» сайту (від англ. footer - нижня виноска); і основна рядок розташована по середині. Далі Ви дізнаєтеся для чого вона призначена.
Пропоную назвати початкову таблицю основний. Робимо це для виключення плутанини, так як далі будуть створюватися інші таблиці.
Тут варто відзначити наступний важливий момент: тег <tr> не може існувати сам по собі. Обов'язкова наявність тега <td>. Тобто рядок таблиці створюється тільки при наявності в ній хоча б одного осередку.
Фрагмент коду:
результат:
Що стосується ширини основної таблиці, то, як Ви бачите, ми її встановили фіксованої: рівної 1000 px. Ви можете встановити будь-яку ширину, але робіть її не більше, ніж дозвіл екрана. Наприклад, якщо у Вас встановлено дозвіл, то бажано, щоб ширина основної таблиці не перевищувала 1280 px, інакше якась її частина не буде видно, а у вікна браузера з'явитися горизонтальна смуга прокрутки.
А що якщо у певного числа користувачів дозвіл екрана менше Вашого, наприклад? В цьому випадку при ширині основної таблиці більше 1024 px, якоїсь частини користувачів буде незручно переглядати сторінки Вашого сайту, так як їм доведеться користуватися горизонтальною смугою прокрутки.
Вихід з цього є. Можна встановити значення ширини рівним 100%. Тоді ширина таблиці буде підлаштовуватися під розміри вікна браузера.
Також можна відразу поставити значення атрибута height тега <table>, який встановлює висоту таблиці. Нехай висота основної таблиці становить 700 px.
Слід знати, що значення висоти і ширини таблиці не є постійними, тобто менше таблиця не стане, а от більше може - все залежить від розмірів її вмісту.
Крок 2. Таблиця для контенту
Створюємо в осередку основного рядка ще таблицю. Назвемо її таблиця для контенту - в ній буде розміщено основний вміст сторінки.
Як правило, таблиця для контенту складається з трьох стовпців, тобто має один рядок і три осередки, що утворюють стовпці.
І, як правило, в лівій колонці розміщують меню навігації, а в правій, наприклад, рекламні блоки, банери тощо Можна праву колонку тимчасово залишити порожній або не створювати її (але краще створіть - у міру наповнення сайту їй знайдеться застосування). І, нарешті, центральний осередок таблиці для контенту є основною, так як в ній розміщують контент: тексти статей, різні графічні елементи і т.д.
Фрагмент коду:
<table border = "1" width = "100%" height = "100%"> Встановлюємо ширину і висоту таблиці для контенту рівними 100%
<Tr>
<Td> & nbsp; </ td> Ліва осередок таблиці для контенту
<Td> & nbsp; </ td> Центральна осередок таблиці для контенту
<Td> & nbsp; </ td> Права осередок таблиці для контенту
</ Tr>
</ Table>
результат:
Ширину і висоту таблиці для контенту встановлюємо рівними 100%. Таким чином вона відразу розтягнеться на всю ширину основної таблиці і на всю висоту основного рядка.
Крок 3. Вертикальне вирівнювання
Як видно з попередніх кроків, вміст комірок таблиці за замовчуванням вирівнюється в горизонтальній площині по лівому краю, а у вертикальній - по середині.
Якщо горизонтальне вирівнювання в осередку, як правило, залишають за замовчуванням, то розташування контенту по центру осередки у вертикальній площині рідко кого-то влаштовує.
Тому, за допомогою атрибута valign тега <td>, встановлюємо вертикальне вирівнювання вмісту тих осередків, для яких це необхідно. В основному для вмісту осередків встановлюють вертикальне вирівнювання по верхньому краю.
Фрагмент коду:
<table border = "1" width = "100%" height = "100%"> Таблиці для контенту
<Tr>
<Td valign = "top"> & nbsp; </ td> Ліва осередок таблиці для контенту. Вміст комірки вирівняні по її верхньому краю.
<Td valign = "top"> & nbsp; </ td> Центральна осередок таблиці для контенту. Вміст комірки вирівняні по її верхньому краю.
<Td> & nbsp; </ td> Права осередок таблиці для контенту
</ Tr>
</ Table>
результат:
Крок 4. Заповнюємо таблицю: шапка, підвал і контент
Отже, на попередньому етапі ми закінчили формувати наш каркас (втім його можна переробити і внести якісь зміни в будь-який час).
Зараз давайте перейдемо до заповнення основної таблиці. Почнемо з шапки.
Я взяв зображення, що є шапкою мого сайту і зменшив його до відповідного розміру: нагадаю, що ширина основної таблиці, а відповідно, і осередки під шапку становить 1000 px.
Знаючи висоту зображення, встановлюємо для осередку, відведеної під шапку, відповідне значення висоти: 121 px.
Переходимо до підвалу: нижню осередок основної таблиці, що є «футером» сторінки, заллємо синім кольором (атрибут bgcolor тега <td> задає фоновий колір комірки) і зробимо її по висоті, рівній 35 px.
Далі редагуємо таблицю для контенту: встановимо ширину лівого вічка рівній 250 px, а правою осередки - 150 px. Центральна осередок займає весь вільний простір: її ширина стає рівною 600 px.
Фрагмент коду:
<table border = "1" width = "100%" height = "100%"> Таблиці для контенту
<Tr>
<Td valign = "top" width = "250"> & nbsp; </ td> Ліва осередок таблиці для контенту. Вміст комірки вирівняні по її верхньому краю.
<Td valign = "top"> & nbsp; </ td> Центральна осередок таблиці для контенту. Вміст комірки вирівняні по її верхньому краю.
<Td width = "150"> & nbsp; </ td> Права осередок таблиці для контенту
</ Tr>
</ Table>
результат:
У лівій клітинці таблиці для контенту я розмістив меню навігації по сайту, а в центрі - текст.
Крок 5. Оформляємо кордону
Це останній крок, в якому ми оформимо кордону.
Я поступив таким чином: для кордону шапки сайту і центрального осередку основної таблиці я вибрав той же колір, яким залитий «футер», а елементи таблиці для контенту мають темно-сині кордону. Все кордону виконані безперервної лінією і мають товщину 1 px.
Фрагмент коду:
<table width = "100%" height = "100%" style = ""> Таблиці для контенту. Світло-синя межа
<Tr>
<Td valign = "top" width = "250" style = ""> & nbsp; </ td> Ліва осередок таблиці для контенту. Вміст комірки вирівняні по її верхньому краю. Темно-синя межа
<Td valign = "top" style = ""> & nbsp; </ td> Центральна осередок таблиці для контенту. Вміст комірки вирівняні по її верхньому краю. Темно-синя межа
<Td width = "150" style = ""> & nbsp; </ td> Права осередок таблиці для контенту. Темно-синя межа
</ Tr>
</ Table>
результат:
На цьому, мабуть, закінчимо створення каркаса сторінки методом табличної верстки.
Трохи пізніше я продовжу розвивати цю тему: трохи ускладнити наш каркас, включивши в нього ще один рядок для верхнього меню навігації; можна розмістити, наприклад, в лівій колонці ще одну таблицю, таким чином розбивши її на частини і т.п.
Втім, Ви можете зробити це самостійно. Заодно закріпіть пройдений матеріал!
А що якщо у певного числа користувачів дозвіл екрана менше Вашого, наприклад?
