Znacznik rozpoczynający tabelę klasy .contentpaneopen {} generowany jest przez następujący kod:

<table class="contentpaneopen<?php echo $params->get( 'pageclass_sfx' ); ?>">

Wykonanie tego kodu generuje w wynikowym dokumencie HTML dwa rodzaje wpisów:

• generujący standardową tabelę klasy contentpaneopen

  <!-- I -->
  <table class="contentpaneopen">
  <!-- wiersz i komórki -->
  </table>

• generujący specyficzną tabelę klasy contentpaneopen-przyrostek

  <<!-- II -->
  <table class="contentpaneopen-przyrostek"> /* atrybut klasy z przyrostkiem */
  <!-- wiersz i komórki -->
  </table>

Wynik zależy od tego, czy w parametrach pozycji menu zdefiniowano przyrostek klasy stylu dla strony.

Formatowanie tabel klasy .contentpaneopen {} w arkuszu stylów może objąć wszystkie własności, zwłaszcza że CSS2 dostarczył projektantom kilku nowych atrybutów, coraz pełniej obsługiwanych przez przeglądarki. Na kilka z nich wskazuje poniższy przykład:

Przykład. Reguły dla selektora klasy .contentpaneopen

table.contentpaneopen {
  width            : 100%;     /* ustala szerokość tabeli */
  padding          : 0;        /* ustala szerokość dopełnienia */
  border-collapse  : collapse; /* składa obwódki przyległych komórek */
  border-spacing   : 0;        /* ustala odstęp od obwódek wokół komórek */
  border-width     : 0;        /* ustala szerokość obwódek */
  margin           : 0;        /* ustala szerokość marginesu wokół tabeli */
  vertical-align   : top;      /* ustala wyrównanie zawartości do górnej 
                                  krawędzi komórek */
}

Dziedziczność

Niektóre deklaracje właściwości całej tabeli decydują, zgodnie z zasadą dziedziczenia, o wyglądzie komórek. Nie trzeba ich zatem powtarzać. Pamiętaj wszakże, że nie wszystkie właściwości są dziedziczone przez elementy potomne. Nie są przykładowo dziedziczone style określone dla border.

Jeśli jest to potrzebne, można wprowadzić reguły stanowiące odstępstwo od dziedziczonych reguł globalnych, np.

table.contentpaneopen td {
  padding-right    : 5px; / * ustali odstęp szerokości 5px od prawej krawędzi komórki */

Zarówno w tej, jak i poniższej deklaracji został zastosowany selektor potomka, ustalający tutaj jedynie formatowanie komórek w tabeli, której styl określa klasa .contentpaneopen.

table.contentpaneopen td.contentheading {
  padding-left     : 4px; /* odsunie o 4px od lewej krawędzi komórki tekst tytułu */
}

Klasa .contentpaneopen z przyrostkiem

Jeśli chcemy wyróżnić niektóre z materiałów w jakiś specjalny sposób, możemy umieścić w arkuszu stylów reguły dla klasy .contentpaneopen-zprzyrostkiem, wzbogacającej styl np. o kolor tła tabeli:

Przykład. Reguły dla selektora klasy .contentpaneopen-zprzyrostkiem

table.contentpaneopen-ciekawostki {
  width            : 100%;     /* jak wyżej */
  padding          : 0;        /* jak wyżej */
  border-collapse  : collapse; /* jak wyżej */
  border-spacing   : 0;        /* jak wyżej */
  border-width     : 0;        /* jak wyżej */
  margin           : 0;        /* jak wyżej */
  vertical-align   : top;      /* jak wyżej */
  background-color : yellow;   /* reguła odróżniająca */
}

Zwróć uwagę, że wszystkie reguły klasy contentpaneopen zostały powtórzone w regułach klasy z przyrostkiem. Klasy z przyrostkiem nie dziedziczą właściwości zdefiniowanych dla klasy bez przyrostka! To po prostu inne style.