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

Реферальная программа Мегаплана


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

#1 a_dos

a_dos
  • Пользователь
  • 99 сообщений
  • Репутация: 1
0

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

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

 

 

  • 0

#2 admin

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

Отправлено 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


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