HTML: таблична верстка. Приклади, опис, застосування, поради

Кожна людина, яка коли-небудь хотів створити сайт для свого проекту, стикався з проблемою його написання. Не всім хочеться платити, та й не кожен бюджет може це дозволити, за створення сайту професійним веб-майстрам, тому більшість початківців свій шлях творців сайтів починають вивчати методи верстки. Бо якісного контенту і наявності купленого місця на сервері хостингу сайту недостатньо, щоб він існував. Насамперед, необхідно створити «скелет» сторінки.

Що таке таблична верстка html?

Щоб відповісти на дане питання, необхідно дати визначення поняттю верстка. Верстка – процес створення структури html-сторінок, розміщення на ній основних елементів. Таблична верстка - це, відповідно, використання таблиці з невидимим контуром в якості структури сторінки. Тобто сторінка сайту буде таблицею з деякою кількістю стовпців і рядків, де в кожній клітинці розташовуватися певний елемент.


Макети html-документів, створені табличній версткою, використовуються в переважній більшості сайтів і застосовуються вже більше 10 років. Це пов'язано з простотою формування структури, заповнення, а також з універсальністю такої розмітки, яка в різних браузерах відображається однаково.

Перший етап створення сайту

Таблична верстка починається з розмітки: пишеться html-код сторінки з таблицею, що складається з певної кількості стовпців і рядків. Для створення таблиці в html використовується спеціальний тег , відкриває її. Всередині неї використовуються теги для створення рядка,

для створення заголовка таблиці і

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




Перша таблиця
Перший стовпець
Другий стовпець


Вміння створювати таблицю дозволяє виконати html-табличну верстку сторінок, тому необхідно з'ясувати, які атрибути є у тегів створення та як ними користуватися.

Основні атрибути тегів таблиці

Тег Даний тег, будучи символом відкриття таблиці, служить для обмеження її структури, що визначає її положення на сторінці і загальний вигляд всіх комірок, завдяки атрибутів: Властивість align використовується для вирівнюючи положення таблиці, може приймати значення "left", "center" і "right". Тобто вирівнювання по лівому краю, по центру і праворуч відповідно. Атрибут background дозволяє встановити фонове зображення для таблиці з посиланням на нього. Bgcolor задає фоновий колір таблиці, значенням може бути назва або код будь-якого кольору. Border-визначає товщину рамки таблиці і вказується в мілісекундах. Bordercolor встановлює колір кордону. Cellpadding дозволяє задавати проміжки між текстом і границями комірок. Властивість Frame вказує браузеру на режим відображення меж таблиці, приймаючи значення void, border, above, below, hsides, vsides, rhs, lhs. Що, відповідно, означає не відображати кордон, малювати рамки навколо таблиці, зробити видимою тільки верхню межу або тільки нижню, не приховувати тільки горизонтальні межі або тільки вертикальні, відображати тільки праву або тільки ліву межу. Атрибут rules несе інформацію про те, які межі клітинок потрібно відображати. Значення none дозволяє приховати всі кордону, all вказує на їх відображення, cols задає положення ліній між колонками, а rows – між рядками. Тег
Даний тег створює рядок таблиці, відповідає за її зовнішній вигляд. Має невеликий набір атрибутів: align для вирівнювання тексту в рядку, bgcolor задає колір тла комірки, bordercolor встановлює колір рамки навколо рядка. Теги

і

Ці два тега мають приблизно рівну функціональність: створюють комірку в рядку, та встановлюють умови її відображення, використовуючи атрибути: Abbr дозволяє зробити короткий коментар до осередку. Align відповідає за вирівнювання вмісту стосовно трьох горизонтальних положень. Background використовується для заповнення фону комірки певним зображенням. Bgcolor застосовується для установки фонового кольору в комірці. А bordercolor визначає колір кордонів осередку. Height служить для визначення висоти комірки. Nowrap необхідний для заборони перенесення рядка. Weight задає ширину комірки.

Приклад html-макету сайту

Вивчивши теорію роботи з таблицями в html, можна приступити до створення власної розмітки сторінки. Для цього слід визначитись з тим, які функціональні блоки будуть на вашому сайті. Це можуть бути шапка, підвал, контент-блок, бічні блоки. У html-табличній верстці необхідно лише створити таблицю.
Насправді на даному етапі можна створити вже повністю готовий макет, задавши зовнішній вигляд кожного елемента через властивості тегів, які описані вище. І тоді буде потрібно лише скопіювати код таблиці на кожну нову сторінку, щоб він мав один стиль. Але це досить незручно, так як стиль сторінки буде збережено тільки в її файлі, а значить, якщо з'явиться необхідність що-небудь змінити, доведеться неабияк постаратися, щоб знайти необхідний атрибут стилю в кожному документі і змінити його значення. Але існує варіант оптимізації цього процесу за допомогою використання методу CSS-табличної верстки. Тому під час створення html-таблиці немає необхідності використовувати атрибути стилю в документі. Єдиний атрибут, який застосовувати доведеться, це id, що дозволяє потім звертатися до стилю тільки окремого елемента. Це універсальний атрибут, який застосовується з будь-якими позначками. Він приймає значення, що складаються з латинських букв і символів. Створюючи таблицю, необхідно задати id для тега наприклад, із значенням "document". Потім для клітинки (тег

або

), відведеної під шапку, атрибут id може прийняти значення "header". Осередок лівого меню може бути названа "left_side", а правого – "right_side". Блок контенту, припустимо, буде названий "content", а підвал сайту – "footer".

Так буде відображатися сторінка в браузері.

Другий етап верстки

Створений документ потрібно підключити до стильового файлу CSS, для того щоб керувати зовнішнім виглядом об'єктів сторінки. Для цього необхідно створити CSS-документ, назвати його, до наприклад, mystyle.css. А тепер всередині тега в основному документі сторінки потрібно прописати наступне: . Після цього, прописуючи в mystyle.css умови відображення елементів, ви зможете змінювати зовнішній вигляд сторінки так, як вам буде завгодно. Наприклад, властивість color задає колір тексту, а background визначає, як буде виглядати фон елемента. Існує близько 20 основних властивостей, застосовуючи які, можна змінювати положення елементів, їх розміри, колір і виділення. Тому така верстка не є дуже складним і може бути виконана навіть новачком, а наскільки креативно та цікаво вийде, залежить тільки від вас.

CSS-верстка

Як відомо, зараз між табличній і блокової версткою в html більшість веб-майстрів вибирає саме другу. Це пов'язано насамперед з тим, що код табличної верстки виходить дуже громіздким, і це гальмує завантаження сайту. Об'ємність коду пояснюється наявністю складної структури тегів таблиці (3 рівня: потім і тільки після

.) Дана обставина перекриває навіть такі очевидні переваги табличної верстки, як чітка ієрархія елементів, фіксоване положення, кросбраузерність і простота верстки. Але існує рішення цієї проблеми саме в мові каскадних таблиць стилів (CSS).
Таблична верстка через CSS може бути здійснена, якщо, наприклад, в документі присутні лише окремі елементи, укладені в тег , які не є таблицею. Щоб оптимізувати код, можна створювати табличні документи прямо через властивості стилів. Для цього використовується властивість display, який вказує браузеру на те, як сприймати той чи інший елемент в документі. Так, наприклад, якщо значення table, то елемент відображається як таблиця, а якщо table-row або table cell – рядок таблиці і осередок відповідно. Таким чином, зникає необхідність у використанні тегів таблиць в html наборі.

Адаптивна таблична верстка

Адаптивна верстка передбачає зміну відображення сайту на різних екранах залежно від дозволу і розміру дисплея. Це досить непросте завдання для розробника, так як вимагає ретельних розрахунків і тестування на багатьох платформах. Тим не менше будь-популярний сучасний ресурс неможливо уявити без використання адаптації під різні пристрої. І для рішення цієї задачі застосовується CSS. По-перше, щоб у всіх браузерах стиль сайту був єдиним, потрібно обнулити все браузерні стандарти відображення з допомогою css reset, щоб позбутися нестандартних відступів, виділень і подібного. По-друге, необхідно отримувати медіа-запити від пристроїв, що підключаються до ресурсу, для того щоб отримати інформацію про дозволі екрану і застосувати адаптацію. Для цього в основному використовуються властивості min-width, max-width і display. Перші два визначають межі розширення блоку, а властивість display зі значенням none дозволяє приховувати великі і нефункціональні блоки на дисплеях з невеликим дозволом.

Приклади

Не має значення, яким методом скористається розробник для створення розмітки, він зможе оформити її з застосуванням CSS настільки унікально і естетично, наскільки вистачить фантазії. Нижче представлені приклади HTML-табличної верстки. Ще один приклад. А можна оформити і так. Насправді зовсім не важливо, що таблична верстка вже не виглядає сучасно і актуально – це легко компенсується креативністю і грамотністю дизайнерського оформлення.