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

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

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

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

Выделение таблиц и 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 re­quired to sup­port this at­tribute, на­при­мер в опи­са­нии по­ве­де­ния го­ри­зон­таль­но­го вы­рав­ни­ва­ния яя­че­ек в при­сут­ствии ат­три­бу­та CHAROFF

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

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

Veg­etable Cost per kilo
Let­tuce $1
Sil­ver car­rots $10.50
Golden turnips $100.30

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

Нулевые COLSPAN и ROWSPAN

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

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

Пример:

TD rows­pan=4 TD colspan=4 TD rows­pan=0
sim­ple TH sim­ple TD sim­ple TD sim­ple TD
TD colspan=0
sim­ple TH sim­ple TD sim­ple TD sim­ple TD

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