Bring on the tables
Хората, които се занимават от скоро с CSS-базирани лейаути, често имат грешно отношение към таблиците. Уеб стандартите не забраняват употребата на таблици въобще и изобщо; напротив, употребата им е напълно уместна, когато става дума за таблични данни, а не за изграждане на лейаути.
Точно така, не използвайте таблици за разполагане на обекти по страниците, но за представяне на таблични данни правилното средство са точно таблиците. В тази статия ще се опитам да обясня как трябва да бъдат използвани таблиците по предназначение. Те определено не се изчерпват с редове и колони в HTML и XHTML. Особено, ако искате да бъдат достъпни.
Първо малко основни познания. Изразът „не използвайте таблици за лейаут“ идва от документа Introduction to tables (Въведение в таблиците), който е част от спецификацията на HTML 4.01:
Таблиците не трябва да бъдат използвани като средство за оформяне на съдържанието на документа, тъй като това може да породи проблеми при употреба на този документ в не-визуална среда. Освен това, когато се употребяват заедно с изображения, тези таблици могат да принудят потребителите да скролират хоризонтално, за да видят цялото съдържание на таблица, предвидена за по-голям дисплей. За да се минимизират тези проблеми, авторите трябва да използват CSS за оформление и контрол над лейаута, а не таблици.
Но целта на тази статия не е дискусия дали трябва или не трябва таблиците да бъдат употребявани за изграждане на лейаут. Идеята е да обясни оригиналната употреба на таблиците - за обозначаване на таблични данни.
Когато се използват за описване на таблични данни, таблиците са нещо повече от обикновена решетка от клетки. Зрящите хора веднага могат да възприемат връзката между заглавието на таблицата и отделните клетки - само трябва да погледнат как са разположени елементите на страницата. Слепите, обаче, не могат. За да бъде достъпна страницата за потребители, използващи екранен четец (бел. пр: а и за да носи по-пълно семантично значение) е нужно да бъде описана връзката между отделните елементи.
За щастие, HTML ни предоставя много тагове и атрибути, с които можем да свършим тази задача. Лошото е, че е доста трудно за повечето автори да вникнат в правилната употреба на тези възможности. Това и ще се опитам да обясня в тази статия.
Таблични заглавия, <th>
Да започнем с една много проста табличка, в която на всяка колона съответства по едно заглавие. Ако опишем таблицата по традиционния начин, само с редове и колони, кодът ще стане нещо такова:
<table><tr><td>Фирма</td><td>Служители</td><td>Основана</td></tr><tr><td>ACME Inc</td><td>1000</td><td>1947</td></tr><tr><td>XYZ Corp</td><td>2000</td><td>1973</td></tr></table>
Ако не използваме рамки или друго визуално оформяне, таблицата ще изглежда в браузъра така:
| Фирма | Служители | Основана |
| ACME Inc | 1000 | 1947 |
| XYZ Corp | 2000 | 1973 |
Ако добавим малко CSS, лесно можем да направим заглавията на колоните по-явни:
| Фирма | Служители | Основана |
| ACME Inc | 1000 | 1947 |
| XYZ Corp | 2000 | 1973 |
За повечето от нас вече е лесно и просто да направим връзка между заглавията и данните под тях. Но за някой, използващ екранен четец, преживяването е по-различно. Най-вероятно слепите ви потребители ще чуят нещо такова: фирма служители основана ACME Inc 1000 1947 XYZ Corp 2000 1073
. Не е лесно да се схване смисъла...
Първата и най-лесна стъпка в посока по-достъпна таблица е да обозначим заглавията правилно. Това става лесно - просто използвайте <th> (table header - таблично заглавие) вместо <td> (table data - таблични данни):
<table><tr><th>Фирма</th><th>Служители</th><th>Основана</th></tr><tr><td>ACME Inc</td><td>1000</td><td>1947</td></tr><tr><td>XYZ Corp</td><td>2000</td><td>1973</td></tr></table>
| Фирма | Служители | Основана |
|---|---|---|
| ACME Inc | 1000 | 1947 |
| XYZ Corp | 2000 | 1973 |
За тази конкретна таблица направеното подобрение е напълно достатъчно, за да могат посетителите с екранни четци да разберат връзката между заглавията и данните. Сега вече четецът ще произнесе Фирма: ACME Inc. Служители: 1000. Основана: 1947.
и така нататък за всеки от редовете в таблицата. Доста по-добре, нали?
Таблично име, <caption>
Тагът <caption> може да се използва за кратко наименуване на цялата таблица. По подразбиране, повечето браузъри показват зададеното с <caption> име над самата таблица. Ако използвате <caption>, то имайте предвид, че този таг трябва да бъде първото нещо след отварящия елемент <table>:
<table><caption>Таблица 1: Фирмени данни</caption><tr><th>Фирма</th><th>Служители</th><th>Основана</th></tr><tr><td>ACME Inc</td><td>1000</td><td>1947</td></tr><tr><td>XYZ Corp</td><td>2000</td><td>1973</td></tr></table>
| Фирма | Служители | Основана |
|---|---|---|
| ACME Inc | 1000 | 1947 |
| XYZ Corp | 2000 | 1973 |
В CSS има специална Характеристика - caption-side - която по замисъл трябва да контролира позицията на името спрямо таблицата. Можете спокойно да ползвате и всякакъв друг CSS код за визуално оформяне на <caption>, но естествено има различия в интерпретацията на браузърите... Това упражнение ще ви остане за домашна.
Описание на таблицата, атрибут summary
Зрящите хора лесно могат да преценят една таблица, като погледнат обема и набързо прегледат съдържанието, като по този начин решават дали ги интересува или не. За потребителите на екранни четци това е невъзможно, освен ако не добавим описание на таблицата с помощта на атрибута summary (бел. пр: не само екранните четци имат такъв проблем - text-only браузъри като lynx също не се справят добре с таблиците, особено с големите и едно описание винаги е добре дошло).
За разлика от тагът <caption>, атрибутът summary не се визуализира в браузъра. Това ви позволява да поставите кратко заглавие в <caption>, a като summary да поместите едно пълно и подробно описание, което ще позволи на всеки, който го чуе да разбере за какво се отнася тази таблица. Разбира се, гледайте да не прекалявайте с текста и използвайте summary само когато е нужно - например при сложни таблици и когато употребата му ще улесни възприемането на информацията.
<table summary="Брой на служителите и година на основаване в няколко измислени фирми."><caption>Таблица 1: Фирмени данни</caption><tr><th>Фирма</th><th>Служители</th><th>Основана</th></tr><tr><td>ACME Inc</td><td>1000</td><td>1947</td></tr><tr><td>XYZ Corp</td><td>2000</td><td>1973</td></tr></table>
Съкращаване на заглавията, атрибут abbr
Както вече казах, добре описаната таблица звучи добре през екранен четец. Заглавие на колоната - данни от поредната клетка. Ако, обаче, имаме по-дълги заглавия може да стане неприятно непрекъснатото повтаряне на дълги фрази. Тук идва на помощ атрибутът abbr. Той позволява да укажете съкратена версия на заглавията. Употребата на този атрибут не е задължителна и вероятно няма да ви се налага да го ползвате, ако пишете винаги кратки и ясни заглавия.
Ако модифицираме малко горния пример, като добавим по-дълги заглавия и съкращения, то екранния четец ще прочете пълните заглавия за първия ред данни, след което ще чете съкращенията за всеки следващ ред. Ето пример:
<table summary="Брой на служителите и година на основаване в няколко измислени фирми."><caption>Таблица 1: Фирмени данни</caption><tr><th abbr="Фирма">Име на фирмата</th><th abbr="Служители">Брой на служителите</th><th abbr="Основана">Година на основаване</th></tr><tr><td>ACME Inc</td><td>1000</td><td>1947</td></tr><tr><td>XYZ Corp</td><td>2000</td><td>1973</td></tr></table>
| Име на фирмата | Брой на служителите | Година на основаване |
|---|---|---|
| ACME Inc | 1000 | 1947 |
| XYZ Corp | 2000 | 1973 |
Свързване на заглавия и данни, атрибути scope, id, headers
Много често табличните данни, които искаме да представим са по-сложни от използваният до сега пример. Затова и ще го усложним, като премахнем заглавието „Фирма“ и променим клетките в първата колона от таблични данни към таблични заглавия:
<table summary="Брой на служителите и година на основаване в няколко измислени фирми."><caption>Таблица 1: Фирмени данни</caption><tr><td></td><th>Служители</th><th>Основана</th></tr><tr><th>ACME Inc</th><td>1000</td><td>1947</td></tr><tr><th>XYZ Corp</th><td>2000</td><td>1973</td></tr></table>
| Служители | Основана | |
|---|---|---|
| ACME Inc | 1000 | 1947 |
| XYZ Corp | 2000 | 1973 |
В така променената таблица всяка клетка с данни има по две заглавия. Най-простият метод за описване на тази структура, така, че да е разбираема за хора и за различни устройства като екранни четци или сканиращи роботи, е да използваме атрибута scope:
<table summary="Брой на служителите и година на основаване в няколко измислени фирми."><caption>Таблица 1: Фирмени данни</caption><tr><td></td><th scope="col">Служители</th><th scope="col">Основана</th></tr><tr><th scope="row">ACME Inc</th><td>1000</td><td>1947</td></tr><tr><th scope="row">XYZ Corp</th><td>2000</td><td>1973</td></tr></table>
Атрибутът scope указва дали заглавието се отнася за колоната или реда от таблицата, в който се намира:
scope="col": заглавие за прилежащата колонаscope="row": заглавие за прилежащия ред
Като добавих scope="col" към заглавията на първия ред, указах, че тези заглавия се отнасят за клетките под тях. Аналогично, scope="row" в заглавията в първата колона указва, че тези заглавия се отнасят за клетките в дясно от тях. Този атрибут scope може да приема още две стойности: scope="colgroup" и scope="rowgroup", като те са подобни на предните два, само че се отнасят за група от колони и група от редове.
Група от колони се дефинира с тагът <colgroup>, а група от редове - с таговете <thead>, <tfoot> и <tbody>. За тях ще говорим след малко.
Да предположим, че искате да запазите заглавието „Фирма“ и заедно с това да запазите имената на фирмите като таблични заглавия. Това ще накара клетките, съдържащи имената на фирмите, да са едновременно клетки за таблични заглавия и за таблични данни. В този случай използваме атрибут scope в нужните <td> клетки:
<table summary="Брой на служителите и година на основаване в няколко измислени фирми."><caption>Таблица 1: Фирмени данни</caption><tr><th scope="col">Фирма</th><th scope="col">Служители</th><th scope="col">Основана</th></tr><tr><td scope="row">ACME Inc</td><td>1000</td><td>1947</td></tr><tr><td scope="row">XYZ Corp</td><td>2000</td><td>1973</td></tr></table>
Така маркирани, имената на фирмите няма да се визуализират като заглавия по подразбиране в браузъра (бел. пр: като bold текст). За да оформим визуално използваме малко CSS:
td[scope] {font-weight:bold;}
Имайте предвид, че този синтаксис не се поддържа от Internet Explorer. Заобиколно решение би било да се добави class на нужните клетки.
| Company | Employees | Founded |
|---|---|---|
| ACME Inc | 1000 | 1947 |
| XYZ Corp | 2000 | 1973 |
Друга техника за свързване на клетки с таблични данни и клетки с таблични заглавия е задаването на уникален атрибут id на всяко заглавие, след което за всяка клетка с данни се добавя атрибут headers. Този атрибут може да съдържа лист с всички заглавия, които се отнасят до тази клетка. Тази техника е доста сложна и се препоръчва само в случай, че имате много сложна, неравномерна таблица или искате да свържете дадена клетка с повече от две заглавия.
За да илюстрирам похвата, промених примерната таблица така, че да показва броя служители от мъжки и женски пол за всяка от фирмите:
<table summary="Брой на служителите и година на основаване в няколко измислени фирми."><caption>Таблица 1: Фирмени данни</caption><tr><td rowspan="2"></td><th id="employees" colspan="2">Служители</th><th id="founded" rowspan="2">Основана</th></tr><tr><th id="men">Мъже</th><th id="women">Жени</th></tr><tr><th id="acme">ACME Inc</th><td headers="acme employees men">700</td><td headers="acme employees women">300</td><td headers="acme founded">1947</td></tr><tr><th id="xyz">XYZ Corp</th><td headers="xyz employees men">1200</td><td headers="xyz employees women">800</td><td headers="xyz founded">1973</td></tr></table>
| Служители | Основана | ||
|---|---|---|---|
| Мъже | Жени | ||
| ACME Inc | 700 | 300 | 1947 |
| XYZ Corp | 1200 | 800 | 1973 |
Както се вижда, този метод бързо нараства като сложност, така че е препоръчително да използвате атрибута scope, ако е възможно.
Разпъване на редове и колони
Едно време, когато единствения начин за изграждане на лейаут бяха таблиците, атрибутите rowspan и colspan бяха пръв приятел на дизайнерите. Тези атрибути позволяват табличните клетки да се разпростират на няколко реда или колони, което пък позволяваше нареждането на нарязани изображения в спретнати таблички. Макар и използвани преди неправилно, тези атрибути все още съществуват - и с право. Разпъването на дадена клетка на няколко реда или колони не е част от презентацията, а от структурата на таблицата, затова и в CSS няма средства за такъв контрол.
Колони и групи колони, <col> и <colgroup>
HTML осигурява таговете <colgroup> и <col> за групиране на свързани колони в таблицата. Това позволява (в добрите браузъри) чрез CSS да се оформят визуално различните групи колони по различен начин. Освен това, в комбинация с атрибута scope, е възможно да се зададе заглавие за цяла група колони.
По въпроса за таговете <colgroup> и <col> няма да говоря повече. Ако искате да получите допълнителна информация, погледнете връзките в частта „Какво не ви казах“.
Групи редове, <thead>, <tfoot>, and <tbody>
Табличните редове могат да се групират в table head (<thead>), table foot (<tfoot>) и едно или повече table body (<tbody>). Всяка група трябва да съдържа един или повече реда.
Ако таблицата има <thead>, то тази група трябва да е преди всички <tfoot> и <tbody>. Съответно <tfoot> тябва да се намира преди всички <tbody> групи. Ако не се използва <thead> или <tfoot>, тогава употребата на <tbody> не е нужна, но не е и забранена. Ето примерна таблица с групи редове:
<table><thead><tr></tr>… още редове в table head</thead><tfoot><tr></tr>… още редове в table foot</tfoot><tbody><tr></tr>… още редове в първата група table body</tbody><tbody><tr></tr>… още редове във втората група table body</tbody>… още table body групи, ако са нужни</table>
Групирането на редове е полезно по няколко причини:
- Улеснява визуалното оформяне и разграничаване на заглавката, тялото и края на таблицата без да се налагат допълнителни CSS класове за тези елементи.
- Когато разпечатвате дълги таблици, добрите браузъри (например тези, базирани на Мозила) повтарят заглавката и края на таблицата на всяка страница, за да улеснят четенето и възприемането на данните.
- Разделянето на тялото таблицата от заглавката и края дава възможност (при наличие на поддръжка от страна на браузъра) да се скролира само тялото, докато заглавката и края остават неподвижни.
Само за таблични данни
Всичко, описано до тук, е свързано със и приложимо при употребата на HTML за описване и структуриране на таблични данни. Ако използвате таблици за изграждане на лейаут (бел. пр: а не би трябвало!), тогава никоя от тези техники не трябва да бъде употребявана. Без атрибут summary, без заглавия, без <caption> и прочее. Просто една гола, старомодна таблица, съдържаща само и единствено елементи <table>, <tr> и <td>. В противен случай рискувате да объркате не-визуалните браузъри много повече.
Ползите
Вероятно ви се струва, че се иска доста работа, за да стане една таблица достъпна. За сложни таблици - това е вярно. Понякога е толкова сложно, че става невъзможно да се свърши на ръка (бел. пр: авторът загатва, че се налага обработка с server-side приложение). За прости таблици, като тези от примерите по-горе, обаче, работата не е толкова много. Указването на правилни таблични заглавия, описание на таблицата и употребата на атрибута scope са голяма крачка напред, а не са толкова трудни.
It’s obvious that people using screen readers or other assistive technology benefit from tables that use the available accessibility features. Trying to make sense of a large and complex table by listening to it can still be very difficult, so if at all possible, simplify the table.
Less obvious is that designers and users of graphical browsers also benefit: an accessible table has plenty of structural hooks to apply CSS to, and good styling can make the table more usable for everybody.
Какво не ви казах
Има още много по темата за таблиците, което не съм споменал в тази статия. Например, не говорих за атрибута axis, както и не казах много за таговете <colgroup> и <col>. Също така и не стана дума за различните аспекти на визуалното оформяне с CSS на таблиците, а и не съм показал някоя наистина сложна примерна таблица.
Специално за всички заинтересовани, ето няколко връзки към ресурси по темата: