Таблична верстка - це умовне назви методу верстки сторінок сайту.
При табличному методі верстки каркас сторінок сайту створюється за допомогою тега
| . створюють рядок і клітинку таблиці відповідно. А також Ви, напевно, знаєте основи роботи з таблицями в HTML. Якщо немає, то раджу спочатку трохи почитати про це.
А зараз давайте перейдемо безпосередньо до створення каркаса сторінки методом табличної верстки. В основному верстка зі створенням таблиць виконується так, що кордони і таблиць і їх осередків невидимі (атрибут border = "0"). Я ж буду створювати таблиці, які мають кордони (атрибут border = "1"). Так Вам простіше буде орієнтуватися. Крок 1. Основна таблицяПропоную назвати початкову таблицю основний. Робимо це для виключення плутанини, так як далі будуть створюватися інші таблиці. Тут варто відзначити наступний важливий момент. тег | |||||||||||||||||||||||||||||
| . Тобто рядок таблиці створюється тільки при наявності в ній хоча б одного осередку.
Що стосується ширини основної таблиці, то, як Ви бачите, ми її встановили фіксованої: рівної 1000 px. Ви можете встановити будь-яку ширину, але робіть її не більше, ніж дозвіл екрана. Наприклад, якщо у Вас встановлено дозвіл 1280х1024. то бажано, щоб ширина основної таблиці не перевищувала 1280 px. інакше якась її частина не буде видно, а у вікна браузера з'явитися горизонтальна смуга прокрутки. А що якщо у певного числа користувачів дозвіл екрана менше Вашого, наприклад 1024х768. В цьому випадку при ширині основної таблиці більше 1024 px. якоїсь частини користувачів буде незручно переглядати сторінки Вашого сайту, так як їм доведеться користуватися горизонтальною смугою прокрутки. Вихід з цього є. Можна встановити значення ширини рівним 100%. Тоді ширина таблиці буде підлаштовуватися під розміри вікна браузера. Також можна відразу поставити значення атрибута height тега
Ширину і висоту таблиці для контенту встановлюємо рівними 100%. Таким чином вона відразу розтягнеться на всю ширину основної таблиці і на всю висоту основного рядка. Крок 3. Вертикальне вирівнюванняЯк видно з попередніх кроків, вміст комірок таблиці за замовчуванням вирівнюється в горизонтальній площині по лівому краю, а у вертикальній - по середині. Якщо горизонтальне вирівнювання в осередку, як правило, залишають за замовчуванням, то розташування контенту по центру осередки у вертикальній площині рідко кого-то влаштовує. Тому, за допомогою атрибута valign тега . встановлюємо вертикальне вирівнювання вмісту тих осередків, для яких це необхідно. В основному для вмісту осередків встановлюють вертикальне вирівнювання по верхньому краю.
|
Крок 4. Заповнюємо таблицю: шапка, підвал і контентОтже, на попередньому етапі ми закінчили формувати наш каркас (втім його можна переробити і внести якісь зміни в будь-який час). Зараз давайте перейдемо до заповнення основної таблиці. Почнемо з шапки. Я взяв зображення, що є шапкою мого сайту і зменшив його до відповідного розміру: нагадаю, що ширина основної таблиці, а відповідно, і осередки під шапку становить 1000 px. Знаючи висоту зображення, встановлюємо для осередку, відведеної під шапку, відповідне значення висоти: 121 px. Переходимо до підвалу: нижню осередок основної таблиці, що є «футером» сторінки, заллємо синім кольором (атрибут bgcolor тега задає фоновий колір комірки) і зробимо її по висоті, рівній 35 px.
| Далі редагуємо таблицю для контенту: встановимо ширину лівого вічка рівній 250 px. а правою осередки - 150 px. Центральна осередок займає весь вільний простір: її ширина стає рівною 600 px.
У лівій клітинці таблиці для контенту я розмістив меню навігації по сайту, а в центрі - текст. Крок 5. Оформляємо кордонуЦе останній крок, в якому ми оформимо кордону. Я поступив таким чином: для кордону шапки сайту і центрального осередку основної таблиці я вибрав той же колір, яким залитий «футер», а елементи таблиці для контенту мають темно-сині кордону. Все кордону виконані безперервної лінією і мають товщину 1 px.
На цьому, мабуть, закінчимо створення каркаса сторінки методом табличної верстки. Трохи пізніше я продовжу розвивати цю тему: трохи ускладнити наш каркас, включивши в нього ще один рядок для верхнього меню навігації; можна розмістити, наприклад, в лівій колонці ще одну таблицю, таким чином розбивши її на частини і т.п. Втім, Ви можете зробити це самостійно. Заодно закріпіть пройдений матеріал! Схожі статті |