Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > дивы и таблицы


Автор: alexburzak 20.4.2007, 18:23
Слышал об извечном споре как лучше верстать сайты с помощью дивов или таблиц.
Хотелось бы послушать Уважаемых форумчан здесь, кто , что предпочитает и почему?
Можно с примерами.

Автор: mr.Anderson 20.4.2007, 20:58
Предпочитаю таблицы, потому как стили и иже с ними работают не во всех браузерах. Т.е. не кроссплатформенны ни стили, ни слои. Посему, имхо, таблицы лучше. Да и проще, возни меньше с выравниванием.

Автор: Vaulter 20.4.2007, 22:27
геммороя канеш с дивами многА...
ну а куда деваться? стандартов охота! smile smile  smile 

Автор: DezmASter 21.4.2007, 01:41
Преренесено из "Веб-дизайна"

Автор: Mymik 21.4.2007, 08:43
Отдел для http://forum.vingrad.ru/forum/holy-wars.html в отдельном месте. Такой вопрос уже обсуждали http://forum.vingrad.ru/topic-54435/hl/%25D1%2581%25D0%25BB%25D0%25BE%25D0%25B8/index.html <<-- может быть что интересного для себя найдешь.

Как по мне. Так div это как новое слово в Html верстке. Т.е. были таблицы, были слабые CSS. Теперь появился CSS2.0 И народ начинает его осваивать. Чем тебе пользоваться (писать под DOS или идти под windows (аллегория)) решать тебе. Все равно div'ами все не сверстаешь. Так что нужно знать как слои, так и таблицы.

Автор: alexburzak 21.4.2007, 12:24
Сори , не видел раздела "регилиозные войны".
Спасибо всем за участие!
Как всегда в таких вопросах золотая середина должна быть во всем.
Отделное спасибо Mymik'у, за ссылки, внимательно просмотрел. smile 

Автор: Georgio 21.4.2007, 12:49
Mymik, согласен. Но все=же с дивами никакого гемороя нет. И еще, где же это не кроссбраузерная верстка? В каких браузерах некорректно отображается? И что конкретно? Давайте на примерах

Автор: mr.Anderson 21.4.2007, 13:49
Конкретный пример (скрин или код) привести не могу, т.к. посеял сайт. Но было такое, что создавал сайт (через Dreamweaver) со слоями. В IE все слои были на своих местах, а в FireFox и Opera половина слоев (в том числе горизонтальное меню сверху) съезжали вниз, и съезжали намного. Пришлось переделывать без слоев.

Автор: Mymik 21.4.2007, 21:05
smile  smile  smile  Holy War !!!  smile  smile  smile 

Georgio, я не говорил, что она не кроссбраузерная. Личное мой выбор -- верстка div'ами, но когда данные просто необходимо выводить таблицам... что ж... прийдется выводить таблицами.

Если у кого-то не получается сделать кроссбраузерное... (хотя плохо упрекать других людей) у них просто мало знаний в CSS. Я версткой (был html-верстальщиком) занимался целый год. И ни единого раза мне не попался дизайн, который нельзя было сверстать div'ами

Автор: Georgio 22.4.2007, 08:42
Mymik[/BЯ прсот не вставил еще одну цитату, то, что изрек [B]mr.Anderson.
Так что второе предложение не к тебе относилось  smile 

mr.Anderson, пока нет конкретного примера, разговор бесполезен. У меня тоже были проблемы с дивами. Почти все они решаются, если корректно написать код. Все оформление вынести в CSS из html (color ы и т.п.), прописать обязательно px, % и т.п. (часто не прописывают в CSS, а зря.

Вот что пока мне не понятно (и пока никто не ответил), так это float в Опере, и почему получается с ним такая загогулина, какая получается (в этом разделе несколько тем вниз, она там лежит без ответа)

И все же, согласен, нужно верстать и тем, и другим. Таблицы имеют свое назначение, Дивы - свое.
Я посмотрю, как народ будет делать таблицами разные там линии, наложения и т.д.
И я посмотрю, как народ будет приходно-расходную книгу (например) загонять в дивы. В разных случаях удобнее пользоваться разными инструментами.
Все  smile 

Автор: Octane 18.5.2007, 20:20
Ыыыы ))) Верстка только дивами, верстка только таблицами...... 

Моё мнение такое: для разметки страницы нужно пользоватся ТОЛЬКО дивами, а табличный материал выводить естественно в таблицах... притом в тегах хтмл кода должны присутствовать только ссылки на классы, а все оформление, включая разметку страницы, должно находится в ксс.

например:

Верстка таблицами:
Код

<html>
<head>
<title>Div vs Table</title>
</head>
<body>

    <table width="100%" border="1" cellpadding="10" cellspacing="0">
        <tr>
            <td colspan="3" height="120px">Содержимое заголовка страницы</td>
        </tr>
        <tr>
            <td width="20%">Содержимое левого меню</td>
            <td width="60%">Основное содержимое страницы</td>
            <td width="20%">Содержимое правого меню</td>
        </tr>
    </table>
    
</body>
</html>

В этом случае старница будет показана после загрузки всего контента таблицы

Не в коем случае нельзя помещать всю страницу в таблицу, при низоскростном доступе к инету у пользователя будет вызывать отрицательное ощущение белый экран, ведь старница целиком засунутая в таблицу отрисуется только после 100% загрузки ее контента (не считая картинок). 


Верстка дивами:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Div vs Table</title>
<style type="text/css" media="screen">
.page_header {
    position: absolute;
    top: 0;
    left: 0;
    height: 120px;
    width: 100%;
    background: #6699CC;
}
.page_menu {
    position: absolute;
    top: 120px;
    min-height: 300px;
    width: 200px;
    background: #99CC33;
}
#menu_left {
    left: 0px;
}
#menu_right {
    right: 0px;
}
.page_content {
    position: absolute;
    top: 120px;
    left: 200px;
    right: 200px;
    min-height: 300px;
    background: #CCCCCC;
}
</style>
</head>
<body>

    <div class="page_header">Содержимое заголовка страницы</div>

    <div class="page_content">Основное содержимое страницы</div>

    <div class="page_menu" id="menu_left">Содержимое левого меню</div>
    
    <div class="page_menu" id="menu_right">Содержимое правого меню</div>

</body>
</html>



В данном примере страница будет загружатся по мере загрузки контейнеров, первым будет показан заголовок, потом основное содержимое (как правило оно представляет собой текст и весит намного меньше боковых панелей), а затем левая и правая панели со фсякими баннерами, счетчикми, календарями и прочим... причем вся разметка страницы осуществляется на уровне ксс и если по каким либо причинам браузер не загрузит эту таблицу стилей, то читабельность сайт н е потеряется, информация будет выведена в таком порядке как в хтмл коде со стандартным форматирование браузера...

согласен что с дивами заморочек больше, но и возможный эффект от их использования намного превосходит таблицы, но это не говорит о том что нужно извращатся и табличную информацию тоже запихивать  в дивы, хотя это возможно smile

Лучший вариан это делать разметку страницы блоками и по возможно использовать как можно меньше таблиц...

А для тех кто говорит что у них дивы в бравзерах по разному отображаются, ужазывайте единицы измерения px,mm и т.д. а также доктайп в начале документа, хотя это не избавит от всех проблем потому что не все к сожалению бравзеры одинково отображаю не то уш что дивы но и таблицы иногда...

А еще совет не в тему конечно, но фсе же)) как можно больше рисунков нужно описывать через ксс background: url(); так как они будут загружатся в последнюю очередь, тоесть пользователь уже сможет приступить к поиску информации на вашем сайте, а фоновые рисунки в зависимости от скорости коннекта будут постепенно подгружатся...

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)