Перейти к содержимому



Что такое блочная и табличная верстка?

#1 a_dos
a_dos
  • Неактивные
  • 99 сообщений
  • Репутация: 1
0

Отправлено 24 Январь 2009 - 15:18

Что такое блочная и табличная верстка?

 

 

  • 0

#2 admin
admin
  • Пользователь PRO
  • 5 275 сообщений
  • Репутация: 56

Отправлено 24 Январь 2009 - 15:25

Принцип блочной верстки, это когода создают div'ы и указывают для них такие параметры как фоновый цвет/рисуток, размеры, положение на странице, а табличная, это когда делают таблицу с невидимым контуром, и для ячеек прописывают то же самое, что и для дивов в блочной верстке
  • 0

#3 ZiTosS
ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 26 Январь 2009 - 14:37

Моё понимание вёрстки

Табличной вёрстки как таковой вообще нету :)
Таблицы в HTML создавались не для форматирования целостности страницы, а для простого отображения таблиц на страницах сайта. Но кому-то пришло в голову использовать таблицы для разграничения содержимого на странице. Почему табличная вёрстка считается плохим тоном?! Да потому что HTML сделан так, что пока всё содержимое таблицы не загрузится, она не отобразится на странице. А блоки в этом и хороши, что каждую ячейку таблицы можно представить отдельным блоком ;)

Табличная вёрстка менее гибка в отличии от Блочной вёрстки. Хотя есть возможность объединения ячеек для создания единой картины. Её чаще используют на сайтах со структурным содержимым, где очень много ссылок и их надо отделить друг от друга. Верстать блоками в данном случае будет просто маразмом. Слишком много допускается ошибок в вёрстке блоками, потому что очень много изюминок которые нужно понять и принять.

Блочная вёрстка, это совокупность блочных элементов на странице таких как <p>, <div>, <layer> и др. Расположение блоков зависит от нужд создателя сайта. Их можно расположить хоть в хаотическом порядке.

Главное отличие блоков от таблиц. Блоки имеют абсолютное позиционирование, с позицией наложения друг на друга

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет атрибут z-index.


Вообще считаю блочную вёрстку сложно освоить не практикуясь, лучше начать с изучения поведения разными браузерами по отношению к блокам. Хотяб посмотреть на то, что когда блоки не убираются в ширину, последний блок сползает под остальные, тем самым выдавая неправильное за действительное.

А вообще по блочным элементам я уже статью писал Параграфы и блоки в HTML
  • 0

#4 Вито
Вито
  • Неактивные
  • 10 сообщений
  • Репутация: 0

Отправлено 06 Февраль 2009 - 07:36

a_dos! Смело изучайте блочную вёрстку, она не сложней таблиц, это только на первый взляд сложно. Для наглядности посмотрите код таблицы из скольки тегов она состоит:
<table>
 <tr>
  <td>&nbsp </td>
 </tr>
</table>
И это для одного столбца и одной строки " по русски говоря ".
Этот же результат вы можете получить только одной парой тегов и использования стиля CSS.
<div>&nbsp</div>
Ну, а если вы будете использовать кучу таблиц, а потом ещё обьединять ячейки colspan и rowspan , то если уж вы не поймёте стили, с этим вы точно замудохаетесь.
  • 0

#5 Bender
Bender
  • Неактивные
  • 712 сообщений
  • Репутация: 0

Отправлено 06 Февраль 2009 - 10:38

Ну, а если вы будете использовать кучу таблиц, а потом ещё обьединять ячейки colspan и rowspan , то если уж вы не поймёте стили, с этим вы точно замудохаетесь.
Нарезать таблицы можно в Image Ready
  • 0

#6 ZiTosS
ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 06 Февраль 2009 - 10:42

Bender, здесь идёт речь про оформление, а не вёрстку.
Попробуй-ка нарезать таблицу, а потом 1000 ячеек задать свой цвет. Вот я посмотрю как ты это через Image Ready сделаешь...
  • 0

#7 Xap
Xap
  • Неактивные
  • 1 520 сообщений
  • Репутация: 0

Отправлено 06 Февраль 2009 - 11:35

По-моему смешанная структура из блочной и табличной верстки наиболее актуальна.
  • 0

#8 Bender
Bender
  • Неактивные
  • 712 сообщений
  • Репутация: 0

Отправлено 06 Февраль 2009 - 12:04

Bender, здесь идёт речь про оформление, а не вёрстку.
Попробуй-ка нарезать таблицу, а потом 1000 ячеек задать свой цвет. Вот я посмотрю как ты это через Image Ready сделаешь...

Нарежу в Image Ready и пропишу фон в дриме :unsure:
Что-то я не понял к чему этот вопрос. Что на дивной это же сделать намного легче?
  • 0

#9 Xander
Xander
  • Неактивные
  • 59 сообщений
  • Репутация: 0

Отправлено 06 Февраль 2009 - 12:40

Что на дивной это же сделать намного легче?

И это тоже... Просто кода будет меньше...
  • 0

#10 ZiTosS
ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 06 Февраль 2009 - 22:49

Нарежу в Image Ready и пропишу фон в дриме

Ну я просто имел ввиду, то что код сократится во много раз и структура будет более понятной.

Просто на дивной сложнее запутаться в коде, чем в таблице.
Глядя не на таблицу, а на код, сразу не представить как она выглядит, и как её нудно оформить(хотя я уже к подобному привык)
  • 0

robot
robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Похожие темы
  Название темы Автор Статистика Последнее сообщение

× Быстрый вопрос
Пользователь месяца
Rodiola Rodiola 1-й за Август
Очков активности: 1 552 3 темы, 106 сообщений, 9 баллов репутации
Сайт: rukodelkovo.ru
ТОП самых активных за этот месяц
  • Фотография MattCutts
    #1

    MattCutts (dmitrylee.ru)
    Очков активности: 936 6 тем, 86 сообщений, 6 баллов репутации

  • Фотография Андрей WPM
    #2

    Андрей WPM (wpmaster.kz)
    Очков активности: 462 Вне конкурса за определение пользователя месяца

  • Фотография lena220678
    #3

    lena220678
    Очков активности: 43.5 2 темы, 23 сообщения, 1 балл репутации

  • Фотография Chaser
    #4

    Chaser (majento.ru)
    Очков активности: 33 1 тема, 8 сообщений, 2 балла репутации

  • Фотография BLIK
    #5

    BLIK
    Очков активности: 27 0 тем, 18 сообщений, 1 балл репутации

  • Фотография maxnik
    #6

    maxnik (konovalovpavel.ru)
    Очков активности: 27 0 тем, 9 сообщений, 2 балла репутации

  • Фотография Rodiola
    #7

    Rodiola (rukodelkovo.ru)
    Очков активности: 24 Вне конкурса за определение пользователя месяца

  • Фотография Constantine
    #8

    Constantine (constantine.video.blog)
    Очков активности: 19.5 2 темы, 7 сообщений, 1 балл репутации

  • Фотография Megoydagi
    #9

    Megoydagi (24ho.ru)
    Очков активности: 18 1 тема, 9 сообщений, 1 балл репутации

  • Фотография NataliaAntalia
    #10

    NataliaAntalia (zdorovemedicina.ru)
    Очков активности: 15 0 тем, 10 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 27.08.2019
  • Яндекс выдача: 20.09.2019
Топ 5 участников по репутации

Оформление форума – IPBSkins.ru