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ąpionych przez colspanrowspan. Należy pamiętać, że przez colspan 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: idheaders

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.

Ceny krajowych i importowanych jabłek i pomarańczy w Sydney i Melbourne
 ImportowaneKrajowe
 PomarańczeJabłkaPomarańczeJabł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


Zmodyfikowano: 24.02.2011, 13:20
submit