Pull to refresh

Comments 106

Отлично! То что хотел почитать, но не доходили никак руки

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

Думал еще написать свое мнение по поводу использование таких атрибутов как summary, но решил оставить его при себе.
В таких статьях есть смысл.
Лично я не знаю нормальных верстальщиков, которые «знают все атрибуты и теги».
А судя по качеству проектов в сети этих верстальщиков просто нет в природе.

Ни на одном сайте не видел грамотно размеченных таблиц (если кто знает примеры — поделитесь).
Статью читать (и внимательно изучать) обязательно. Не только верстальщикам, но и менеджерам, чтобы знали технологии и ставили грамотные задачи исполнителям. (Иначе в сети только и будут порносайты созданные необразованными подростками.)

Давайте учить технологии и делать веб лучше, чем он есть сейчас.
да, давайте учить.
хотелось мне найти и показать сайты с грамотно размеченными таблицами, но с ходу найти не удалось. Поверьте, такие есть. Всё-таки культура растёт.
может благодаря таким "ликбезам" и растет культура-то? В этом их смысл - переучить того, кто еще не успел испортиться.
пофиг на культуру. Пару раз надо было разглыдяывать сайты в текстовом браузере.. вот где жопа :)
А что мешает за теми же целями заглянуть в первоисточники, вместо того, чтобы читать пережованные материалы?
За тем, например, что спецификации HTML и CSS больше ориентированы на разработчиков браузеров, а статьи подобные этой учат веб-разработчиков как правильно использовать возможноти, заложенные в спецификации.
UFO just landed and posted this here
А у тебя параметр нормального верстальщика это тот, кто добавляет в фотогалерею или сайт кинотеатра атрибуты и css для слепых, увеличивая размер кода? Таких, слава богу, действительно не много. По той причине, что те, кто дошли до того уровня, что бы грамотно это суметь сделать, уже думают что они делают. А не в тупую холиварят на хабре не по теме (это я о том, что ниже твориться).
С одной стороны, я согласен с тем, что такие статьи нужны. С другой стороны, я бы не судил столь категорично. Нельзя некий «общий фон» переносить на всех представителей профессии.
Ну, достаточно людей «знают все атрибуты и теги», но не многие знают когда и как их применять правильно.
поставил минус потому что для меня эта статья имеет смысл, и нормальными верстальщиками как мне кажется становятся, а не рождаются
Нормальный верстальщик верстает и обращается к справочнику, а не учит теги. Они запоминаются в процессе работы.
UFO just landed and posted this here
При верстке специализированных сайтов для слепых и слабовидящих видимо. Но этим занимаются отдельные люди и таблицы там совершенно не главная проблема. В рунете я таких сайтов не знаю.
Я заморачивался как-то давно пару раз с этим в небольших, но специализированных сайтах, но чисто для себя, потренироваться. Я действительно не думаю, что хотя бы одному посетителю, это пригодилось.
UFO just landed and posted this here
Люди со старыми и неправильными браузерами могут перейти на использование "новых и правильных", незрячие - при всём желании увидеть таблицу этого сделать не смогут. Как обычно получаем дилемму "деньги против совести". Как её разрешать - каждый решает для себя сам.
UFO just landed and posted this here
никогда не приходилось заниматься проектами для незрячих... а как представил - может и еще теги специальные есть для подобных людей?
Роджер Йохансон делает.

Не буду на ночь глядя ввязываться во флейм, скажу лишь одно: надо.
Надо, но не за 80 баксов/макет.
Лёшка, но мы-то себе уже можем позволить делать так, как считаем правильным? :-)
полностью поддерживаю, ибо горе-верстальщиков в интернете и так хватает :)
я стараюсь верстать для людей с ограниченными способностями (незрячие, с проблемами в опорно-двигательном аппарате). пусть мне за это и не доплачивают, но я делаю это для людей, которые будут пользоваться продуктами нашей студии.
UFO just landed and posted this here
This page is not Valid XHTML 1.0 Transitional!
Validation Output: 14 Errors
из этих ошибок — тег «BR» вместо «br /», и горстка div'ов вложенных в ссылки (block элемент в inline'е — очень раздражающая ошибка… IMHO)
из этих ошибок — тег «BR» вместо «br /»

Помнят руки-то :) Это понятно, моторика

Можно кстати в ссылку вложить span, для которого прописать display: block. Результат тот же, а ошибок нет :)
UFO just landed and posted this here
Да я понимаю. Просто кнопку w3c увидел, нажал, поделился результатом.
WAI-доступность на 5+
WAI это не требования, а рекомендации. Удовлетворять им нельзя.
UFO just landed and posted this here
Я не придираюсь. Я просто не хочу что бы сейчас появилась новый вид верстальщиков, которые, к примеру, пропагандируют то, что ссылки должны состоять не менее чем из 5 символов.
UFO just landed and posted this here
При всем уважении к автору, проделавшему работу по переводу, статья скорее бесполезная.
Основные полезные данные о rowspan,colspan,th и разделах таблицы(thead), которые и используются, получаются из любого справочника при изучении HTML.
А все остальное настолько специализировано, что лучше голову этим не забивать.
Нет, на самом деле, одной, но самой главной вещи: программы, которая превращает таблицы в текст! Для проверки воспринимаемости - вполне достаточно было бы увидеть то, что незрячий услыщит (если у человека всё в порядке со зрением то он читает быстрее чем слушает а для понимания того что "Компания Сотрудники Основана ACME Inc 1000 1947 XYZ Corp 2000 1073" - не есть хорошо этого будет достаточно). Вот В ЭТОМ СЛУЧАЕ все советы были бы полезны. А так... похоже на плаванье в бассейне, в который не налили воду...
Я видел что-то похожее на одной конференции - оно писало текст под страницей, пока чудовище-JAWS читал страницу вслух. Сидел, завидовал.
Опечатка - "избегайте использовать таблицы для вестки"
Статье плюс. Такие статьи, как уже говорили, очень полезны.
Спасибо! Лично для меня ничего нового, но сколько я вижу в коде явлений типа <tr class="table_head"> и прочего бреда!!!
Побольше таких статей, и побольше бы распространения культуры кода. Ещё раз спасибо.
Такие статьи в копилку =)
Полезно для тех, кто только начинает\учится верстать, и то, не факт... много здесь таких ?
Я за всю жизнь сверстал только один макет на таблицах, это был мой первый макет. Нормальному человеку просто сразу же придёт в голову то, что таблицы предназначены для табличных данных, а не для лэйаута. А пытаться это объяснить тем, кто вопреки всему верстает на таблицах - бесполезно.
Многие интернет-рессурсы посвещенные HTML для новичков, изначально учат пользователя верстать таблицами, тем самым вводя его в заблуждение. Подобные статьи могут направить человека на правильный путь.
Направить человека на правильный путь может только он сам, а не какие-то статьи. Человек в первую очередь должен головой думать, а не строго верить тому, что пишут другие.
Ну, по крайней мере, писать надо о том, как верстать на дивах, примеры приводить. :)
Прошу отбросить возможные выпады в сторону моего отношения к Хабру, но это - не то место, где новички будут искать статьи посвященные верстке. Есть вот например в русском сегменте xhtml.ru, webmascon.com (rossomachin, респект и уважуха), там будут читать, да и то не все. Проблема даже не в ресурсах интернета. Первая проблема в том, что до сих пор кто-то зарабатывает выпуская книги html 4.0, где вообще вариантов верстки кроме как на таблицах нет.

P.S.: Статья-то всем хороша, но не совсем к месту
UFO just landed and posted this here
UFO just landed and posted this here
Основатель стандартов это вы загнули, но фигура известная.
UFO just landed and posted this here
Ну, если не учитывать что вотчина веб-стандартов W3C, то ладно :)
Позволю себе уточнить один важный момент: W3C создают стандарты, а webstandards.org — пропагандируют их. Начиная ажно с 1998 года. Причём делают это так, что к ним прислушиваются разработчики браузеров. В т.ч. и IE-team. В общем, одно из самых джедайских сообществ в Сети. И я лично рад, что вхожу в одну из его групп.
Я в курсе, Макс :)
Номинально сам числюсь в одной из групп, но по случаю удаленности не принимаю участия, а являюсь так сказать адептом :)
Нет никакой разницы чем верстать, я предпочитаю гибридный вариант, почему все вдруг решили, что верстка блоками правильней верстки с каркасом из таблицы?
Те товарищи, которые предпочитают блоки (и верстают при этом это достойно) по моему мнению просто шаманы :) А остальные 80% сайтов сверстанных дивами в рунете выглядят и работают еще хуже за неимением навыков и опыта у версальщиков, но при этом погоней (как верстальщиков, так и заказчиков) за супер-пупер-мега-блочной (без единого table, но с кучей javascript) версткой.
Перед тем, как ломать головой стену (в виде кучи непредсказуемых багов) необходимо подумать, что делать там, в соседней камере…
использование комбинированной верстки во многом ускоряет сам процесс да работу облегчает. имхо разным сайтам - разную верстку: "кипричным" больше подходит верстка блоками, "резиновым" - таблицами.
Это просто лень нормально раскурить методы вёрстки div+css, вот и всё :) Ничего оно на самом деле не ускоряет и не облегчает.
Верно. Сложная так ещё и времени может занимать больше. Но оно того стоит.
Дядя, что легче : бегать по десякам вложенных таблиц или по трём дивам ? Думаю, ответ очевиден. Тебе-то может и всё-равно, но программисту потом натягивать на движок вёрстку.

Насчёт багов - большинство из них вполне предсказуемы и давным-давно описаны, если ты делаешь что-то одним методом и видишь неправильное поведение браузера, то сделай по-другому и будь уверен что оно будет так, как ты этого захочешь.

з.ы. шаманом себя не чувствую :)
сколько не верстал, ни разу не получалось десятки вложенных таблиц заменить тремя дивами.

поделись секретом - как? :)
Может стоит сменить род деятельности?
Ну или как минимум возжелать научиться :)
Через абсолютное и релативное позиционирование. Там просто чуть по другому мыслить надо :)
Есть сайты, на которых разные элементы дизайна понатыканы в разные места страницы. Это блочные.
А есть сайты "в три колонки". И там использовать дивы,даже с float:left - увольте. Таблицы.
>> И там использовать дивы,даже с float:left - увольте. Таблицы.
Ессно просто с float: left нифига работать не будет :)

google: In search of one true layout
А с выходом css3 почти от всех дивов можно будет отказаться :)
почему? Просвети :)

p.s. какая сука постоянно минусует????
Потому что можно будет по несколько бэкграундов класть, масштабировать их, назначать фон бордеру, указывать прозрачность (что сейчас уже поддерживается флагманами) и т.п.
http://www.css3.info/
Это, конечно, хорошо и всем давно известно. Но связи с отказом от дивов не вижу. Вообще.
Значит ты не верстальщик...
Громко. Но аргументы ?
Угу, можно было бы отказаться, если бы все браузеры стали вдруг полностью поддерживать css3.
Сейчас и css2 полностью нормально не применишь, всё время надо оглядываться на не следующие стандартам браузеры.
Хотя, лет через N наверняка, я надеюсь, можно будет без оглядок верстать на css3 :)
Нет ничего проще колоночного каркаса созданного таблицей, заполненного контентом из дивов, как по мне, хотя каждый дро*ит по-своему. А прикрутить цсс к таблице так же легко как и к любому диву. Большой плюс таблиц в том что они держат общие вертикали, чего в дивах добиться можно только при помощи жабы. З.Ы. Дай линк на свою верстку, я учиться всегда рад.
Не понял насчёт вертикалей, что там только при помощи жабы ?
как сделать блоками 2 колонки одинаковой высоты при уловии динамики размеров (как в высоту так и в ширину)? только жабаскрипт поможет (или псевдоколонки, что не есть логически верный вариант) [http://htmlbook.ru/content/?id=109]
Написал бы здесь код, но сделаю проще:

google: equal-height columns
Первый результат.

Просто про западных коллег забывать не стоит. Подобных русских статей я не видел, может, даже переведу специально для приверженцев таблиц\гибридов.
это создание псевдоколонок, о которых я говорил, зачем столько изврата если td будут держать эту высоту по умолчанию? Я за блочную верстку, но там где блоки необходимы и оправданы. Это вре равно, что верстать код только тегами dt, потому что это круто, или скажем li, думаю что это тоже возможно, но зачем? [http://htmlbook.ru/content/?id=109] — тут описано на русском.
Дядя, три строчки CSS это изврат ?
[http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems] — это раз, padding-bottom: 32767px; margin-bottom: -32767px; — да, считаю что эти две строчки в цсс это изврат.
Ну, здесь уже не знаю что сказать, если ты подобное считаешь извратом.
Я, например, считаю извратом использование таблиц не по-назначению... это тоже самое, как ты привёл пример, про вёрстку только тегами dt.
Если учесть, что верстка макетов таблицами также не есть логически верный вариант, то, если вдруг захотеть верстать всё семантически верно, правильнее будет выбрать ложные колонки и подобные методы верстки :)
В реальном проекте я использовал блочную верстку и JavaScript. Вполне себе можно пройтись по колонкам, выявить блок наибольшей высоты, после чего динамически растянуть остальные.
использование thead/tfoot/tbody так же может оказаться полезным например при организации сортировки на стороне клиента, или для подгрузки данных при постраничном разбиении (без перезагрузки всей страницы). js работает только с содержимым tbody а шапка и подвал остаются не тронутыми.
А у меня такой вопрос — кто нибудь когда нибудь использовал в таблице более одного тега tbody?
Представьте себе таблицу, данные в которой сгруппированы, например, по категории, так вот, строки логично в отдельные tbody вынести для каждой категории. Пример:

<table>
<thead>
<tr>
<th>Компания</th>
<th>Единицы</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="colgroup" colspan="2">Tech</th>
</tr>
<tr>
<td scope="row">Samsung</td>
<td>1010</td>
</tr>
<tr>
<td scope="row">NEC</td>
<td>1010</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="colgroup" colspan="2">Auto</th>
</tr>
<tr>
<td scope="row">Opel</td>
<td>1010</td>
</tr>
<tr>
<td scope="row">Mercedes-Benz</td>
<td>1010</td>
</tr>
<tr>
<td scope="row">Ford</td>
<td>1010</td>
</tr>
</tbody>
</table>

Можно сделать collpase\expand на группах по tbody.
ну да, точно
спасибо
если с таблицей что-то делает javascript, то очень таже и используется
Использовал несколько раз.
edy правильно сказал, что удобно делать схлопывание/расхлопывание частей таблицы ограниченных tbody.
Век живи век учись.

Автору респект за перевод.
Пока в деревне Вилларибо епутся с div'ами, в Виллобаджо уже давно всё свертали таблицами и рубятся в кваку

;-)
Едет верстальщик в поезде и слышит: td-td.. td-td.. td-td..
дивами надо уметь ;} Это - новая школа.
Стоит научиться верстать дивно-блочно (на самом деле это нетрудно), желание верстать таблицами отпадает автоматически :-) Многие даже утверждают, что разучились.
Раньше я не знал про кэпшены, аббры, сммари и жил хорошо, верстая тэйблами.
Потом в жизнь пришли дивы и блочная верстка =)
Изредка приходится возвращаться к таблицам, и там бывают со стилями проблемы..
Тут уже приводили примеры с 3-хколоночным резиновым дизайном. На практике, вариант дивно-блочный оказывается значительно сложнее, чем табличный.

Вспоминаю времена HTML 3.2 и только сейчас понимаю, что это был рай. С каждым годом возможность сделать нормальный сайт, который неплохо будет смотреться в разных браузерах, соответствовать стандартам, да ещё и работать — всё меньше и меньше.
поэтому, наверное, в Вилларибо не работают, а е****ся :)
они быстро научаться )
спасибо
я с табличными данными сталкиваюсь не очень часто, так что полезно иногда обновить в голове подобную инфу. ну и что-то новое узнать тоже :-)
Ну почему ни одна статья о верстке не обходится без холивара?
Позавчера читал подобную статью:
http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/
У меня вопрос.

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

Как это сделать? Особенно интересует про заголовки, у которых scope="row".
Буду очень благодарен за ссылки на примеры «стоячих» на месте заголовков.
Проблемы сделать «стоячими» нет, проблема сохранить заголовки частью таблицы:
растянули таблицу — растянулись заголовки и т.п. эффекты.
а кстати, где можно скачать голосовой браузер? очень интересно было бы такую штуку помацать)
есть конечно Fangs для FF, но хотелось бы действующий образец)
отличная статья
поправьте плиз низ - поехало форматирование - голый html показывает.

как всегда расстраивают комментарии абсолютно не по теме статьи :(
это уж пусть разработчики хабра правят. Я уже задолбался десятки своих статей просматривать после очередного "баг фикса", чтобы выяснить, как и где поехало форматирование
Sign up to leave a comment.

Articles