Skip to content

Instantly share code, notes, and snippets.

Created August 30, 2017 10:03
Show Gist options
  • Save anonymous/dba81c8e6e0ab7985b8d3224c4888d82 to your computer and use it in GitHub Desktop.
Save anonymous/dba81c8e6e0ab7985b8d3224c4888d82 to your computer and use it in GitHub Desktop.
Верстка таблиц div

Верстка таблиц div


Верстка таблиц div



Верстка таблицами или блоками div?
Табличная верстка блоками
HTML Table Generator


























DIV залазиет под картинку - HTML, CSS Здравствуйте уважаемые! Вот решил обратиться к вам за помощью по скольку у самого не хватает квалификации решить данную проблему. Div верстка - HTML, CSS Привет Народ! Скажите пожалуйста, что значит div тута? В CSS пока вообще не секу почти. Пишу сайт под MODX, возникла проблема. С помощью div сделал, чтобы выводимая информация Верстка DIV - HTML, CSS http: Собсно поступил совет использовать генератор http: Ну вот сгенерировал начал Div верстка - HTML, CSS Здравствуйте. Макет состоит из шапки, 2-х колонок и подвала. Одна колонка под меню другая под основной текст. Div верстка - HTML, CSS Доброго времени суток. Господа - знающие, помогите! Проблема следующая - есть некая HTML страница,к примеру на ней присутствуют Нужно сделать такую штуку Есть контейнер, в нем три блока один под одним: Блоги программистов и сисадминов. Ссылки сообщества Социальные группы. Метки нет Все метки. Помогите пожалуйста мне сделать верстку таблицей. Я хочу, что б контент картинки выводились в три колоки. Вот так картинка но у меня не получается это сделать. Ниже приведен код, скажите что не правильно, что нужно исправить? Ответ на вопрос Верстка таблицы на div вы можете найти в этих темах: После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума. Как убрать вот эти пробелы? Добавлено через 16 минут а вобще вот валидный код под 3 колонки, если вам нужна одинаковая ширина их сотрите вообще CSS 1 2 3. Я вам еще на ВИО дал ответ на этот вопрос. Еще ссылки по теме: Искать еще темы с ответами Или воспользуйтесь поиском по форуму: Реклама - Обратная связь. Мы во Vkontakte Мы в Facebook HTML, CSS CyberForum. Верстка таблицы на div - HTML, CSS Ответов 9 Метки нет Все метки Помогите пожалуйста мне сделать верстку таблицей. Добавлено через 16 минут а вобще вот валидный код под 3 колонки, если вам нужна одинаковая ширина их сотрите вообще CSS. КиберФорум - форум программистов, компьютерный форум, программирование.


Переходим с TABLE’ичной верстки на DIV’овую


Основная проблема верстальщиков таблицами заключается в том что, они суют эти таблицы , куда ни попадя и, уже чуть ли не пробелы между словами создают за счет заключения слов в отдельные таблицы лежащие внутри предложения, заключенного в таблицу, лежащую внутри абзаца, заключенного в таблицу, лежащую. Возможно, я самый первый, кого это нагромождение таблиц стало раздражать. По крайней мере, я писал о нем еще в году см. Правила плохого тона , когда споров между сторонниками табличной и безтабличной верстки не было и в помине. У верстальщиков блоками проблема иная: Они утверждают что, верстают за счет CSS, но CSS управляет не только внешним видом блоков , но и внешним видом таблиц и, таким образом, можно утверждать что, табличная верстка тоже, за счет CSS делается. Они утверждают что, их код компактней, а потому быстрее грузится, но если посмотреть на применяемые ими растяжки, хаки и прочие хитрости, используемые для того чтобы уподобить блоки таблицам , становятся очевидными три вещи: Дизайн блоками держится на честном слове. С применением другого браузера, он расползется, как ему вздумается. Откуда весь сыр-бор пошел? Если уж люди так стремятся имитировать таблицы , почему бы им просто не применить эти самые таблицы? Это может показаться странным: Считается что, мобильные устройства плохо понимают таблицы. Не знаю, так ли это. Я с телефона в интернет не лазаю. Мне не интересно изучать документацию по PHP через лупу. Кроме того, на моем телефоне не установлен сервер Апачь с поддержкой SQL баз для отработки скриптов, которые приходят мне в голову по мере чтения документации это все, конечно же, шутка, на самом деле, на моем телефоне, конечно же, установлен SQL сервер ;. Именно с расчетом на это и делаются блоки. Не знаю, так ли это, или нет, а только все это только до поры, до времени. Придет время, когда даже самые дешевые телефоны смогут корректно отображать даже самые мудреные таблицы , а параллельно, в какой-нибудь спецификации, типа HTML 4. Так же, считается что, блочный дизайн быстрее отображается, так как отображение таблицы происходит только после загрузки всей таблицы. В алгоритме фиксированного вывода ширина каждого столбца определяется так: Если ячейка занимает более одного столбца, ширина разделяется на эти столбцы. Любые оставшиеся столбцы равномерно разделяют оставшееся горизонтальное пространство таблицы минус рамки и заполнение ячеек. При таком методе ПА может начать вывод таблицы сразу, как только будет получен весь первый ряд. Ячейки в последующих рядах не влияют на ширину таблицы. Выходит что, верстка блоками ориентирована на некие гипотетические несовершенные устройства, которые пока еще не в полной мере соответствуют спецификациям HTML и CSS. Во всем остальном это все те же яйца, только вид с боку. На данных гипотетических устройствах верстка блоками позволяет увидеть удобочитаемый текст, лишенный какого либо дизайна. Любопытно было бы увидеть, чем этот обезображенный внешний вид лучше обезображенного внешнего вида табличной верстки на этом же устройстве. Какая верстка лучше, блочная или табличная? Я не собираюсь затевать новый спор о том, какая верстка лучше, так как приемлемость той или иной верстки в конкретном случае зависит от: Не стоит прогибаться под изменчивый мир. Пусть лучше он прогнется под нас. Примеры решений табличной и блочной верстки. Я, по большому счету, не понимаю, в чем проблема. Согласен, так вкладывать таблицы друг в друга плохо: Пример табличной верстки матрешками Но можно использовать colspan и rowspan: Пример табличной верстки 1 таблицей Однако, так еще лучше: Пример табличной верстки 1 таблицей Но может так: Пример минимальной табличной верстки Или так: Пример комбинированной верстки Еще в году я писал о вариациях меню см. Всевозможные оглавления и между делом, сделал так: При желании, можно добавить еще колонку. Пример блочной верстки или. Пример блочной верстки Лично мне все равно, как верстать. Но заказчик ориентируется на браузеры Геко, Опера, ИЕ. Самым надежным и бесхитростным решением является табличная и смешанная верстка. Текстовые браузеры так же, нормально понимают таблицы только показывают, как обычный текст. Я не знаю, в какой ситуации блоки воспринимаются лучше, и не вижу причин за них цепляться. Смешанный вариант с моей точки зрения оптимален. Однако вы можете выбирать другие. Последний раз мне пришлось верстать блоками осенью года. Однажды, думаю, летом года я сверстал очередной сайт блоками. Заказчик открыл его на каком-то мобильном устройстве и написал, что сайт весь вытянулся в линию. Я ответил, что так и должно быть, что на мобильных устройствах таким образом удается избежать горизонтальной прокрутки. Но заказчик сказал, что лучше пусть будет горизонтальная прокрутка, но сайт везде должен выглядеть одинаково Второй случай с точностью наоборот: В результате при разрешении в пикселя, которое было у простых смертных, сайт расползался Не могу ж я следить за каждой новой страницей, которую создает себе владелец сверстанного мной сайта, чтоб ее не расперли больше положенного. Не могу я и гарантировать то, что открыв свой сайт на мобилке и обнаружив вытягивание его в линию, владелец не начнет требовать переделывать все так, чтоб не вытягивалось. Делать блочные сайты фиксированной ширины тоже не метод — кто-то воткнет широченный рисунок или прайс в пол сотни колонок, и они вылезут в пустоту Когда сайт достается детям, им лучше дать что-то цельнолитое, да еще и круглое, чтоб отламывать было нечего. Вобщем, для себя можно верстать по всякому. Но для клентов, которые не просят именно блоками а таких у меня просто небыло, так как те, кто понимают, что сайты бывают сверстаны таблицами или блоками, обычно делают сайты сами , я решил верстать именно таблицами смешанный вариант. Не нужно меня критиковать за то, что я сдал позиции. У меня до сих пор валяются 2 экземпляра за январь и ноябрь года, которые использовались при обсуждении проектов. Кому любопытно, могут скачать и посмотреть: С приходом мобильных устройств в интернет такая верстка стала приобретать популярность. Теперь у блочной верстки и без меня хватает сторонников, так что, я могу смело идти на пенсию: В подтверждение своих слов, приведу 4 сайта созданных весной-осенью года из более ранних в неизменном виде остался только 2, но они сделаны смешаной версткой: Ну и, конечно же, AJAX использовался на сайте, которого больше не существует, работал только в ИЕ; универсальный вариант описан тут и применен в форме заявки в м, хотя первые попытки придумать аякс предпринимались мной в внедряемое плавающее оглавление но статьи эти тогда распространялись рассылкой. Технологии создавались и пропагандировались разными людьми и, в итоге, приобрели современный вид, завоевали популярность. Не ограничивайтесь использованием чужих разработок. Возможно вы станите родоначальником новых стандартов. Для тех, кто осилил мое лирическое отступление и дочитал до этого места, не Идиология размещения блоков именно так, предполагает что, посетитель на медленном соединении, вначале увидит загруженный текст и сможет читать то, зачем пришел, не дожидаясь, пока загрузится все остальное в классическом случае последовательного размещения, вначале левого блока, потом центра и за ним правого, до загрузки основного текста должен был бы загрузиться левый блок. Версия для печати Верстка блоками и версия для печати В давние времена версия для печати предполагала наличие двух документов с разным оформлением. К примеру, основная страница http: При запросе страницы по стандартному адресу, серверный скрипт приклеивал к ней голову, хвост и меню если угодно, при наличии не только блока с меню слева, но и блока новостей справа, он приклеивал к странице лапы. По этой причине, создание версий для печати было удобно поручить отдельному скрипту, закрытому от индексации смотрите пример тут. Иногда данную методику имеет смысл применять и сейчас как в примере, где, помимо всего прочего, не распечатываемая интерактивная карта, заменяется пригодным для печати статическим рисунком. Но очень часто так можно было бы поступить и в указанном примере, если б не желание, сделать основную версию покаппактней , двойную версию удобно реализовать с помощью блоков. Для этого создается две таблицы стилей: В принтерной версии для таких элементов, как блок меню и прочая, ставится display: Так же, стоит поставить шрифт с засечками, указав размер в пунктах, убрать ненужные отступы и, возможно, показать адреса ссылок a: Вобщем, открывайте всю ту же блочная верстка в духе WEB 2. Смотрите код, думаю, разберетесь без лишних комментариев. Верстка таблицами и версия для печати Как легко, оказывается, используя блочную верстку, сделать версию для печати! Не нужно никаких серверных скриптов. Но в табличной верстке это делается не менее легко. Задайте ячейкам классы, вынесите определение классов в стили и сделайте стили версии для печати. Верстка таблицами с версией для печати к вашим услугам. В данном случае блочная верстка опять не имеет никаких преимуществ перед табличной. Общие выводы о верстке блоками и таблицами Так как же верстать? Если с утра встали на левую ногу, значит верстать блоками, если на правую, тогда, конечно, очередь табличной верстки. Ну а если всерьез, то способ верстки определяется квалификакией верстальщика, конкретной ситуацией если квалификакия позволяет верстать и так и эдак и настроением если и так и эдак позволяет верстать ситуация. По-настоящему эластичный дизайн можно сделать только таблицами. Недостаток блоков заключается именно в том, за что их хвалят: Проблема в том, что отобразившись сразу, блоки не перерисовываются, в то время, как таблица перерисовывается с каждой новой строкой и, при необходимости, ее размеры переопределяются. Я просто взял для примера один из проектов обсуждавшихся мной в году, и слегка изменил. Но блоки ведут себя именно так. А вот так выглядит стандартная табличная верстка. Как вам больше понравился бы ваш сайт на маленьком мониторе например, в КПК или нетбуке? Конечно, все блоки можно заставить перерисоваться по завершению загрузки страницы скриптами. Но в достаточно сложном макете вес такого скрипта может превысить вес самой страницы. В чем тогда выгода верстки блоками? Хороша ложка к обеду. И блоки хороши там, где уместны. Уместны ли они в вашем конкретном случае решать вам. Верстка таблицами или блоками div?


Внешний геморрой причины возникновения
Александр зверев жюльен беннето прогноз
Таблица входов и выходов
Тег h1 пример
Почему алгоритм основное понятие информатики
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment