<table> или <div>, вот в чем вопрос ?..

[Kos87]

Начинал я сайты делать с таблиц. Это были простенькие и не оч красивые сайты, одно слово - первые

Вот сейчас пытаюсь перейти на стили и вместо таблиц использовать слои.

Открытым для меня остается вопрос "тягучести" сайта со стилями.

И имеет ли смысл полностью отказываться от таблиц и переходить на стили?

Сейчас творю на xhtml 1.0 Transitional + CSS.

вот для примера последняя работа полностью на CSS http://www.reichauto.com.ua/ , но он не "резиновый".

Edited October 26, 2009 by Kos87

[Михаил Кононенко]

Не пойму как слои могут заменить таблицы

[Kos87]

легко

[Great Rash]

Собссно не так уж и легко. Просто надо понимать, что таблицы это таблицы, а слои это слои. А то некоторые начинают измываться и пытаться соорудить таблицу из дивов.

[Михаил Кононенко]

Зачем вообще менять одно на другое? Для конкретной задачи подходит конкретное решение.

[Great Rash]

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

[psywalker]

Начинал я сайты делать с таблиц. Это были простенькие и не оч красивые сайты, одно слово - первые

Вот сейчас пытаюсь перейти на стили и вместо таблиц использовать слои.

Открытым для меня остается вопрос "тягучести" сайта со стилями.

И имеет ли смысл полностью отказываться от таблиц и переходить на стили?

Сейчас творю на xhtml 1.0 Transitional + CSS.

вот для примера последняя работа полностью на CSS http://www.reichauto.com.ua/ , но он не "резиновый".

Я бы всё на списках сделал, ИМХО

[SelenIT]

Я бы всё на списках сделал

+1 . Просятся они туда.

[psywalker]

+1 . Просятся они туда.

Да, мало того, что просятся, но ещё и вот эта конструкция явно не отражает семантики:

<div class="car">
	<a href="http://www.reichauto.com.ua/temp.html" class="car mercedes"></a>
	<a href="http://www.reichauto.com.ua/temp.html" class="car toyota"></a>

	<a href="http://www.reichauto.com.ua/temp.html" class="car opel"></a>
	<a href="http://www.reichauto.com.ua/foto.html#h-chevrolet" class="car chevrolet"></a>
	<a href="http://www.reichauto.com.ua/temp.html" class="car kia"></a>
</div>

[s0rr0w]

Да, мало того, что просятся, но ещё и вот эта конструкция явно не отражает семантики:

<div class="car">
	<a href="http://www.reichauto.com.ua/temp.html" class="car mercedes"></a>
	<a href="http://www.reichauto.com.ua/temp.html" class="car toyota"></a>

	<a href="http://www.reichauto.com.ua/temp.html" class="car opel"></a>
	<a href="http://www.reichauto.com.ua/foto.html#h-chevrolet" class="car chevrolet"></a>
	<a href="http://www.reichauto.com.ua/temp.html" class="car kia"></a>
</div>

Вот это вы гоните... Ваш психоз со списками скоро достигнет максимума.

Это банальный набор ссылок, а не перечисление.

Набор. Ссылок.

Если бы перед этим набором стоял бы текст, например "Ниже перечислены марки автомобилей, которые представлены на нашем сайте:"

то в данном случае было бы семантично делать список, но с одной оговоркой - не надо убирать буллеты и флоатить элементы. Список должен быть списком, с точечками спереди и в вертикальном виде.

Да, кстати, подыгрывая вашему психозу, все перечисления в предложениях нужно делать (по вашей мега-логике) списками!

И вот это предложение "На сайте были онлайн: Саша, Маша, Даша" "правильно" нужно делать вот так

<p>На сайте были онлайн:</p>

<ul>

<li>Саша,</li>

<li>Маша,</li>

<li>Даша</li>

</ul>

[SelenIT]

Это банальный набор ссылок, а не перечисление.

Набор ссылок набору ссылок рознь . "Хлебные крошки" тоже подпадают под это определение, но там важна последовательность, между соседними элементами есть иерархическая связь. А тут элементы однородны и равнозначны, жесткого порядка у них нет (автобренды можно сортировать по алфавиту, а можно по популярности). Свойствами самих ссылок (rel и все такое) этого отношения, имхо, не выразить, а вот помещением их в соотв. контейнер — вполне, и unordered list, как по мне, по смыслу подходит на роль такого контейнера лучше всего.

все перечисления в предложениях нужно делать (по вашей мега-логике) списками!

А почему бы нет? Людям все равно (спасибо CSS!), а ботам всяко проще парсить разметку, чем делать синтаксический разбор разговорного языка . А то еще получится, как здесь...

[rash]

Да, кстати, подыгрывая вашему психозу, все перечисления в предложениях нужно делать (по вашей мега-логике) списками!

И вот это предложение "На сайте были онлайн: Саша, Маша, Даша" "правильно" нужно делать вот так

<p>На сайте были онлайн:</p>

<ul>

<li>Саша,</li>

<li>Маша,</li>

<li>Даша</li>

</ul>

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

Хотя делать на списках вообще все, конечно, перебор. Только то, что удобно.

[Justnewone]

Список

И вовсе не однозначно, что дескать список обязательно предворяется заголовком. Есть списки, которые не нуждаются в заголовке, благодаря именно своей самодостаточности, и один из них конечно же "меню". И это список, черт возьми, на все 100%, это аксиома.

Если в ресторане Вам подают книжку без надписи МЕНЮ или вообще без надписи, когда Вы только сели за столик, понятно что это не сказки андерсона и не жалобная книга (хотя и такое не исключено).

Как раз меню тут реализовано не через список. В центре, как будет удобно, я бы тоже предпочел использовать тут список, хотя бы потому, чтобы сайт не превратился в американскую инструкцию к пылесосу, то есть, я бы написал над списком "поддерживаемые марки", потом бы осознал, что это явный ход назад для человечества, заголовок бы стер, а список бы оставил. Хотя, если бы важнее было бы обернуть один из элементов в див или еще как, тогда бы не парился начсет LI, вобщем, относительно середины позиция не столь твердая =)

[s0rr0w]

Набор ссылок набору ссылок рознь . "Хлебные крошки" тоже подпадают под это определение, но там важна последовательность, между соседними элементами есть иерархическая связь. А тут элементы однородны и равнозначны, жесткого порядка у них нет (автобренды можно сортировать по алфавиту, а можно по популярности). Свойствами самих ссылок (rel и все такое) этого отношения, имхо, не выразить, а вот помещением их в соотв. контейнер — вполне, и unordered list, как по мне, по смыслу подходит на роль такого контейнера лучше всего.

Набор абзацев - однородны и равнозначны. Жесткого порядка у них нет. Поэтому абзацы с текстом тоже лучше делать в списках. По вашей же логике. И по смыслу будет подходить, ведь что есть статья? Набор абзацев!

Мало того, футер, хедер, контен страницы - тоже подпадают под вашу сверх-логичную логику. Ведь это тоже жесткая структура, которая имеет порядок, однородна и равнозначна.

Структура самого HTML уже является структурой. Добавляя дополнительную структуру для подчеркивания структуры, вы создаете масло масляное.

А почему бы нет? Людям все равно (спасибо CSS!), а ботам всяко проще парсить разметку, чем делать синтаксический разбор разговорного языка .

Это называется одним словом - маразм. Люди очень часто любят в него впадать.

И вовсе не однозначно, что дескать список обязательно предворяется заголовком. Есть списки, которые не нуждаются в заголовке, благодаря именно своей самодостаточности, и один из них конечно же "меню". И это список, черт возьми, на все 100%, это аксиома.

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

Для меню раньше сделали специальный тег. Непонятно, почему от него отказались.

Другой вопрос, является ли набор TD списком? Являются ли все чайлды ноды списком?

[Razor]

Нуу <menu> вродеб в хтмл5 собираются вводить, верно? Тогда щас что меню-список, что меню-не список без разницы, т.к. в будущем и то и то будет не верно)

[Justnewone]

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

Для меню раньше сделали специальный тег. Непонятно, почему от него отказались.

Другой вопрос, является ли набор TD списком? Являются ли все чайлды ноды списком?

Доллар

Евро

Рубль

Монгольский тугрик

И еще очень много с учетом контекста.

Понятия семантики никто не прописывал, тут каждый волен делать то, что посчитает нужным, и это очень плохо. Мы с Вами уже не раз обсуждали подобное. Тег заголовок, например. Люди грамотные могут даже вступить в конфликт (тег P, например). В общем, тут не все гладко. Нам предоставили инструментарий, а резная фигурка медведя из деревянного бруска у каждого индивидуальна. Вот мое мнение.

[s0rr0w]

Нуу <menu> вродеб в хтмл5 собираются вводить, верно? Тогда щас что меню-список, что меню-не список без разницы, т.к. в будущем и то и то будет не верно)

Спека HTML 4.01

DIR and MENU are deprecated.

Добавили в HTML 5 раздел навигации nav. Структура в этом блоке может быть любой, в том числе и любимые многими списки.

Доллар

Евро

Рубль

Монгольский тугрик

О да, это мне про многое сказало!

Про что речь? Это бессмысленный набор слов без указания контекста.

И еще очень много с учетом контекста.

Нет оглавляющего предложения - нет контекста.

Понятия семантики никто не прописывал, тут каждый волен делать то, что посчитает нужным, и это очень плохо.

Почему плохо? Это гибкость языка.

Мое мнение - списки применимы только для контента. Для неконтента (оформление, общая структура страницы, меню и прочее) - лучше использовать универсальные теги с указанием классов.

Другими словами - HTML-мышление для контента, XML-мышление для оформления.

Если впадать в маразм, и по любому поводу лепить UL, OL, то это не делает документ прозрачнее и чище, а только отвлекает.

[Justnewone]

О да, это мне про многое сказало!

Про что речь? Это бессмысленный набор слов без указания контекста.

Нет оглавляющего предложения - нет контекста.

Валюты мира:

Доллар

Евро

...

Сильно раскрылся контекст, заголовок много дал, чтобы узреть сам список?

Если впадать в маразм, и по любому поводу лепить UL, OL, то это не делает документ прозрачнее и чище, а только отвлекает.

Вот тут верно, списки они же для чего в русском языке, чтобы раскрыть структуру, всего-то. Чтобы сократить бесчисленное повторение "согласно предшествующему" и "из ходя из предыдущего". А перебор - всегда зло. Кто не умеет по русски писать грамотно, будет семантики оформлять безграмотно.

[SelenIT]

Поэтому абзацы с текстом тоже лучше делать в списках. По вашей же логике.

Набор абзацев — это поток. Как идут, так и прочитаются — хоть человеком, хоть ботом. А вот набор ссылок — это ветвление, выбор. И логика этого выбора во многом зависит от... <тут всегда кончается мой дефолтный словарный запас и часто начинается холивор по семантике :)>

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

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

является ли набор TD списком? Являются ли все чайлды ноды списком?

Таблица — двумерный список, TDшка принадлежит и TR-ке, и COL-у (как это формализовать в потоковом HTML — черт ногу сломит, вот и получилось то, что получилось). Порядок там зафиксирован вертикальной сеткой. Выходит — да, список, но непростой, UL/OL для его выражения недостаточно...

Произвольные чайлды — не являются, т.к. ничего не известно об их отношениях (точнее, могут и являться, но не факт .

Нет оглавляющего предложения - нет контекста.

Оно может подразумеваться. Например, для списка товаров в магазине (независимо от его оформления) очевидно неявное оглавляющее предложение "Мы продаем:"

Вышесказанное — ИМХО.

<menu> вродеб в хтмл5 собираются вводить, верно?

Он совсем для другого. То меню — это "как бы нативный" контрол для клиентских приложений.

[s0rr0w]

Набор абзацев — это поток. Как идут, так и прочитаются — хоть человеком, хоть ботом. А вот набор ссылок — это ветвление, выбор. И логика этого выбора во многом зависит от... <тут всегда кончается мой дефолтный словарный запас и часто начинается холивор по семантике :)>

Набор LI - это поток. Как идут, так и прочитаются...

Таблица — двумерный список, TDшка принадлежит и TR-ке, и COL-у (как это формализовать в потоковом HTML — черт ногу сломит, вот и получилось то, что получилось). Порядок там зафиксирован вертикальной сеткой. Выходит — да, список, но непростой, UL/OL для его выражения недостаточно...

Почему не достаточно? Принять, что TR = LI->UL, и вуаля... Таблица состоит из списков элементов. Трехмерный список.

<ul> <!-- table-->
 <li> <!-- tbody -->
  <ul>
	<li> <!-- tr -->
	  <ul>
		 <li>Cell</li> <!-- td -->
	  </ul>
	</li>
  </ul>
 </li>
</ul>

Произвольные чайлды — не являются, т.к. ничего не известно об их отношениях (точнее, могут и являться, но не факт .

Как не являются? childNodes является списком нод, с их позицией, отношениями и прочим. Чистейший список!

Оно может подразумеваться. Например, для списка товаров в магазине (независимо от его оформления) очевидно неявное оглавляющее предложение "Мы продаем:"

Подразумеваться может только в том случае, если там написано "магазин". Если написать "склад" или "ломбард", то вся прозрачность теряется.

[rash]

Это называется одним словом - маразм. Люди очень часто любят в него впадать.

Маразмом называется попытка дать четкое определение тому, что нужно размечать списком, а что - нет.

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

[Justnewone]

Подразумеваться может только в том случае, если там написано "магазин". Если написать "склад" или "ломбард", то вся прозрачность теряется.

Заголовок совсем не обязательно должен раскрывать контекст. Разве нет? Заголовок "как то:"

<предложение:контекст>Все мы любим покупать в этой булочной прекрасные хлебопекарные изделия.</предложение>

<заголовок>Как то:</залоголовок>

<список>

<элемент-списка>Нарезной батон</элемент-списка>

<элемент-списка>Сдобная булка</элемент-списка>

<элемент-списка>Зерновая булка</элемент-списка>

</список>

Я не склонен на него возлагать исключительно контекстную функцию, это может быть общее слово, которое все перечисление объединяет.

Edited October 28, 2009 by Justnewone

[SelenIT]

Набор LI - это поток. Как идут, так и прочитаются...

А вот уже не факт. По крайней мере по сообществу гуляет страшилка, что какой-то шибко умный агрегатор вполне может сложить LI-шки из UL в свою базу в произвольном порядке (напр., в том, как они встретились на первом из обработанных ресурсов). А вот для OL ему уже придется изворачиваться как угодно, но порядок сохранять .

Таблица состоит из списков элементов

Не совсем, имхо. Список списков — это аналог jagged-массива (как в C#), а таблица по крайней мере пытается строить из себя настоящий двумерный. Похоже, да не совсем то (особенно при наличии colspan-ов и т.п.).

childNodes является списком нод, с их позицией, отношениями и прочим. Чистейший список!

А, речь о текстовом описании кода некоторой ноды, типа "вот у нас body, а вот его детки: сначала header, потом content, потом где-то сбоку nav и в самом конце footer"? В таком контексте, конечно, список, причем упорядоченный.

[s0rr0w]

А вот уже не факт. По крайней мере по сообществу гуляет страшилка, что какой-то шибко умный агрегатор вполне может сложить LI-шки из UL в свою базу в произвольном порядке (напр., в том, как они встретились на первом из обработанных ресурсов). А вот для OL ему уже придется изворачиваться как угодно, но порядок сохранять .

Стоп стоп стоп, при чем тут агрегатор? Элементы в DOM-дереве имеют строгую очередность вне зависимости от того, список это, или набор абзацев. Результат работы некой сторонней программы нас мало интересует.

Не совсем, имхо. Список списков — это аналог jagged-массива (как в C#), а таблица по крайней мере пытается строить из себя настоящий двумерный. Похоже, да не совсем то (особенно при наличии colspan-ов и т.п.).

Колспаны - визуальное форматирование. Данных приходит либо больше, либо меньше.

А, речь о текстовом описании кода некоторой ноды, типа "вот у нас body, а вот его детки: сначала header, потом content, потом где-то сбоку nav и в самом конце footer"? В таком контексте, конечно, список, причем упорядоченный.

Значит, его надо делать <OL> или <UL>

Ведь тут советуют все делать все списковые данные списками!

Заголовок совсем не обязательно должен раскрывать контекст. Разве нет? Заголовок "как то:"

<предложение:контекст>Все мы любим покупать в этой булочной прекрасные хлебопекарные изделия.</предложение>

<заголовок>Как то:</залоголовок>

<список>

<элемент-списка>Нарезной батон</элемент-списка>

<элемент-списка>Сдобная булка</элемент-списка>

<элемент-списка>Зерновая булка</элемент-списка>

</список>

Я не склонен на него возлагать исключительно контекстную функцию, это может быть общее слово, которое все перечисление объединяет.

Тут согласен.

Если удалить контекстное предложение, то смысл перечисления теряется.

Что вам скажет следующее перечисление

<ul>
 <li><a href="www.news.com">Новости</a></li>
 <li><a href="www.politics.com">Политика</a></li>
 <li><a href="www.catalogue.com">Каталог компаний</a></li>
</ul>

[SelenIT]

Результат работы некой сторонней программы нас мало интересует.

А я как раз считал, что вся эта (местами действительно не совсем здоровая) суета вокруг семантики — именно ради сторонних программ (поисковые боты, скринридеры и т.п.).

Колспаны - визуальное форматирование. Данных приходит либо больше, либо меньше.

Спорно. Например, есть таблица-календарь (кстати, таблица он или список — отдельный давний холивор, а там на второй строчке <tr><td colspan="3">Нет данных</td><td>Дождик</td>... Если считать colspan чистой визуальщиной, получится, что дождик был во вторник, а он был в четверг...

Значит, его надо делать <OL>

Ну да . Я про такое:

<p>Чайлды body:</p>

<ol>

<li>header</li>

<li>сontent</li>

<li>nav</li>

<li>footer</li>

</ol>

В описании кода это действительно упорядоченное однородное перечисление. В самом коде явно нет, слишком разные роли у этих элементов

Что вам скажет следующее перечисление

Как минимум, что данная страница как-то связана со всем перечисленным и все перечисленное имеет на ней примерно один порядок важности. А-ля этакое урезанное до неприличия облачко тегов.

Кстати, контекст может задаваться и не текстом, а опять же разметкой. Любой список ссылок в вышеупомянутом nav из HTML5 автоматически становится основным навигационным блоком сайта (если находится на самом верхнем уровне иерархии) или вспомогательным навигационным блоком статьи (если находится в ейном section-е). Хотя, справедливости ради, формализация этой иерархии секций, статей и вспомогательных блоков остается запутанной, несмотря на все попытки авторов стандарта... Впрочем, это всё — тоже имхо .