1. Куча / Говнокод #2942

    +51.4

    1. 01
    2. 02
    3. 03
    4. 04
    5. 05
    6. 06
    7. 07
    8. 08
    9. 09
    10. 10
    11. 11
    12. 12
    13. 13
    14. 14
    .....
    <table width=100% border=1>
    <colgroup .....>
    .....
    <tr>
      <td colspan=2>(тут шапка)</td>
    </tr>
    <tr>
      <td width=60% colspan>(слева)</td>
      <td width=40% colspan>(справа)</td>
    </tr>
    .....
    </table> 
    .....

    Нету раздела html, поэтому решил наговнокодить тут :) Будет ли это говнокодом если верстать сайты так? Вообщем за и против div'ой и табличной верстки.. примеры данного куска с оптимальным содержанием..

    Запостил: antigovnokoder, 06 Апреля 2010

    Комментарии (98) RSS

    • перенес в Кучу
      Ответить
    • mail.ru и google.com сверстаны таблицами
      Ответить
      • ну они и css в отдельный файл не выносят.. не значет же что они правы?
        Ответить
      • сказал как отрезал .. теперь под них равняться будем?
        Ответить
        • имхо там индусы хорошо верстают.. нам до них далеко, почему бы и не равняться на них?
          Ответить
    • HolyWar detected.
      Ответить
    • Попробуй еще image map-ами верстать ))
      Ответить
    • Никогда не скажешь наперед что наверняка(!) подойдет при верстке нового проекта ) у каждого свои предпочтения.
      Нужна простота - используй таблицы, нужна красота - используй дивы
      Ответить
      • что нельзя сверстать таблицами что можно сверстать дивами(я конкретно про "шаблон" сайта).. примерчик пжлста :)
        Ответить
        • показать все, что скрыто<style type="text/css">
          #center{
          width:200px;
          height:200px;
          background:#333;
          color: #fff;
          position:absolute;
          margin: -100px 0 0 -100px;
          left:50%;
          top:50%;
          }
          </style>
          <div id="center">Попробуй сделать оптимальнее на таблах</div>

          и ничего лишнего :P
          Ответить
          • А попробуй сделать дивами

            <table cellspacing="2" cellpadding="2" border="1" width="150">
            <tr>
            <td rowspan="2"> </td>
            <td colspan="2"> </td>
            </tr>
            <tr>
            <td> </td>
            <td rowspan="2"> </td>
            </tr>
            <tr>
            <td colspan="2"> </td>
            </tr>
            </table>

            и ничего лишнего :P

            P.S. Это лучше скопировать и посмотреть как выглядит
            Ответить
            • А чего я такой сложный пример привел. На таблицах, например, проще сделать три колонки одинаковой высоты.
              Ответить
              • три колонки одинаковой высоты - здрасте оформление элементов внутри div :P
                Ответить
            • Сложно опровергнуть этот факт. Хоть я частенько и верстаю div'ами, но в данном примере ой как сильно прийдется попрыгать с бубном чтобы сверстать такое на дивах, да еще и компактнее.. да потом еще и хаки для разных браузеров мастерить.. :_) Кстати в отличае от примера выше - данный кусок разметки как раз может представлять из себя "шаблон" сайта. Таблицы рулят :)
              Ответить
            • ненужный каркаЗ .. пользователь запариться ждать чтобы увидеть, чтоже тама в самой правой колонке находиться... пжлста, не выносите в нее меню ) использовать исключительно для размещении рекламы
              Ответить
              • можно использовать colgroup - будет грузиться сверху вниз, если же хочешь чтобы правая колонка грузилась первой - используй вложенный внутрь тот же div, он и нужен для декоративности..
                Ответить
          • <style>
            td{
            color: #fff;
            background:#333;
            }
            </style>
            <table height=100% align=center>
            <tr><td><table width=200 height=200><tr><td>Делать маленький код оптимальнее безполезно</td></tr></table></td></tr>
            </table>


            Как ниже грамотно заметили, сложную разметку проще сделать таблицами + она будет стабильно отображаться во всех браузерах одинаково без танцев с бубнами. Согласен с lener, что для маленькой декаративной разметки приятнее использовать div, но вопрос был именно об "основной" разметке сайта как в сабже.
            Ответить
    • верстка это все фигня, links форева!
      Ответить
    • <header>шапка</header>
      <nav>меню</nav>
      <section>контент</section>
      <footer>подвал</footer>
      Ответить
      • это ведь хтмл5, который еще в разработке
        Ответить
        • Да. Только лучше бы они реализовали что-то типа jQuery UI на уровне браузера. А то все равно придется городить тонны кода, чтобы вываливался красивый модальный диалог или чтобы меню забавно выезжало, да еще и многоуровневым было.
          Ответить
          • Угу, давайте превратим стандарт в помойку с ништяками и приколами.
            Ответить
          • свистоперделки не нужны
            Ответить
        • А что мешает использовать эти теги уже сейчас?
          Ответить
      • скорее бы html5 !!! :P
        Ответить
    • Хороший, годный холивар =) ОПу советую забить в гугль "плюсы и минусы блочной вёрстки". Если бы он сделал это раньше, он бы уже успел найти массу всего. Хотя да, живое общение приятнее =)
      Ответить
      • для живого общения и создавалось
        Ответить
      • Как верно заметили выше - именно для живого общения, тем более название сайта способствует обсуждению данной темы :)
        Ответить
    • Я сам использую комбинированную верстку, где как проще и удобней там так и верстаю. Как правило скелет сайта таблица (см. комментарий murz) а в ней дивы, простои удобно.

      Главное не фанатеть от чего-то одного, а то я видел, когда список товаров (чистой воды таблица) выводился дивами.
      Ответить
      • Согласен на 100% смешанная верстка рулит. Причем я также склоняюсь к каркасу из таблиц а в ней div'ы. Ведь никто не запрещает при этом также как и в дивной верстке выносить максимум в css. Разметка получается более структурированной и наглядной.. Противники таблиц чаще всего просто не умеют их готовить, поэтому верстают тем чем умеют :)
        P.S.: Очень хочу чтобы меня в этом кто-нибудь переубедил. Ведь типа же модно верстать div'ами..
        Ответить
        • Один из основных минусов таблиц — задержка рендера. Поэтому использовать одну главную родительскую таблицу глупо.
          Ответить
          • Сечас сразу не вспомню, но там есть такая штука.
            Рендер идет сразу же по мере получения кода разметки, но в этом случае ширина столбцов будет либо конкретно определена заранее, либо по первой строке.
            Ответить
          • Еще тэг COLS помогает ускорить рендер.
            http://htmlbook.ru/html/table.html
            Ответить
            • Т.е. параметр. А есть еще тэг COL внутри таблицы.
              Ответить
          • я же говорил, вы просто готовить их не умеете ;) не успел подсказать про colgroup, опередили..
            Ответить
          • ыы "задержка рендера" "медленно грузятся" - услышал звон, да не знает где он..
            Ответить
          • нормальным браузерам это фиолетово
            Ответить
      • Да, не спорю, когда обычный список с просмотром характеристик в строку - это чистой воды таблица .. но разделить на несколько колонок, и при этом не награмождать кода при выводе, имхо уместнее тогда использовать div с соответствующими настройками css
        Ответить
        • Ну тогда покажите на div'ах то, что привел в пример(как раз похоже на карказ страницы) murz. И посмотрим где удобнее и качественнее..
          Ответить
          • при чем тут каркас? вчитайтесь
            Ответить
            • вчитался..) код на таблицах который привел murz весьма подхоит под простенький каркас сайта. Попробуйте сверстать такой же на div. divы -это хорошо, но не для каркаса сайта..
              Ответить
              • ну и кому нужен такой каркас? .. более чем в 99% случаев будет использован стандартный подход в разбиение на колонку слева и основную часть справа ... а шаманить в таблицами никоме не нужные вещи .. извините
                Ответить
                • если нужно 40% справа и 60% слева - покажите код на div'е который будет оптимальнее чем таблицы? и будет работать обсалютно во всех браузерах без всяких хаков )
                  Ответить
                  • стили
                    <style>
                    div {display: block; border:1px solid #000;}
                    #sidebar{ float: left; width: 60%;}
                    #content{ margin-left: 60%;}
                    </style>

                    разметка
                    <div id="header">(тут шапка)</div>
                    <div id="sidebar">(слева)</div>
                    <div id="content">(справа)</div>
                    Ответить
                    • хм.. беру свои слова обратно.. на таблицах хоть и меньше но не так красиво как на дивах+на дивах браузер кешировать может css...

                      <table width=100%>
                      <tr><td>(тут шапка)</td></tr>
                      <tr><td width=40%>(слева)</td></tr>
                      <tr><td width=60%>(справа)</td></tr>
                      </tr></table>
                      Ответить
                    • теперь осталось выяснить где же минусы табличной верстки.. примеры показывают что они полностью взаимозаменяемы.. практически с одинаковой длиной кода..
                      Ответить
                      • Разница в том что содержимое див появляется помере заргузки, а содежимое таблицы не появится пока не загрузит все.
                        Див кода меньше, даже если css кода было бы больше чем html оно бы всеравно грузилась быстрее, css двигло обрабатывает css быстрее чем html дмигло - хтмл + css кэштруется, html - нет, по поводу нестабильности ДИВов - дело в руках.
                        Ответить
                      • к томуже говнобыдлокодеры может и незнаю/незамечают в силу недостатка опыта, но это реально заметно - приятнее, стабильнее, ровнее, быстрее грузится сайт с хорошим валидным кодом без ничего лишнего...
                        Ответить
                    • ага, а где еще куча хаков для РЕАЛЬНОЙ верстки?
                      Ответить
                      • нафиг для таблиц хаки?? или вы про "нестабильные" дивы? :)
                        Ответить
        • для этого и создавались таблицы
          Ответить
      • Хм, а я, наоборот, каркас верстаю дивами, а внутри уже и таблицами не брезгую. Но секрет фирмы прост: в своё время от избытка свободного времени (тогда я ещё не устроился на работу, и времени на задротство было много =) ) я досконально раскурил эту тему и наплясался с бубном. Всем, кому надо срочно, советую просто не забивать голову и делать таблицами.
        Ответить
    • нынче вебдваноль популярен среди продвинутых девелоперов (ака быдлокодерс), использование где попало и как попало, высраный динамический контент и т.д
      Ответить
      • +1 за старые добрые таблицы :) ну я не против веб 2.0.. тоже нужен, просто не стоит с ним перебарщивать (делать весь сайт на div'ах и т.д.)
        Ответить
    • надо верстать таблицами!
      Ответить
    • гы.. пока спорил за сторону каркас из таблиц - каркас из дивов самому начал больше нравиться.. хоть и не вижу в таблицах минусов : /
      P.S.: до сих пор не считаю говнокодом каркас из таблиц ;)
      Ответить
      • а еще добавь к этому возможность управления последовательностью загрузки контента .. возможно еще больше понравяться
        Ответить
        • не знаю где это может пригодиться, но звучит как в плюс в сторону блочной верстки.. :) можно пример? нельзя ли это будет использовать в стилях таблицы?
          Ответить
        • lener, ты случаем не бородатый индус из microsoft ??? )))
          Ответить
          • XD .. в отличии от некоторых, я не стремлюсь проверить полученный результат в IE ... тем более что с выпуском 9го IE microsoft заверяет что мы все запаем от счастья =)
            Ответить
            • а зря.. IE пользуются дофига пользователей.. не меньше чем FF..
              Ответить
          • пусть фотки выложит свои!
            Ответить
    • когда голосолка будет на сайте?? хочу голосовалку! :P
      Ответить
    • <!DOCTYPE html>
      <html>
      <head>
      <!--[if IE]>
      <script>
      document.createElement('header');
      document.createElement('aside');
      document.createElement('article');
      </script>
      <![endif]-->
      <style>
      header, article, aside, {display: block; border:1px solid #000;}
      article{ border:1px solid #000; float: left; width: 40%; }
      aside{ margin-left: 40%;}
      </style>
      </head>
      <body>
      <header>(тут шапка)</header>
      <article>(слева)</article>
      <aside>(справа)</aside>
      </body>
      </html>

      Немного погуглив набросал тоже самое на html5, хоть он и в разработке, но браузеры его поддерживают(не считая небольшой финт для IE6). Говнокод? Выглядит осмысленнее чем куча div'ов.. Без хака для IE - меньше даже чем на таблицах...
      Ответить
      • И опять костыли.
        От них никогда не избавишься, пока не выкинешь.
        Ответить
    • Я тоже за комбинрованную верстку!

      <header>
      <table cellspacing="2" cellpadding="2" border="1" width="150">
      <tr>
      <td colspan="2"> </td>
      </tr>
      <tr>
      <td> <div style="padding-left:10px"> <font face="Arial" size="5"> Новости </font></div> </td>
      <td> <img src="spacer.gif" width="200" /> </td>
      </tr>
      </table>
      </header>

      // ыыы
      Ответить
      • жжешь :)
        Ответить
      • комбинация не удалась :P
        Ответить
        • он говнокодить просто умеет :P
          Ответить
          • XD +1 опыт .. что сказать
            Ответить
            • не удачный пример просто смешанной верстки.. тут лучше вообще без div'ов.. ну можно и только на дивах.. тут особо смешивать нечего.. ;) Хотя говнокодом назвать сложно.. будет же работать хехе..
              Ответить
              • <font face="Arial" size="5">

                такое сейчас только готовый инструментарий шепает, не руками же такое писать?
                Ответить
                • Ну фонт еще оставлен для совместимости.. его только в html 5 уберут. В примере канешн жесть...))) Имхо даже когда этот элемент был популярен его таким макаром никто не юзал..
                  Ответить
                • шепает = шлепает
                  Ответить

    Добавить комментарий