@ xhtml css

O TABELACH

Tabele dawniej służyły do tworzenia kolumn na stronie oraz do podziału tych kolumn na komórki. Obecnie zaleca się stosować tabele do gromadzenia i przedstawiania danych finansowych, statystycznych, informacyjnych, porównawczych itp. Najprostrza tabela zawierająca opis wszystkich 7-znaczników i 2-atrybutów użytych na tej stronie, znajduje się w prawej kolumnie na dole. Kod każdej z trzech tabel objęty jest selektorem #tab z numerem 1, 2 lub 3. Każdy selektor musi posiadać wymagane deklaracje, gdyż w razie ich braku znacznik tabeli przejmie wartości innego najbliższego selektora.

PRZYKŁAD 1   TABELA typu KARTOTEKA - MENU

KOD XHTML  TABELI KARTOTEKA

<div id="tab1"> 
 <div id="cien">                                 
  <table cellspacing="0">
   <caption><strong>BIBLIOTEKA XHTML CSS</strong></caption>
    <tr id="tlo">
      <th> Lp </th>  <th> Dział </th>  <th colspan="4"> Strony </th>    
    </tr>  
    <tr class="alt">
      <td>1</td> <td> NAWIGACJA </td>
      <td><a href="nawigacja-pozioma.htm"> POZIOMA </a></td>
      <td><a href="nawigacja-pionowa.htm"> PIONOWA </a></td>
      <td><a href="nawigacja-stopki.htm"> STOPKI </a></td>
      <td><a href="nawigacja-rozwijana-pionowo.htm"> ROZWIJANA </a></td>
    </tr>
    <tr>
      <td>2</td> <td> TEKSTY </td>
      ...........
    </tr>			  										
  </table >
 </div >	
</div >

ARKUSZ CSS, ANALIZA REGUŁ

ARKUSZ STYLI CSS, reguły tj. dziesięć selektorów z deklaracjami

#cien  {background:#919191;}

#tab1 table  {position:relative; top:-4px; left:-4px; width:100%; border:1px solid #000; font-size:x-small; color:navy;}

#tab1 caption  {padding:8px; text-align:center; border:1px solid #000; border-bottom:none; background:#fff;}

#tab1 th, #tab1 td  {padding:8px; text-align:center; border-bottom:1px solid #b5b5b5; font-weight:bold;}

#tab1 tr#tlo, #tab1 tr  {background:#e6e6e6;}

#tab1 th  {color:#777;}

#tab1 tr.alt  {background:#f0f0f0;}

#tab1 td a {font-weight:normal; color:navy; display:block;}

#tab1 tr:hover td {color:red;}

#tab1 tr:hover {background:yellow;}

ANALIZA STYLI CSS, tj. deklaracji z ich właściwościami i wartościami

#cien  {kolor tła cienia o szerokości lewej kolumny }

#tab1 table  {przesuw tabeli w lewo w górę 4px aby pokazać cień, szerokość max 100%, obramowanie 1px czarne, czcionka x-small, kolor navy}

#tab1 caption  {odstępy 8px, tekst wycentrowany, obramowanie 1px, brak dolnego obramowania, tło białe}

#tab1 th, table td   {odstępy 8px, tekst wycentrowany, obramowanie dolne 1px błękitne, czcionka gruba}

#tab1 tr#tlo, #tab1 tr  {tło jasno-niebieskie dla wierszy parzystych}

#tab1 th  {kolor szary czcionki w drugim wierszu}

#tab1 tr .alt  {jasne tło w nieparzystych wierszach}

#tab1 td a  {czcionka linków: normalna, kolor navy, zwiększa powierzchnie linku}

#tab1 tr :hover td   {zmiana koloru czcionki na czerwony w dwóch kolumnach}

#tab1 tr :hover   {zmiana koloru całego wiersza na żółty}

PRZYKŁAD 2   TABELA typu DANE FINANSOWE

Raport finansowy oprócz zamieszczenia w internecie, wymaga wydrukowania. Czcionki ekranowe: large, small i x-small w wydruku zastąpiono czcionkami o podobnych proporcjach tj.: 18pt, 12pt i 10pt.

Drukuj tylko Raport Finansowy

ŹRÓDŁA WIEDZY

Autorzy polscy piszący o tabelach

 

HTML XHTML i CSS - Włodzimierz Gajda, wyd.I.Helion-2007, cena 57.00zł, str.476 +CD. Rozdział 25. Tabele str.243-262 (20 str). Dobrze opisana teoria kodu XHTML, mało CSS.

 

oraz zagraniczni łączący teorie z praktyką

 

HTML, XHTML i CSS - David Schultz, Craig Cook, wyd.I.Helion-2008, oryginał 2007, cena 54,90 zł, str.383. Rozdział 7. Tabele str.155-182 (28 str). Obszernie opisana teoria kodu, podstawowe przykłady stosowania CSS.

 

Projektowanie stron internetowych - Jennifer Niederst Robbins, wyd.I.Helion-2008, oryginał 2007, cena 89,00 zł, str.482 w kolorze. Rozdział 8. Podstawowe znaczniki tabel str.141-154 (14 str). Podstawowe informacje bez CSS.

 

Kuloodporne strony internetowe - Dan Cederholm, wyd.II. Helion-2008, oryginał 2008, cena 44,00 zł,   str.321 niestety czarno białe. Rozdział 7. Konwersja tabel str.198-224 (27 str). Opis tabeli z wierszami informacji i szczegółowym zastosowaniem CSS.

 

CSS Witryny internetowe szyte na miarę - Charles Wyke-Smith, wyd.II. Helion-2009, oryginał 2008, cena 49,00 zł   str.314 kolorowe. Rozdział 6. Tabele str.190-203 (14 str). Szczegółowy opis tabeli typu arkusz kalkulacyjny z użyciem CSS.

 

CSS według Erica Meyera. Kolejna odsłona - Eric Meyer, wyd.I. Helion-2005, oryginał 2003, cena 39,90 zł. Rozdział 3. Stylizowanie raportu finansowego. str.73-92 (str.20). Szczegółowy opis tworzenia raportu finansowego z CSS. Pliki kodu na stronie: ftp.helion.pl/przyklady/cssods.zip

 

XHTML i CSS Dostępne witryny internetowe - Jon Duckett, wyd.I.Helion-2008, oryginał 2005, cena 69.00zł, str.485. Rozdział 7. Tabele str.307-336 (15 str). Opis tabeli złożonej bez CSS, wg. wytycznych WCAG.

Podstawowe znaczniki i atrybuty tabel w XHTML

Kod XHTML tabeli z znacznikami i atrybutami

<div id="tab3"> 
  <table cellspacing="0">
   <thead>
     <tr><th> Elementy </th> <th id='non'>
            Opis elementów tabel</th></tr>
   </thead>
   <tr><th> <table> </th><td>
         Otwiera i zamyka tabele</td></tr> 
   <tr><th> cellspacing="0" </th><td>
     Odstęp między komórkami = 0</td></tr> 
   <tr><th> ...             </th><td>              
      ...                       </td></tr> 
   	  										
  </table >
</div >	

Arkusz styli CSS

#tab3 table  { font-weight:normal;}

#tab3 th  {font-weight:bold; padding:0 5px 2px 5px; border-right:2px solid cyan;}

#tab3 td  {font-weight:normal; text-align:left; padding:0 0 0 5px;}

#tab3 thead th  {border-bottom:2px solid cyan;}

#tab3 thead #non  {border-right:2px solid #fff;}

Analiza styli CSS

#tab3 table  {czcionka normalna}

#tab3 th  {czcionka gruba, odstęp P=5px D=2px L=5px, linia prawa 2px cyan}

#tab3 td  {czcionka normalna, tekst do lewej, odstęp L=5px}

#tab3 thead th  {linia dolna 2px cyjan}

#tab3 thead #non  {lina prawa 2px biała, zakrywa linie 2px cyjan na końcu nagłówka}