Табличная вёрстка VS Блочная вёрстка
Одним из самых популярных споров между верстальщиками - это, какая вёрстка лучше: табличная или блочная. Вопрос этот очень спорный и каждый по-своему прав. Хотя я убеждён, что всё зависит от конкретной ситуации, поэтому и блочная вёрстка, и табличная вёрстка имеют право на существование. И в этой статье я постараюсь разобрать преимущества и недостатки каждой из них. Чтобы при выборе типа вёрстки для своего сайта, Вы опирались, в первую очередь, на их особенности.
Начну с преимуществ и недостатков табличной вёрстки:
- Таблицы не перекрываются друг с другом при маленьких разрешениях.
- Легко делать кроссбраузерный дизайн.
- Гораздо проще блочной вёрстки.
- Очень много лишнего кода, ввиду бесконечного создания строк и столбцов.
- Далеко не каждый дизайн можно создать с помощью таблиц.
Теперь о преимуществах и недостаках блочной вёрстки:
- Значительно меньше HTML-кода и, как следствие, уменьшение веса страницы.
- Блоки загружаются быстрее таблиц (особенно больших таблиц).
- В отличии от таблиц, блоки - универсальное средство для создания любого дизайна.
- Гораздо сложнее табличной вёрстки.
- Огромные проблемы с кроссбраузерностью.
- Блоки начинают наезжать (либо спадать) друг на друга при маленьких разрешениях экрана.
Вот все преимущества и недостатки блочной и табличной вёрстки. От себя хочу добавить, что в 99% Вы будете использовать и то, и другое, но сейчас вопрос стоит о создании самого макета сайта в целом. И здесь я хочу дать Вам рекомендацию, какой из типов вёрстки выбрать.
Блочная вёрстка лучше табличной, НО при условии, что Вы добьётесь кроссбраузерности и хорошего отображения сайта при разных разрешениях экрана. Данный сайт свёрстан блоками, однако, добиться кроссбраузерности и хорошего отображения на разрешениях (я добился хорошего отображения на разрешениях от 800 на 600, хотя на практике достаточно от 1024 на 768) очень тяжело. Об этом я предупреждаю заранее, поэтому если у Вас ещё маленький опыт вёрстки, то забудьте о блочной вообще. Лучше делайте табличную вёрстку.
Вывод: если Вы ещё недостаточно опытны, то используйте только табличную вёрстку, иначе принимайте решение в зависимости от конкретного случая. И всегда ответьте себе на вопрос: "Готовы ли Вы к потере огромного количества времени ради совсем небольшой пользы?".
-
Создано 13.04.2011 23:00:30
-
Михаил Русаков
Комментарии (33):
А как натянуть таблицу на всю страницу, у меня почему то со всех сторон 1-2 пикселя занимает пустое место страницы
Ответить
Через CSS: body { margin: 0; padding: 0; }
Ответить
Извиняюсь за вопрос, мб он покажется туповатым, то что все такие такое блочная верстка, рассказано, насколько я увидел здесь только про таблицы, Заранее спасибо.
Ответить
Блочная вёрстка - это использование стилизованных div в самой основе структуры страницы.
Ответить
да вот щас сюда перешел чтобы удалить пост)) Понял внезапно,спасибо
Ответить
Верстаю сайт блоками див.Конструкция простая.шапка и футер,между ними еще три блока(margin: 0; padding: 0;).ширину писал в пикселах сначала.общая получается 1280px ,а эти три блока соответственно 200+800+280px.Всё должно умещатьсь,а нет.Правый блок падает вниз,делаю чуть меньше крайний блок до тех пор пока умещается,тогда у меня появляется горизонтальная полоса прокрутки.Решил всё переделать в %. Всё получилось ровно ничего не падает всё как должно быть.А до того как я всё это настроил ,задавал вопросы в "Ответах@mail" мне сказали что писать размеры в % ,считается дурным тоном.Вопрос к вам ,как вы считаете почему так?мне многие так написали.И может я что то не так делал когда делал в пикселах?
Ответить
В % надо писать только центральный блок, а вот левый и правый - можно в абсолютных единицах, а можно и в процентах. А вообще, как такового правила, или дурного тона не существует по данной теме. Всё зависит от типа вёрстки, и оба варианта допустимы.
Ответить
Еще вопрос .Padding Увеличивает размер блока?А то у меня почему то увеличивает,как такое может быть?
Ответить
padding увеличивает размер блока. Поэтому при увеличении padding, нужно самостоятельно уменьшать width.
Ответить
Я хочу узнать мнения експерта,а все таки Михаил,какая лучшая вёрстка "Блочная" или "Табличная"?Какую вёрстку вы предпочитаете?Жду на ваш ответ...
Ответить
Хотя у них свои преимущества и недостатки, в основном, профессионалы выбирают блочную.
Ответить
У меня возникла еще одна проблема с таблицами.Я создал таблицу для входа на сайт,а у меня,"Меню" сайта опустилось вниз,а еще текст которий был написан - приветствие,тожу упустилось на низ,а теперь я немогу поднять наверх на левий бок мне нужно поднять "Меню" сайта.Я уже взял меню в таблицу и пробовал разлычними атрибутами поднять,но всеровно ничево не получаетса. Уважаемий Михаил,может есть какой небудь "тег" или "атрибут" чтобы я мог поднять "Меню" на левий бок наверх?
Ответить
Посмотрите через firebug вкладку Layout для нужного элемента. Вохможно у Вас откуда-нибудь появились отступы, которые Вы не обнулили.
Ответить
Не помогло,я по другому сделал я поднял меню с помощю позиционирования и теперь розмещаю таблици куда надо.Вы меня извините за ошибки в тексте,потомушто я с Украини и не учю руский язык,только украинский и английский.Но всеровно спасибо что отозвались!И еще один надеюсь последний вопрос...Подскажите Михаил!с помощю какого тега или атрибута я могу перемищать "Блоки",котории создаютса с тега <div> или как можно по другому назвать - позиционировать,всмысле ставить блоки куда надо?
Ответить
Про позиционирование блоков читайте здесь: http://myrusakov.ru/html-block-makeup.html
Ответить
Спасибо!
Ответить
Михаил!А скажите еще как делать отступи от граници екрана?как например вконткты.Я хочю чтобы сайт имел ширину небольшою не так,как у вас на целий екран,а немного узкую,короче я надеюсь вы меня поняли.
Ответить
Тут Вам не отступы нужны, а фиксированный размер блока. Т.е. в px, а не процентах.
Ответить
Спасибо очень полезная статья!
Ответить
Здравствуйте, Михаил. Я написал страницу для загрузки фото на сайт. Но у меня есть проблема: я добавляю картинку в верхний левый угол, когда я добавляю вторую картинку она становится ниже первой, а я хочу чтобы она добавилась на ровне с первой. Вот код:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <title>Добавление фото</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <link rel="stylesheet" href="style2.css" type="text/css" media="screen" /> <script type="text/javascript" src="jwplayer/jwplayer.js"></script> <meta name="generator" content="" /> <BODY BGCOLOR ="#5f7e9e"> <html> <head> <p align=left> <A href="http://www.make.ru"><IMG class=image alt=agt_loging.png title="На главную." src="file:image/agt_login.png"></A></P> <A href="http://www.make.ru"><IMG class=image alt=reg.png title="Регистрация." src="file:image/reg.png"></A></P> <title>Загрузка изображения</title> </head> <P align=right> <A href="index.html"><IMG class=image alt=log_out.png title="Выйти из учётной записи." src="file:image/log_out.png"></A></P> <center> <h2><p><b>Загрузка изображения </b></p></h2> <form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="filename" alt="Загрузить фото на сервер."><br> <p><p><input onclick="is_exit=1;" class="submit" id="frmsubmit" src="image/download_2.png" alt="Загрузить фото на сервер." type="image"></p></p>
Ответить
Для выравнивания элементов по вертикали можно использовать таблицы.
Ответить
Михаил, в табличной вёрстке атрибут colspan устанавливает размер в ячейках (colspan = '2', значит одна ячейка будет равна двум ячейкам). А вот есть атрибут, что бы устанавливать размер не в ячейках, а строках?
Ответить
rowspan
Ответить
Спасибо, Михаил.
Ответить
Здраствуйте, Михаил! Я делаю верстку статического шаблона, у меня такая проблема, размеры шапки и горизонтальное меню стали маленькими.Что надо сделать?
Ответить
Что значит стали маленькими? Вы же задаете фиксированные размеры, как я понимаю.
Ответить
Здраствуйте, Михаил! Как у вас дела! Я делаю блочную верстку для видео сайта, посоветуйте какой DOCTYPE выбрать XTML,HTML или HTML 5, я бы хотел поставить в главной странице сайта плагин для проигрывания видеороликов.
Ответить
Берите XTML либо HTML.
Ответить
Спасибо, Михаил.
Ответить
у меня такой вопрос...хочу верстать свой сайт блочным методом.. и сделать для каждого разшерения отдельный css файл.. и при входе на страницу проверять расшерения и браузер...и загрузить нужный мне css файл ..такое возможно?? если да то подскажите что надо знать для этого..... может javascript поможет?
Ответить
Вы имеете ввиду для каждого блока свой css?
Ответить
не для каждого блока а для каждого браузера....например если браузер пользователя IE9 то загрузить для него особый css файл...а если браузер пользователя chrome то тогда для него тоже свой css файл...
Ответить
Возможно, делал аналогичное с помощью JavaScript: <head> <script type="text/javascript"> if (self.screen) { width = window.innerWidth } else if (self.java) { var jkit = java.awt.Toolkit.getDefaultToolkit(); var scrsize = jkit.getScreenSize(); width = scrsize.width; } if (width <= '1025') { document.writeln ('<link rel="stylesheet" type="text/css" href="1024.css" media="all" />'); } else { document.writeln ('<link rel="stylesheet" type="text/css" href="wide.css" media="all" />'); } </script> <noscript> <link rel="stylesheet" type="text/css" href="1024.css" media="all" /> </noscript> </head>
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.