Standardowe formatowanie tabel

Jeśli chcesz, aby tabele na Twojej witrynie zawsze charakteryzowały się określonymi właściwościami, zdefiniuj odpowiednie reguły. Zostaną one użyte do sformatowania każdej tabeli stworzonej przez autorów opracowań oraz każdej tabeli, dla której w skryptach Joomla! nie zadeklarowano klasy formatującej.

Odstępy i marginesy

W HTML do ustawienia marginesów mięzy komórkami przeznaczony był atrybut cellspacing, do definiowania odstępów między treścią w komórce a jej obramowaniem atrybut cellpadding. W CSS również możemy skorzystać ze stylów regulujących te właściwości. Najlepiej określić je w regule dla całej tabeli:

table {
   padding        : .25em     /* ustala odstęp tekstu od brzegów komórek */   
   border-spacing : .25em;    /* ustala odstęp między komórkami - wokół obwódek */
   border-collapse: collapse; /* składa obwódki przyległych komórek */
   border-width   : .08em;    /* ustala szerokość obwódek */
}

Tło tabeli, wierszy i komórek

Tło tabeli, wierszy i komórek można ustawiać za pomocą właściwości background-color albo background, jeśli chcemy zastosować w tle jakąś grafikę. W takim przypadku należy pamiętać również o podaniu koloru tła na wypadek, gdyby nie został wczytany obrazek tła.

Przykłady określania tła w tabeli:

table {
   background-color: #E7FBD4;                /* ustala tło całej tabeli */
}
th {
   background-color: #E7FBD4;                /* ustala tło komórek nagłówków */      
}
td {
   background:      #E7FBD4 url(../tlo.png); /* dodaje obrazek w tle */      
}

Arkusze stylów dla Joomla! definiują zwykle dla wierszy tabel trzy style: sectiontableheader, sectiontableentry1, sectiontableentry2. Podobne rozwiązanie można zastosować do pozostalych tabel. Zgodnie z wymogami semantycznego znakowania należałoby jednak ustalić odpowiednie nazwy klas, np. contenttableentry1, contenttableentry2, oczywiście niekoniecznie angielskie.

Podpis tabeli

Wymogi dostępności stron internetowych stanowią m.in, że tabele powinny być opatrzone podpisem. W HTML dysponujemy przeznaczonym do tego celu znacznikiem caption. Reguła dla elementu caption może określać właściwości tekstu, czcionki, tla, a także położenie podpisu, np:

caption {
   font              : bold .85em "Times New Roman", Times, serif;
   background-color  : #56A806;
   color             : #fff;
   padding-top       : .25em;
   padding-bottom    : .25em;
   text-align        : center;
   caption-side      : bottom; /* umieszcza podpis pod tabelą * /
 

Niestety, przeglądarka IE (także w najnowszej wersji) włąściwości caption-side, nie obsługuje. Ale użytkownicy innych przeglądarek zobaczą podpis w miejscu zaplanowanym przez projektanta.

Zagnieżdżenie tabel i dziedziczność

Deklarując właściwości tabel, nie można zapomnieć o regułach o dziedziczności. szzcególnej ostrożności wymaga definiowanie rozmiaru czcionek Jeśli np. zdefiniujemy rozmiar czcionki dla elementu td {} w wartościach względnych (procentowo, w emach), to z pewnością w kolejnych, zagnieżdżonych elementach otrzymamy tekst zupełnie nieczytelny; rozmiar czcionki będzie bowiem ustalany dla każdego kolejnego elementu.