раузеры против таблиц

Сложные таблицы являются, наверное, одним из самых интересных мест в верстке.

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

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

ыделение таблиц и TFOOT

По спецификации блок TFOOT должен идти до блока TBODY, при этом в самой таблице он выводится последним. С первого взгляда всё нормально, но если вдруг нам надо будет выделить содержимое таблицы мы столкнемся с тем, что в отображении TFOOT ставится в конец только визуально и выделяя текст в таблице выделение будет вести себя соответственно: выделяя всю таблицу с верхнего левого угла по нижний правый мы выделим всю таблицу за исключением TBODY (В Opera, однако, алгоритм слегка иной, и можно таким образом выделить всю таблицу, но и своих глюков с этим в ней хватает).

Попробуйте сами по-всякому выделять текст в таблице:

THEAD-TH THEAD-TD
TFOOT-TH TFOOT-TD
TBODY-TH TBODY-TD

Конечно, можно выделить всю таблицу — начиная с THEAD-TH и заканчивая TBODY-TD, но простые пользователи будут озадачены когда столкнутся с таким поведением выделения.

опирование таблицы в буфер обмена

Подобное поведение TFOOT также влияет и на то, что уйдет в буфер обмена, если таблицу выделить и вставить в текстовый редактор или, скажем, Excel.

В большинстве браузеров TFOOT будет идти до TBODY. В Opera, если умудриться выделить всю таблицу, TBODY всё будет нормально. Но это если выделить — скажем, при выполнении команды «Выделить всё» TFOOT по неизвестным причинам не выделяется. А вручную приходится заниматься пиксель-хантингом.

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

е существующие аттрибуты CHAR и CHAROFF

Если внимательно почитать спецификации, можно найти очень много интересных и полезных вещей. Однако, кое-где можно встретить приписки вроде User agents are not required to support this attribute, например в описании поведения горизонтального выравнивания яячеек в присутствии аттрибута CHAROFF

По спецификации, связка из аттрибутов ALIGN, CHAR и/или CHAROFF может очень помочь для правильно визуального представления информации. Однако, насколько мне известно, ни один из хоть сколько-нибудь популярных браузеров не реализовал эту возможность.

Приведу пример из спецификации (по ссылке можно увидеть как предполагается рендерить подобное свойство):

Vegetable Cost per kilo
Lettuce $1
Silver carrots $10.50
Golden turnips $100.30

Такая функциональность мне сейчас в проекте очень приходилась бы, но увы, производители браузеров решили забыть про неё.

улевые COLSPAN и ROWSPAN

Еще одна полезная вещь, присутствующая в спецификации — возможность задать ячейке COLSPAN или ROWSPAN равные нулю.

В спецификации HTML явно написано, что при нулевом значении этих аттрибутов ячейка должна растягиваться на всю строку или столбец. Однако, правильно рендерит ячейки с таким свойством лишь Firefox, а Опера понимает лишь нулевой ROWSPAN.

Пример:

TD rowspan=4 TD colspan=4 TD rowspan=0
simple TH simple TD simple TD simple TD
TD colspan=0
simple TH simple TD simple TD simple TD

Таким образом, ещё одну полезную функциональность, описанную в спецификации, нельзя применять из-за неполной поддержки браузерами.

Вы можете прокомментировать эту статью в Мастодоне.

Опубликовано с метками: #Practical #Bugs #HTML #Outdated