У цій статті розвіємо міфи про переваги табличної верстки. Поїхали!)
1. Верстка таблицями набагато простіша
Дуже часто вважають, що верстка таблицями набагато простіша. Але насправді це не так. Якщо, наприклад, вам потрібно створити невеличку таблицю, з декількох колонок і строчок, то будь ласка, використовуйте табличну верстку. Але уявіть собі, що вам потрібно створити велику таблицю, в якій буде багато даних, і якщо комірки в ній мають бути не прямокутними, а наприклад з заукругленими кутами. Потрібно буде дуже багато коду, в якому буде не те, що важко розібратися, він стане просто нечитабельним.
2. Завантаження таблиць займає менше часу
Можливо, але у таблиць є дуже великий недолік. Таблиця не буде відображеною повністю, доки повністю не завантажиться весь її вміст. Це явище виникає через те, що браузеру потрібно розрахувати відстані, розміри комірок і т.д. і т.п. Тому можна з впевненістю сказати, що таблична верстка підходить для невеличких сайтів, але для сайтів з великим об'ємом інформації такий варіант не підійде.
3. Використання таблиць стилів не дає виграш по трафіку
Як ми знаємо, використання таблиць стилів прийшло до нас разом з блочною версткою, щоб надати коду більш зрозумілого вигляду за рахунок того, що всі стилі винесені в окремий файл.
Але фанати табличної верстки вважають, що використання стилів не дає жодних переваг.
В сторону захисту блочної верстки можна сказати лише те, що всі сучасні браузери підтримують кешування, завдяки якому завантаження стилів зазвичай відбувається лише при першому відвідуванні сайту, а всі наступні рази браузер вже відкриває стилі з збереженого файлу у внутрішній пам'яті.
4. Таблична верстка не впливає на індексацію в пошукових системах
Впливає, проте лише негативно. Це відбувається за рахунок того, що сайти зверстані таблицями завантажуються повільніше, а також через те, що пошуковому роботу набагато важче знайти потрібну інформацію в дебрах коду таблиць. З цього можна зробити висновок, що роскрутка сайту, який зверстаний таблицями обійдеться вам набагато дорожче.
Переваги блочної верстки
— Відповідність стандартам. Якщо сайт зверстано валідно, згідно стандартів W3C, то гарантовано однакове відображення сайту у більшості популярних браузерів. (Не враховуючи IE, з ним завжди якійсь проблеми).
— Мобільність. Код блочної верстки є легко зрозумілим та мінімалістичним (за розмірами), та забезпечує максимальну мобільність. Ви можете змінити колірну гамму сайту лише редагуванням файли стилів.
— Логічність. Розробляючи потрібний блок ви вказуєте його розміри, кольори і т.д.
Приклади
Як виглядає таблична верстка
<table>
<tr>
<td>текст</td>
</tr>
</table>
<tr>
<td>текст</td>
</tr>
</table>
А ось так, це можна виразити у блочній
<div>текст</div>
Як ми бачимо, код блочної верстки є набагато меншим за об'ємом, проте ефективнішим.
Розглянемо складнішу конструкцію
<table>
<tbody>
<tr>
<td width="398" valign="bottom" colspan="3"> <p align="center">Шапка сайту</p>
</td>
</tr>
<tr>
<td width="116" valign="bottom">
<p> </p>
<p>Ліва колонка</p> <p> </p>
</td>
<td width="159" valign="bottom">
<p>Центральна колонка</p> <p> </p>
</td>
<td width="123" valign="bottom">
<p>Права колонка</p> <p> </p>
</td>
</tr>
<tr>
<td width="398" valign="bottom" colspan="3">
<p align="center">Підвал сайту</p>
</td>
</tr>
</tbody>
</table>
Як ми бачимо, код блочної верстки є набагато меншим за об'ємом, проте ефективнішим.
Розглянемо складнішу конструкцію
<table>
<tbody>
<tr>
<td width="398" valign="bottom" colspan="3"> <p align="center">Шапка сайту</p>
</td>
</tr>
<tr>
<td width="116" valign="bottom">
<p> </p>
<p>Ліва колонка</p> <p> </p>
</td>
<td width="159" valign="bottom">
<p>Центральна колонка</p> <p> </p>
</td>
<td width="123" valign="bottom">
<p>Права колонка</p> <p> </p>
</td>
</tr>
<tr>
<td width="398" valign="bottom" colspan="3">
<p align="center">Підвал сайту</p>
</td>
</tr>
</tbody>
</table>
А також div-ний варіант
<div>
<div id="header_test"> <p align="center">Шапка сайту</p> </div>
<div id="container_test" >
<div id="left-column_test"> Ліва колонка </div>
<div id="center-column_test"> Центральна колонка </div>
<div id="right-column_test"> Права колонка </div>
</div>
<div id="footer_test"> <p align="center">Підвал сайту</p> </div>
<div>
І плюс css стилі
#left-column_test {
width: 116px;
}
#right-column_test {
width: 123px;
}
#center-column_test {
margin: 159px;
}
#right-column_test, #left-column_test, #center-column_test {
position: relative;
float: left;
}
#header_test {
width: 398px;
}
#container_test {
margin: 0 auto;
width:398px;
float: left; /* IE 5.01 */
float/**/: none;
position: relative;
}
#footer_test {
clear: both;
width: 398px;
}
<div id="header_test"> <p align="center">Шапка сайту</p> </div>
<div id="container_test" >
<div id="left-column_test"> Ліва колонка </div>
<div id="center-column_test"> Центральна колонка </div>
<div id="right-column_test"> Права колонка </div>
</div>
<div id="footer_test"> <p align="center">Підвал сайту</p> </div>
<div>
І плюс css стилі
#left-column_test {
width: 116px;
}
#right-column_test {
width: 123px;
}
#center-column_test {
margin: 159px;
}
#right-column_test, #left-column_test, #center-column_test {
position: relative;
float: left;
}
#header_test {
width: 398px;
}
#container_test {
margin: 0 auto;
width:398px;
float: left; /* IE 5.01 */
float/**/: none;
position: relative;
}
#footer_test {
clear: both;
width: 398px;
}
Ви подумали, що через великі розміри стилів блочна верстка є гіршою? Насправді це не так, врахуйте той факт, що css завантажується один раз і ви побачите переваги блочної верстки.
Автор: dmftaras
0
