Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 106
Отлично! То что хотел почитать, но не доходили никак руки
опечатка: содержианием таблицы
опечатка: содержианием таблицы
Не понимаю я в таких статьях смысла. Нормальные верстальщики знают все атрибуты и теги, благо их не так много, и прочитать всю спецификацию займет не намного больше времени, чем эту статью. Соседу Васе для его домашней странички это все равно не как не поможет.
Думал еще написать свое мнение по поводу использование таких атрибутов как summary, но решил оставить его при себе.
Думал еще написать свое мнение по поводу использование таких атрибутов как summary, но решил оставить его при себе.
В таких статьях есть смысл.
Лично я не знаю нормальных верстальщиков, которые «знают все атрибуты и теги».
А судя по качеству проектов в сети этих верстальщиков просто нет в природе.
Ни на одном сайте не видел грамотно размеченных таблиц (если кто знает примеры — поделитесь).
Статью читать (и внимательно изучать) обязательно. Не только верстальщикам, но и менеджерам, чтобы знали технологии и ставили грамотные задачи исполнителям. (Иначе в сети только и будут порносайты созданные необразованными подростками.)
Давайте учить технологии и делать веб лучше, чем он есть сейчас.
Лично я не знаю нормальных верстальщиков, которые «знают все атрибуты и теги».
А судя по качеству проектов в сети этих верстальщиков просто нет в природе.
Ни на одном сайте не видел грамотно размеченных таблиц (если кто знает примеры — поделитесь).
Статью читать (и внимательно изучать) обязательно. Не только верстальщикам, но и менеджерам, чтобы знали технологии и ставили грамотные задачи исполнителям. (Иначе в сети только и будут порносайты созданные необразованными подростками.)
Давайте учить технологии и делать веб лучше, чем он есть сейчас.
да, давайте учить.
хотелось мне найти и показать сайты с грамотно размеченными таблицами, но с ходу найти не удалось. Поверьте, такие есть. Всё-таки культура растёт.
хотелось мне найти и показать сайты с грамотно размеченными таблицами, но с ходу найти не удалось. Поверьте, такие есть. Всё-таки культура растёт.
А что мешает за теми же целями заглянуть в первоисточники, вместо того, чтобы читать пережованные материалы?
А у тебя параметр нормального верстальщика это тот, кто добавляет в фотогалерею или сайт кинотеатра атрибуты и css для слепых, увеличивая размер кода? Таких, слава богу, действительно не много. По той причине, что те, кто дошли до того уровня, что бы грамотно это суметь сделать, уже думают что они делают. А не в тупую холиварят на хабре не по теме (это я о том, что ниже твориться).
С одной стороны, я согласен с тем, что такие статьи нужны. С другой стороны, я бы не судил столь категорично. Нельзя некий «общий фон» переносить на всех представителей профессии.
Ну, достаточно людей «знают все атрибуты и теги», но не многие знают когда и как их применять правильно.
поставил минус потому что для меня эта статья имеет смысл, и нормальными верстальщиками как мне кажется становятся, а не рождаются
Нормальный верстальщик верстает и обращается к справочнику, а не учит теги. Они запоминаются в процессе работы.
При верстке специализированных сайтов для слепых и слабовидящих видимо. Но этим занимаются отдельные люди и таблицы там совершенно не главная проблема. В рунете я таких сайтов не знаю.
Я заморачивался как-то давно пару раз с этим в небольших, но специализированных сайтах, но чисто для себя, потренироваться. Я действительно не думаю, что хотя бы одному посетителю, это пригодилось.
Я заморачивался как-то давно пару раз с этим в небольших, но специализированных сайтах, но чисто для себя, потренироваться. Я действительно не думаю, что хотя бы одному посетителю, это пригодилось.
никогда не приходилось заниматься проектами для незрячих... а как представил - может и еще теги специальные есть для подобных людей?
Очень рекомендую изучить сайт w3.org
Там кстати есть такая штука:
http://www.w3.org/TR/WAI-WEBCONTENT/
Там кстати есть такая штука:
http://www.w3.org/TR/WAI-WEBCONTENT/
Роджер Йохансон делает.
Не буду на ночь глядя ввязываться во флейм, скажу лишь одно: надо.
Не буду на ночь глядя ввязываться во флейм, скажу лишь одно: надо.
я стараюсь верстать для людей с ограниченными способностями (незрячие, с проблемами в опорно-двигательном аппарате). пусть мне за это и не доплачивают, но я делаю это для людей, которые будут пользоваться продуктами нашей студии.
This page is not Valid XHTML 1.0 Transitional!
Validation Output: 14 Errors
Validation Output: 14 Errors
WAI это не требования, а рекомендации. Удовлетворять им нельзя.
При всем уважении к автору, проделавшему работу по переводу, статья скорее бесполезная.
Основные полезные данные о rowspan,colspan,th и разделах таблицы(thead), которые и используются, получаются из любого справочника при изучении HTML.
А все остальное настолько специализировано, что лучше голову этим не забивать.
Основные полезные данные о rowspan,colspan,th и разделах таблицы(thead), которые и используются, получаются из любого справочника при изучении HTML.
А все остальное настолько специализировано, что лучше голову этим не забивать.
Нет, на самом деле, одной, но самой главной вещи: программы, которая превращает таблицы в текст! Для проверки воспринимаемости - вполне достаточно было бы увидеть то, что незрячий услыщит (если у человека всё в порядке со зрением то он читает быстрее чем слушает а для понимания того что "Компания Сотрудники Основана ACME Inc 1000 1947 XYZ Corp 2000 1073" - не есть хорошо этого будет достаточно). Вот В ЭТОМ СЛУЧАЕ все советы были бы полезны. А так... похоже на плаванье в бассейне, в который не налили воду...
Опечатка - "избегайте использовать таблицы для вестки"
Статье плюс. Такие статьи, как уже говорили, очень полезны.
Спасибо! Лично для меня ничего нового, но сколько я вижу в коде явлений типа <tr class="table_head"> и прочего бреда!!!
Побольше таких статей, и побольше бы распространения культуры кода. Ещё раз спасибо.
Побольше таких статей, и побольше бы распространения культуры кода. Ещё раз спасибо.
Полезно для тех, кто только начинает\учится верстать, и то, не факт... много здесь таких ?
Я за всю жизнь сверстал только один макет на таблицах, это был мой первый макет. Нормальному человеку просто сразу же придёт в голову то, что таблицы предназначены для табличных данных, а не для лэйаута. А пытаться это объяснить тем, кто вопреки всему верстает на таблицах - бесполезно.
Я за всю жизнь сверстал только один макет на таблицах, это был мой первый макет. Нормальному человеку просто сразу же придёт в голову то, что таблицы предназначены для табличных данных, а не для лэйаута. А пытаться это объяснить тем, кто вопреки всему верстает на таблицах - бесполезно.
Многие интернет-рессурсы посвещенные HTML для новичков, изначально учат пользователя верстать таблицами, тем самым вводя его в заблуждение. Подобные статьи могут направить человека на правильный путь.
Направить человека на правильный путь может только он сам, а не какие-то статьи. Человек в первую очередь должен головой думать, а не строго верить тому, что пишут другие.
Прошу отбросить возможные выпады в сторону моего отношения к Хабру, но это - не то место, где новички будут искать статьи посвященные верстке. Есть вот например в русском сегменте xhtml.ru, webmascon.com (rossomachin, респект и уважуха), там будут читать, да и то не все. Проблема даже не в ресурсах интернета. Первая проблема в том, что до сих пор кто-то зарабатывает выпуская книги html 4.0, где вообще вариантов верстки кроме как на таблицах нет.
P.S.: Статья-то всем хороша, но не совсем к месту
P.S.: Статья-то всем хороша, но не совсем к месту
Основатель стандартов это вы загнули, но фигура известная.
Ну, если не учитывать что вотчина веб-стандартов W3C, то ладно :)
Позволю себе уточнить один важный момент: W3C создают стандарты, а webstandards.org — пропагандируют их. Начиная ажно с 1998 года. Причём делают это так, что к ним прислушиваются разработчики браузеров. В т.ч. и IE-team. В общем, одно из самых джедайских сообществ в Сети. И я лично рад, что вхожу в одну из его групп.
Нет никакой разницы чем верстать, я предпочитаю гибридный вариант, почему все вдруг решили, что верстка блоками правильней верстки с каркасом из таблицы?
Те товарищи, которые предпочитают блоки (и верстают при этом это достойно) по моему мнению просто шаманы :) А остальные 80% сайтов сверстанных дивами в рунете выглядят и работают еще хуже за неимением навыков и опыта у версальщиков, но при этом погоней (как верстальщиков, так и заказчиков) за супер-пупер-мега-блочной (без единого table, но с кучей javascript) версткой.
Перед тем, как ломать головой стену (в виде кучи непредсказуемых багов) необходимо подумать, что делать там, в соседней камере…
Те товарищи, которые предпочитают блоки (и верстают при этом это достойно) по моему мнению просто шаманы :) А остальные 80% сайтов сверстанных дивами в рунете выглядят и работают еще хуже за неимением навыков и опыта у версальщиков, но при этом погоней (как верстальщиков, так и заказчиков) за супер-пупер-мега-блочной (без единого table, но с кучей javascript) версткой.
Перед тем, как ломать головой стену (в виде кучи непредсказуемых багов) необходимо подумать, что делать там, в соседней камере…
использование комбинированной верстки во многом ускоряет сам процесс да работу облегчает. имхо разным сайтам - разную верстку: "кипричным" больше подходит верстка блоками, "резиновым" - таблицами.
Дядя, что легче : бегать по десякам вложенных таблиц или по трём дивам ? Думаю, ответ очевиден. Тебе-то может и всё-равно, но программисту потом натягивать на движок вёрстку.
Насчёт багов - большинство из них вполне предсказуемы и давным-давно описаны, если ты делаешь что-то одним методом и видишь неправильное поведение браузера, то сделай по-другому и будь уверен что оно будет так, как ты этого захочешь.
з.ы. шаманом себя не чувствую :)
Насчёт багов - большинство из них вполне предсказуемы и давным-давно описаны, если ты делаешь что-то одним методом и видишь неправильное поведение браузера, то сделай по-другому и будь уверен что оно будет так, как ты этого захочешь.
з.ы. шаманом себя не чувствую :)
сколько не верстал, ни разу не получалось десятки вложенных таблиц заменить тремя дивами.
поделись секретом - как? :)
поделись секретом - как? :)
Может стоит сменить род деятельности?
Через абсолютное и релативное позиционирование. Там просто чуть по другому мыслить надо :)
Есть сайты, на которых разные элементы дизайна понатыканы в разные места страницы. Это блочные.
А есть сайты "в три колонки". И там использовать дивы,даже с float:left - увольте. Таблицы.
Есть сайты, на которых разные элементы дизайна понатыканы в разные места страницы. Это блочные.
А есть сайты "в три колонки". И там использовать дивы,даже с float:left - увольте. Таблицы.
А с выходом css3 почти от всех дивов можно будет отказаться :)
почему? Просвети :)
p.s. какая сука постоянно минусует????
p.s. какая сука постоянно минусует????
Потому что можно будет по несколько бэкграундов класть, масштабировать их, назначать фон бордеру, указывать прозрачность (что сейчас уже поддерживается флагманами) и т.п.
http://www.css3.info/
http://www.css3.info/
Угу, можно было бы отказаться, если бы все браузеры стали вдруг полностью поддерживать css3.
Сейчас и css2 полностью нормально не применишь, всё время надо оглядываться на не следующие стандартам браузеры.
Хотя, лет через N наверняка, я надеюсь, можно будет без оглядок верстать на css3 :)
Сейчас и css2 полностью нормально не применишь, всё время надо оглядываться на не следующие стандартам браузеры.
Хотя, лет через N наверняка, я надеюсь, можно будет без оглядок верстать на css3 :)
Нет ничего проще колоночного каркаса созданного таблицей, заполненного контентом из дивов, как по мне, хотя каждый дро*ит по-своему. А прикрутить цсс к таблице так же легко как и к любому диву. Большой плюс таблиц в том что они держат общие вертикали, чего в дивах добиться можно только при помощи жабы. З.Ы. Дай линк на свою верстку, я учиться всегда рад.
Не понял насчёт вертикалей, что там только при помощи жабы ?
как сделать блоками 2 колонки одинаковой высоты при уловии динамики размеров (как в высоту так и в ширину)? только жабаскрипт поможет (или псевдоколонки, что не есть логически верный вариант) [http://htmlbook.ru/content/?id=109]
Написал бы здесь код, но сделаю проще:
google: equal-height columns
Первый результат.
Просто про западных коллег забывать не стоит. Подобных русских статей я не видел, может, даже переведу специально для приверженцев таблиц\гибридов.
google: equal-height columns
Первый результат.
Просто про западных коллег забывать не стоит. Подобных русских статей я не видел, может, даже переведу специально для приверженцев таблиц\гибридов.
это создание псевдоколонок, о которых я говорил, зачем столько изврата если td будут держать эту высоту по умолчанию? Я за блочную верстку, но там где блоки необходимы и оправданы. Это вре равно, что верстать код только тегами dt, потому что это круто, или скажем li, думаю что это тоже возможно, но зачем? [http://htmlbook.ru/content/?id=109] — тут описано на русском.
Если учесть, что верстка макетов таблицами также не есть логически верный вариант, то, если вдруг захотеть верстать всё семантически верно, правильнее будет выбрать ложные колонки и подобные методы верстки :)
В реальном проекте я использовал блочную верстку и 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.
<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.
edy правильно сказал, что удобно делать схлопывание/расхлопывание частей таблицы ограниченных tbody.
Век живи век учись.
Автору респект за перевод.
Автору респект за перевод.
Пока в деревне Вилларибо епутся с div'ами, в Виллобаджо уже давно всё свертали таблицами и рубятся в кваку
;-)
;-)
Едет верстальщик в поезде и слышит: td-td.. td-td.. td-td..
дивами надо уметь ;} Это - новая школа.
Стоит научиться верстать дивно-блочно (на самом деле это нетрудно), желание верстать таблицами отпадает автоматически :-) Многие даже утверждают, что разучились.
Раньше я не знал про кэпшены, аббры, сммари и жил хорошо, верстая тэйблами.
Потом в жизнь пришли дивы и блочная верстка =)
Изредка приходится возвращаться к таблицам, и там бывают со стилями проблемы..
Потом в жизнь пришли дивы и блочная верстка =)
Изредка приходится возвращаться к таблицам, и там бывают со стилями проблемы..
Тут уже приводили примеры с 3-хколоночным резиновым дизайном. На практике, вариант дивно-блочный оказывается значительно сложнее, чем табличный.
Вспоминаю времена HTML 3.2 и только сейчас понимаю, что это был рай. С каждым годом возможность сделать нормальный сайт, который неплохо будет смотреться в разных браузерах, соответствовать стандартам, да ещё и работать — всё меньше и меньше.
Вспоминаю времена HTML 3.2 и только сейчас понимаю, что это был рай. С каждым годом возможность сделать нормальный сайт, который неплохо будет смотреться в разных браузерах, соответствовать стандартам, да ещё и работать — всё меньше и меньше.
поэтому, наверное, в Вилларибо не работают, а е****ся :)
спасибо вам
спасибо
я с табличными данными сталкиваюсь не очень часто, так что полезно иногда обновить в голове подобную инфу. ну и что-то новое узнать тоже :-)
я с табличными данными сталкиваюсь не очень часто, так что полезно иногда обновить в голове подобную инфу. ну и что-то новое узнать тоже :-)
Ну почему ни одна статья о верстке не обходится без холивара?
Позавчера читал подобную статью:
http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/
Позавчера читал подобную статью:
http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/
У меня вопрос.
Отделение заглавия и нижней части таблицы от ее тела позволит браузерам обеспечить прокрутку только тела таблицы.
Как это сделать? Особенно интересует про заголовки, у которых scope="row".
Буду очень благодарен за ссылки на примеры «стоячих» на месте заголовков.
Проблемы сделать «стоячими» нет, проблема сохранить заголовки частью таблицы:
растянули таблицу — растянулись заголовки и т.п. эффекты.
Отделение заглавия и нижней части таблицы от ее тела позволит браузерам обеспечить прокрутку только тела таблицы.
Как это сделать? Особенно интересует про заголовки, у которых scope="row".
Буду очень благодарен за ссылки на примеры «стоячих» на месте заголовков.
Проблемы сделать «стоячими» нет, проблема сохранить заголовки частью таблицы:
растянули таблицу — растянулись заголовки и т.п. эффекты.
а кстати, где можно скачать голосовой браузер? очень интересно было бы такую штуку помацать)
есть конечно Fangs для FF, но хотелось бы действующий образец)
есть конечно Fangs для FF, но хотелось бы действующий образец)
отличная статья
поправьте плиз низ - поехало форматирование - голый html показывает.
как всегда расстраивают комментарии абсолютно не по теме статьи :(
поправьте плиз низ - поехало форматирование - голый html показывает.
как всегда расстраивают комментарии абсолютно не по теме статьи :(
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Практический HTML: работаем с таблицами