Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Статьи по CSS » Статья по CSS 5. Блоки или таблицы
13
25-07-2008, 01:35 - Razer (Статьи по CSS)
Статья по CSS 5. Блоки или таблицы

Здравствуйте уважаемые посетители! Тема нашей очередной статьи – сравнение двух типов верстки (блочного и табличного). Мы рассмотрим их достоинства и недостатки, попробуем найти оптимальный и максимально эффективный тип верстки…

Итак, начнём с описания старейшего типа верстки – табличного. Он основан на теге “table” и имеет примерно такую структуру:
<table>
     <tr>
          <td>Содержание первого столбца</td>
          <td>Содержание второго столбца</td>
     </tr>
</table>

Таким образом, мы задали таблицу, состоящую из 1 строки и 2 столбцов. Для ясности: “tr” обозначает строку, а “td” – столбец.
- По умолчанию, для таблиц применены следующие стили:
- Граница (border): 0 пикселей (нет)
- Поля ячеек (cellpadding): 1 пиксель
- Интервал ячеек (cellspacing): 2 пикселя

У таблиц множество положительных сторон, многие из которых субъективны. Однако, есть и бесспорные:
- С помощью таблиц можно добиться практически любого расположения элементов
- Таблицы имеют привычный для пользователя вид
- С помощью таблиц можно точно закрепить любой элемент
- Вёрстка ч помощью таблиц проста для понимания и освоения
Однако, у противников таблиц есть свои аргументы. Некоторые из них вполне убедительны:
- Таблицы бывают очень громоздки
- Таблицы не всегда способны обеспечить полную кроссбраузерность и поддержку различных разрешений экрана
- Таблицы замедляют скорость загрузки страниц сайта (спорное утверждение, о нём поговорим ниже).
Итак, мы закончили общее описание таблиц, теперь можно приступать к блокам.

Блочной вёрсткой, называется вёрстка, выполненная без использования таблиц. В HTML-коде используются такие теги как div, span и многие другие. Сама же форма страницы с помощью стилей (CSS). По логике нашего ресурса, мы должны были бы поддержать блочную вёрстку, но… тут есть свои тонкости. Сначала опишу хорошие стороны блоков:
- Малый размер кода
- Основа дизайна – CSS
- Широкие возможности позиционирования элементов
- Быстрая загрузка страниц
Теперь о плохом:
- Практически никогда не удаётся достигнуть полной кроссбраузерности
- Метод сложен для понимания новичками
- Большой файл стилей
Вот и всё с общим описанием, теперь приступим к анализу.

Очень многие веб-разработчики, которые считают себя «продвинутыми» призывают к полному отказу от табличной верстки, как от устаревшего способа. Но эти люди частенько забывают одну очень важную деталь – многие посетители их сайтов будут пользоваться устаревшими браузерами, которые могут поддерживать CSS только на базовом уровне (Internet Explorer 6, например). В некоторых типах браузеров и ОС могут происходить неприятные искажения.
Вот тогда и начинаются различные скрипты, исправляющие эти изъяны и практически сводящие на нет все преимущества CSS.
В моей практике были случаи, когда идеальные с точки зрения HTML и CSS блоки вели себя неадекватно от некоторых типов активного содержимого.
Есть ещё, конечно, проблема свободно позиционированных объектов, а точнее проблема не в них, а в понимании таких объектов браузерами Internet Explorer.
Итак, мы выяснили, что чистая блочная вёрстка не эффективна. Как на счёт табличной? Действительно, многие браузеры загружают таблицу как единое целое, замедляя таким образом работу сайта. Действительно, таблицы делают код излишне объемным. Действительно, табличная вёрстка в какой-то степени ограничивает фантазию дизайнера.
Вот и закончен наш анализ. Он показал, что мы, без сомнения, можем создать шаблон только на блоках, или только на таблицах. Однако, должен заметить, что и тот, и другой шаблоны не будут совершенными (есть исключения, разумеется).
Самым логичным типом вёрстки – будет грамотный «симбиоз» таблиц и блоков, их дополнение друг друга. Именно такой подход позволит создавать действительно качественные сайты.
Спасибо за внимание!




Автор: Алексей Савинов, Российская школа CSS
-----------------------------------
Правила копирования материалов статьи
Перейти в категорию статей по CSS


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!


---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 8666 раз(а) и написали 28 комментариев.
Комментарий #1 написал: OniX (25 июля 2008 02:00)
Фото

Группа: Модераторы
Комментариев: 33
Публикаций: 1
Репутация: 0 Зарегистрирован: 9.07.2008
Спасибо за полезную статью!
Полностью согласен с Вами. Особенно в этом:
- Метод сложен для понимания новичками
Комментарий #2 написал: Ilylevi (25 июля 2008 08:30)
Фото

Группа: Посетители
Комментариев: 10
Публикаций: 0
Репутация: 0 Зарегистрирован: 15.07.2008
Требуется продолжение! Пожалуйста, расскажите, как можно совместить блочную и табличную верстку такое, чтобы были только плюсы, и при этом получился динамичный сайт.
Комментарий #3 написал: Redigen (25 июля 2008 10:55)
Фото

Группа: Посетители
Комментариев: 3
Публикаций: 2
Репутация: 0 Зарегистрирован: 11.07.2008
Напрасно вы эту тему поднимаете. Все доводы, которые Вы привели в статье по отношению к блочной верстке, говорит только о малом опыте верстки как таковой, все проблемы легко решаемые. То что Вы называете "... выполненная без использования таблиц. В HTML-коде используются такие теги как div, span и многие другие." - это уже семантическая верста, что наиболее актуально для seo и более эффективно в отличии от таблиц. Насчет "чистая блочная вёрстка не эффективна" конечно если верстать одними div-ами очень глупо и не эффективно, но если не забывать об семантике, а это и ul, li, span, p, fieldset, legend, em... намного разнообразнее таблиц. Я верстальщик с хорошим опытом и не понимаю глупых рассуждений насчет способов верстки табличной или блочной, нужно делать как лучше и удобнее, а таблицы использовать только в прямом назначении, для таблиц данных и прочего.
Комментарий #4 написал: Komarova (25 июля 2008 11:47)
Фото

Группа: Посетители
Комментариев: 13
Публикаций: 0
Репутация: 0 Зарегистрирован: 10.06.2008
В статье для себя ничего нового не открыла - и тот, и тот способы имеют свои недостатки, поэтому я верстаю смешанно - каркас сайта (если обычный из нескольких колонок) таблицами, а внутренность - дивами, списками, p и т.п. smile
Комментарий #5 написал: magwolf (25 июля 2008 12:14)
Фото

Группа: Посетители
Комментариев: 2
Публикаций: 0
Репутация: 0 Зарегистрирован: 21.06.2008
Спасибо
Комментарий #6 написал: GZ Design (25 июля 2008 13:52)
Фото

Группа: Администраторы
Комментариев: 47
Публикаций: 144
Репутация: 2 Зарегистрирован: 7.04.2008
Redigen, это - Ваше субъективное мнение. Я его уважаю, хоть и не согласен.
Таблицы - очень полезный инструмент в определённых ситуациях. Наприер: я создаю третий шаблон для школы CSS... Когда-то, я верстал на чистых блоках, используя таблицы именно как Вы.
К примеру тут: таблицы помогли сократить код примерно в 1,5 раза и отбросить любые проблемы с кроссбраузеностью.
Выбор - как обычно, зависит от конкретного случая.

P.S. Можете показать какую-нибудь свою работу (блочную верстку)?
P.P.S. Я бы не стал говорить о малом опыте автора статьи.
Комментарий #7 написал: Schmel100 (25 июля 2008 14:08)
Фото

Группа: Посетители
Комментариев: 18
Публикаций: 0
Репутация: 0 Зарегистрирован: 28.06.2008
Спор разгорается не шуточный belay lol
Ну а за статью боьшое спасибо smile


--------------------------
www.schmel100.110mb.com
Комментарий #8 написал: Redigen (25 июля 2008 17:22)
Фото

Группа: Посетители
Комментариев: 3
Публикаций: 2
Репутация: 0 Зарегистрирован: 11.07.2008
GZ Design, Вы вводите меня в сомнения что имеете большой опыт в верстке. Вы проверяете код на валидность? На css-school.ru очень много ошибок как в HTML так и CSS.

Отвечаю на Ваш вопрос, могу дать вам ссылки на свои работы, но только в личку из-за клиентов и индексации. А вобще я участвую в разработке соц. сетей.
Комментарий #9 написал: GZ Design (25 июля 2008 18:24)
Фото

Группа: Администраторы
Комментариев: 47
Публикаций: 144
Репутация: 2 Зарегистрирован: 7.04.2008
Redigen, ДИскуссия заходит в тупик... Мы можем сомневаться в опыте друг друга сколь угодно долго.
Я считаю, что каждый должен сам решить, какой тип вёрстки для него наиболее удобен.
Решит, что блоки - отлично
Решит, что тблицы - замечательно
Я думаю, что это - основная цель автора статьи.
А на счёт валидности Вы правы. Просто не успел проверить. Сегодня посмотрю, если что критичное будет - поправлю.
Комментарий #10 написал: OniX (25 июля 2008 19:26)
Фото

Группа: Модераторы
Комментариев: 33
Публикаций: 1
Репутация: 0 Зарегистрирован: 9.07.2008
GZ Design, Redigen
Да будет мир в мире мастеров! bully
Комментарий #11 написал: Komarova (25 июля 2008 19:54)
Фото

Группа: Посетители
Комментариев: 13
Публикаций: 0
Репутация: 0 Зарегистрирован: 10.06.2008
Ребята, по всей Всемирной Паутине годами спорят на эту тему, но этот спор всё равно никогда не закончится, пока одна из версток не выживет другую (если такое случится). Так что нет смысла разводить на этом сайте бесконечные дисскуссии. Давайте жить дружно fellow
Комментарий #12 написал: Sheff (25 июля 2008 22:24)
Фото

Группа: Посетители
Комментариев: 26
Публикаций: 0
Репутация: 0 Зарегистрирован: 3.06.2008
Чтот мне всё тяжело даёься sad
Комментарий #13 написал: Barrio (26 июля 2008 00:09)
Фото

Группа: Посетители
Комментариев: 3
Публикаций: 0
Репутация: 0 Зарегистрирован: 10.04.2008
GZ Design, я полностью на стороне Redigen, тем более что я с ним давно знаком и именно он вдохнул в меня все знания и навыки верстки DIVами, пустые споры и все прочего. Каждому свое, я предположим считаю что дивы проще, легче и быстрее, на счет старомодности - все новое - хорошо забытое старое, на счет длинны кода и SEO - вот тут то бы я стобой даже поспорил!!! Пусть никто себя не называет мега мастерами - репутацию надо заслужить в лицах довольных заказчиков, которые не побоятся опять к тебе же и обратиться!
Комментарий #14 написал: OniX (26 июля 2008 01:24)
Фото

Группа: Модераторы
Комментариев: 33
Публикаций: 1
Репутация: 0 Зарегистрирован: 9.07.2008
Уже гркппы поддержки стали образовываться wink
Мы же вроде бы уже решили прекратить все споры и жить мирно!
Комментарий #15 написал: Barrio (26 июля 2008 01:44)
Фото

Группа: Посетители
Комментариев: 3
Публикаций: 0
Репутация: 0 Зарегистрирован: 10.04.2008
а я не с кем и не спорю, я выразил свое мнение :)
Комментарий #16 написал: navigator (7 августа 2008 23:04)
Фото

Группа: Посетители
Комментариев: 10
Публикаций: 0
Репутация: 0 Зарегистрирован: 20.04.2008
Лично я вижу перспективу в ДИВ-верстке (если писать в визуальных редакторах типа Дримвивера, плюс если будет достигнута нормальная кроссбраузерность и нормы письма CSS). Покаместь пишу на таблицах - всё выходит, как хочу, единственный минус- большой код.

Жду урока по нормам письма div+css. :)


--------------------------
Таблици- верный способ избежать блочного гемороя!
Комментарий #17 написал: filipzas (17 августа 2008 17:16)
Фото

Группа: Посетители
Комментариев: 3
Публикаций: 0
Репутация: 0 Зарегистрирован: 10.08.2008
Добавил в Мемори
Комментарий #18 написал: ruxman (23 августа 2008 18:50)
Фото

Группа: Гости
Комментариев: 0
Публикаций: 0
Репутация: 0 Зарегистрирован: --
статьи хорошие, но эта роботизация copy/past напрягает:

«Здравствуйте уважаемые посетители!Тема нашей очередной статьи»

— ЗДАРОВ! ответил пользователь в бездушный монитор сто-тридцатый раз :)
Комментарий #19 написал: blablabla (26 августа 2008 00:45)
Фото

Группа: Гости
Комментариев: 0
Публикаций: 0
Репутация: 0 Зарегистрирован: --
Да ниче так, мне понравилось!
http://softcity.ucoz.org
Комментарий #20 написал: filipzas (2 сентября 2008 22:34)
Фото

Группа: Посетители
Комментариев: 3
Публикаций: 0
Репутация: 0 Зарегистрирован: 10.08.2008
Вау Жду еще!
Комментарий #21 написал: asterikx (17 октября 2008 17:53)
Фото

Группа: Посетители
Комментариев: 1
Публикаций: 0
Репутация: 0 Зарегистрирован: 11.10.2008
Публикатору респект
Комментарий #22 написал: Aleksandr (19 октября 2008 02:56)
Фото

Группа: Гости
Комментариев: 0
Публикаций: 0
Репутация: 0 Зарегистрирован: --
а как никрути таблицы умирают, браузеры развиваются, об IE 6 через пару годков забудут, и забудут о таблицах.
большинство ставит на блоки и я думаю это правильное решение.
Комментарий #23 написал: CASHis (20 октября 2008 08:28)
Фото

Группа: Посетители
Комментариев: 15
Публикаций: 0
Репутация: 0 Зарегистрирован: 28.07.2008
- Большой файл стилей А как насчёт разбиения его на более мелкие?
Комментарий #24 написал: masterok (27 октября 2008 04:25)
Фото

Группа: Посетители
Комментариев: 3
Публикаций: 0
Репутация: 0 Зарегистрирован: 5.10.2008
Скажите пожалуйста, а позиционирование блоков желательно задавать относительно левого края окна браузера, чтобы не зависеть от размера экрана пользователя? Существует ли вообще такая проблема?
Комментарий #25 написал: Vallentinochka (25 декабря 2008 01:51)
Фото

Группа: Посетители
Комментариев: 2
Публикаций: 0
Репутация: 0 Зарегистрирован: 7.12.2008
Как говорил наш прапор: тема принята, зачот, а теперь марш на гауптвахту wink привет
Комментарий #26 написал: ash3n (19 января 2009 23:23)
Фото

Группа: Посетители
Комментариев: 1
Публикаций: 0
Репутация: 0 Зарегистрирован: 19.01.2009
Статья хорошая, как и все остальные.
Я вот лично, недавно как можно плотно занялся вэб-мастерингом. Все свои сайты я писал и до сих пор пишу онли html. Последний мой сайт целиком состоит из таблицы, с использованием блоков. И все хорошо, и с разрешением экрана у разных пользователей, и с браузерами. Как говорится одно другому не мешает.

п.с. а где найти определения всех тегов, вроде как целостного учебника?
Комментарий #27 написал: BoozyWoozy (3 февраля 2009 11:43)
Фото

Группа: Гости
Комментариев: 0
Публикаций: 0
Репутация: 0 Зарегистрирован: --
ash3n HTMLBOOK.RU там есть все определения тегов и примеры их использования.
Комментарий #28 написал: k3 (11 февраля 2009 18:43)
Фото

Группа: Гости
Комментариев: 0
Публикаций: 0
Репутация: 0 Зарегистрирован: --
Писец какой развернутый анализ.

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.
Подписаться на канал RSS Добавить сайт в закладки
«    Июль 2010    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2010 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design © 2010
Valid XHTML 1.0 Transitional Правильный CSS!