Предыстория
На поиски по теме, указанной в заголовке меня сподвигла задача сверстать календарь для нашей системы отчетов. Что примечательно, мои действия почти в точности повторяли действия автора статьи, которую я нашел и перевёл (под катом).
Встав перед задачей сверстать календарь я тоже «мыслил анти-таблично», и после не долгих раздумий сварганил из списка календарец. Но к концу рабочего дня и всех мытарств, меня переклинило по дороге домой тоже, что и автора статьи — а как быть с днями недели?
По пути я обдумал этот вопрос и сформулировал запрос для Google — calendar table or list. Первая же ссылка привлекла меня и подтвердила мои соображения относительно того что календарь это всё-таки таблица а не список.
Я не претендую на оригинальность, конечно же, и возможно эта тема уже поднималась, но именно в таком разрезе я её ещё не встречал. В русскоязычной части интернета я ещё как-то читал статью Neutrino о его опыте вёрстки календаря, тогда я ещё удивился предложенному решению, но к сожалению тогда о семантике я мало задумывался)
Для предотвращения возможных будущих заблуждений, я решил перевести найденную статью, так как она вполне убедительна и раскрывает довольно полно затронутую тему. Надеюсь, также на вашу критику перевода, так как с переводом у меня не всё гладко, по-моему)
- Перевод: Lesha Ogonkov, 15.08.2007
- Оригинал статьи: Calendar Semantics: Table or List
Часто, когда разработчик начинает в первые использовать HTML и CSS по назначению для разметки и оформления, он, или она, имеет тенденцию отказываться от таблиц, и избегать их использования во что бы то ни стало. Так как считают, что такой путь позволит разработчику найти множество творческих подходов к использованию новообретённой мощи CSS. Это может доставить кому-то сильные неудобства.
Эти данные табличные или нет?
Следующий шаг для разработчика — начать думать о смысле размечаемого содержания, и выбирать наиболее семантичное решение. Если данные табличные по своей природе, разметьте их так, не бойтесь! Таблицы не зло, это не их вина, что ими злоупотребляли в течение многих лет. Когда я только начинал использовать CSS, я был в восторге от его возможностей и хотел использовать их везде, где только можно. Я придумал несколько решений для простых проблем, и я уверен, что другие разработчики могут сказать тоже самое.
Я говорю, что календарь является таблицей
Дело в том, что это табличные по натуре данные, и должны соответственно размечаться. Один пример, о котором я бы хотел поговорить, это ежемесячный календарь. Когда после изучения CSS меня попросили создать календарь, первой вещью, которую я хотел использовать это упорядоченный список (OL). Я мыслил «антитаблично», и провёл следующие несколько часов придумывая довольно хорошо выглядящий календарь, основанный на упорядоченном списке. Единственной неприятностью была семантика.
Тогда всё казалось правильным; календарь и правда был всего лишь списком дней для нужного месяца, расположенных с первого по последний, как это он может быть таблицей? То, что я не принял во внимание,— пункты в дополнительном списке наверху, для создания дней недели. Я также не подумал о том, как календарь будет выглядеть в текстовом браузере. Я был CSS-фанатиком и не хотел больше никогда видеть эти таблицы.
Почему же календарь это таблица?
На мой взгляд, календарь нужно непременно считать табличными данными. Даты размещены в определённом месте в сетке, основанной на том, на какой день недели они попадают. Только один день в определённом положении на сетке, и они не перекрываются. Название месяца и дней недели могут быть включены в заголовок таблицы, потому что это то, чем они являются — заголовками. Они придают смысл данным, находящимся ниже, обеспечивая объяснение, какой день недели соответствует дате.
Некоторые примечания о Доступности
«Табличный» календарь также лучше смотрится в текстовых браузерах, в отличие от списка. Когда в текстовом браузере просматривается календарь, сделанный «на списках», вы получаете список дней, сопровождаемый произвольным содержанием, связанным с определённым днём. Это прекрасно, но вы теряете удобство, не зная какому дню недели соответствует та или иная дата (список дней недели теперь наверху, сделан списком). Отображение «табличного» календаря в текстовом браузере такое же, как и в современном браузере, работающем с CSS. Заголовки в таблице облегчают понимание содержания и информация организована так, как вам нужно.
Учитывая то, что я не имею доступа к голосовому браузеру, я не уверен что «табличный» календарь подходит людям с ослабленным зрением. Однако, используя Fangs мы можем провести прекрасный анализ. Сначала даётся информация непосредственно относительно таблицы; описание (summary), число строчек, колонок и заголовков таблицы. Затем вы направляетесь по дням. К сожалению, мы теряем преимущество — знать на какой день недели выпадает та или иная дата.
Что я пытаюсь сказать
В целом, я думаю, что признаки календаря хорошо сочетаются с тем, что предлагают таблицы. На мой взгляд, календарь семантически — таблица, и поэтому должен соответственно размечаться. Календарь на основе списков не эффективен, хотя бы потому, что требует включения дополнительных пунктов, для создания дней недели. Доводом за это может быть то, что вам не нужны дни недели, так как у вас, например, мало место на панели. Лично я не думаю, что это хорошее оправдание. Если вам не нужны заголовки дней недели, то установите display: none для thead. Всегда имейте семантику в уме, она будет большим подспорьем, в конце концов.
