Tabele
Wstęp
Jeśli chcesz innym elementom (kolumny tekstu na stronie, menu) nadać wygląd podobny do tabel, zobacz pozycjonowanie CSS.
Tabele służą do definiowania danych tabelarycznych tzn. takich, które mają formę tabeli. Przykładem danych tabelarycznych mogą być dane arkuszy kalkulacyjnych. Każda tabela składa się z wierszy i komórek. Powinna także zawierać nagłówki i podpis.
Struktura

Najprostsza tabela składa się z z elementu <table>
oraz komórek <td>
pogrupowanych w wiersze <tr>
. W tabelach XHTML nie ma elementów
tworzących kolumny.
Przykład:
<table>
<tr>
<td>
Pierwszy rząd, pierwsza komórka</td>
<td>
Pierwszy rząd, druga komórka</td>
</tr>
<tr>
<td>
Drugi rząd, pierwsza komórka</td>
<td>
Drugi rząd, druga komórka</td>
</tr>
</table>
Nagłówki: <th>
Nagłówki stosuje się tak samo jak <td>
, z tym że mają one specjalne znaczenie i zazwyczaj inny wygląd.
Grupy rzędów: <thead>
, <tfoot>
, <tbody>
Rzędy tabeli można pogrupować na nagłówki (<thead>
), stopkę (<tfoot>
) i dane tabeli (<tbody>
). W grupach umieszcza się rzędy
(<tr>
), a nie bezpośrednio komórki.
Tabela może mieć wiele elementów <tbody>
— np. zestawienie mające miesiące jako rzędy, pogrupowane w lata.
<tfoot>
musi być przed <tbody>
. Pozwoli to przeglądarkom wyświetlić stopkę jeszcze przed załadowaniem wszystkich danych z tabeli.
Nagłówek i stopka mogą być powtarzane na każdej stronie wydruku tabeli
<table>
<thead>
<tr><th>
Nagłowek1</th><th>
Nagłowek2</th></tr>
</thead>
<tfoot>
<tr><td>
Stopka1</td><td>
Stopka2</td></tr>
</tfoot>
<tbody>
<tr><td>
a11</td><td>
a12</td></tr>
<tr><td>
a21</td><td>
a22</td></tr>
<tr><td>
a31</td><td>
a32</td></tr>
</tbody>
</table>
Podpis: <caption>
Tabela może mieć dołączny element <caption>
, który zawiera podpis tabeli. <caption>
musi być umieszczony tylko zaraz po otwierającym tagu
<table>
i tylko jeden element <caption>
może znajdowac się w tabeli. Będzie on wyświetlany przez przeglądarki wizualne.
<table>
<caption>
Dane firmy</caption>
...
Scalanie komórek: rowspan
, colspan

Jeśli kilka komórek ma taką samą wartość, można uniknąć powtórzeń poprzez nadanie komórkom atrybutów, które rozciągną komórkę na określoną ilość rzędów (rowspan
) lub kolumn
(colspan
).
<tr><th colspan="3">
Rok 2005</th></tr>
<tr><th>
Zyski</th><th>
Straty</th><th>
Bilans</th></tr>
Nagłówek w pierwszym rzędzie zajmie szerokość trzech komórek<tr><th>
Cecha</th><th>
Model Eko</th><th>
Model Std</th><th>
Model Pro</th></tr>
<tr><th>
Turbo</th><td rowspan="2">
Brak</td><td>
Jest</td><td rowspan="2">
Jest</td></tr>
<tr><th>
ABS</th>
pominięta komórka<td>
Brak</td>
pominięta komórka</tr>
Nie wstawia się w ogóle komórek zastąpiąnych przezcolspan
irowspan
. Należy pamiętać, że przezcolspan
kolejność komórek w kodzie strony może być inna niż ich kolejność w tabeli.
Brak opisu <col> i <colgroup>. Przydało by się wspomnieć o td:first-child + td
Dostępność
Podsumowanie: summary
Osoba widząca jednym spojrzeniem może określić czy dana tabela zawiera dane interesujące ją. Osoba używająca programów czytających zawartość ekranu nie może tego zrobić. Aby temu zaradzić, stosuje
się atrybut summary
.
Atrybut summary
dodawany do <table>
jest opisem tabeli. Powinien być szczegółowy, dane które należy tam zawrzeć powinny dotyczyć samej tabeli, typu danych i jej
wielkości. Atrybut summary jest ukryty przed wizualnymi przeglądarkami.
<table summary="Liczba zatrudnionych w działach firmy Przykładpol">
<caption>
Zatrudnienie</caption>
..
Skrócone nazwy nagłówków: abbr
Kiedy program odczytujący zawartość ekranu napotka tabelę, ogłasza nagłówek każdej komórki z danymi. Jeśli tabela ma je bardzo długie, może być to bardzo denerwujące. Używając atrybutu
abbr
jesteś w stanie dać skrócony nagłówek dla tych programów.
<table summary="Liczba zatrudnionych pracowników w firmach.">
<caption>
Dane firmy</caption>
<tr>
<th abbr="Firma">
Nazwa firmy</th>
<th abbr="Pracownicy">
Liczba pracowników</th>
<th abbr="Założona">
Data założenia</th>
</tr>
<tr>
<td>
BrowseHappy S.A.</td>
<td>
827</td>
<td>
2000</td>
</tr>
<tr>
<td>
XYZ Holding</td>
<td>
13041</td>
<td>
2004</td>
</tr>
</table>
Program przeczyta najpierw długie formy nagłówków, potem będzie sięgał do wartości atrybutu abbr
. Nie wpływa to w żaden sposób na wizualną postać tabeli.
Zakres działania nagłówka: scope
Atrybut ten w połączeniu z selektorem atrybutu można wykorzystać do wyśrodkowania lub wyrównania nagłówków do prawej.
Nagłówek może opisywać rząd (scope="row"
) lub kolumnę (scope="col"
).
Dowolne łączenie kolumn i nagłówków: id
i headers
Atrybut headers
dla komórek tabeli (<td>
) jest używany w połączeniu z atrybutem identyfikatora (id
) zawartego w nagłówku tabeli
(<th>
), by umożliwić logiczne połączenie dowolnej komórki bądź komórek, z dowolnym nagłówkiem bądź nagłówkami.
Poniższa tabela, przedstawiająca ceny pomarańczy i jabłek, wykorzystuje identyfikatory i nagłówki.
Importowane | Krajowe | |||
Pomarańcze | Jabłka | Pomarańcze | Jabłka | |
Sydney | ||||
Hurtowa | $1.00 | $1.25 | $1.20 | $1.00 |
Detaliczna | $2.00 | $3.00 | $1.80 | $1.60 |
Melbourne | ||||
Hurtowa | $1.20 | $1.30 | $1.00 | $0.80 |
Detaliczna | $1.60 | $2.00 | $2.00 | $1.50 |
PYTANIE: jaka jest cena hurtowa importowanych jabłek w Sydney?
Dla użytkowników wszelkiego typu czytników ekranu (ang. screen reader), użycie identyfikatorów i nagłówków oznacza, że odpowiedź na to pytanie poznają bez problemu.
Rzućmy okiem na kod:
<table border="1" summary="Ceny hurtowe i detaliczne, krajowych i importowanych jabłek i pomarańczy, w Sydney i Melbourne. Są dwa rzędy kolumn.">
<caption>
Ceny krajowych i importowanych jabłek i pomarańczy w Sydney i Melbourne
</caption>
<thead>
<tr>
<td></td>
<th colspan="2" id="imported">Importowane</th>
<th colspan="2" id="domestic">Krajowe</th>
</tr>
<tr>
<td></td>
<th id="oranges-imp">Pomarańcze</th>
<th id="apples-imp">Jabłka</th>
<th id="oranges-dom">Pomarańcze</th>
<th id="apples-dom">Jabłka</th>
</tr>
</thead>
<tbody>
<tr>
<th id="sydney" colspan="5">Sydney</th>
</tr>
<tr>
<th headers="sydney" id="wholesale-sydney">Hurtowe</th>
<td headers="imported oranges-imp sydney wholesale-sydney">$1.00</td>
<td headers="imported apples-imp sydney wholesale-sydney">$1.25</td>
<td headers="domestic oranges-dom sydney wholesale-sydney">$1.20</td>
<td headers="domestic apples-dom sydney wholesale-sydney">$1.00</td>
</tr>
<tr>
<th headers="sydney" id="retail-sydney">Detaliczne</th>
...Reszta kodu ...
Korzystając w JAWS z odpowiednich kombinacji klawiszy, większość użytkowników będzie w stanie zlokalizować odpowiednią komórkę tabeli, zawierającą odpowiedź na powyższe pytanie. Mogą upewnić się w swoim wyborze, prosząc JAWS o przeczytanie tej właśnie kolumny.
JAWS przeczyta kolumnę mniej więcej w ten sposób:
„kolumna trzecia, rząd czwarty, jabłka Sydney cena hurtowa importowane, dollar jeden kropka dwa pięć”
Więcej informacji o tworzeniu dostępnych tabel w artykule Accessible Data Tables
Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.
Zmodyfikowano: 26.05.2007, 23:39