Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Tabele

Email Drukuj PDF

Tematy: Odstępy we wnętrzu tabeli | Pojedyncze obramowanie | Kontrola pustych komórek | Generowanie tabeli | Podpis tabeli

Przed upowszechnieniem się kaskadowych arkuszy stylów tabele były najważniejszym narzędziem wykorzystywanym przez twórców stron WWW. Na podstawie tabel tworzony był szkielet strony, w tabelach publikowano także tekst. Obecnie ten element webmasterskiego rzemiosła zszedł na drugi plan i w przypadku tworzenia układu strony został z dużym powodzeniem zastąpiony pozycjonowaniem elementów realizowanym za pomocą stylów. Nie oznacza to jednak, że tabele całkiem wyjdą z użycia. Należy tylko pamiętać o tym, że tabele są obecnie stosowane wyłącznie do publikacji tekstów o tabelarycznej strukturze.

Niniejszy rozdział kursu jest poświęcony formatowaniu tabel za pomocą CSS. Tak się składa, że kolejne specyfikacje CSS oferują kilka przydatnych stylów umożliwiających kontrolowanie wyglądu tabeli. Poniżej prezentuję przykładowy listing kodu tabeli wraz ze wszystkimi jej elementami. W przypadku problemów ze zrozumieniem sensu użycia tych oryginalnych elementów warto zerknąć do kursu języka XHTML/HTML.

<table>

<CAPTION><span>Tabela 1.1.</span> Sprzedaż pomidorów</CAPTION>     

<thead>

<tr>

<th scope="row">&nbsp;</th><th scope="row">2006</th><th scope="row">2007</th><th scope="row">2008</th><th scope="row">2009</th>

</tr>

</thead>      

<tbody>

<tr>

<th scope="col">Producent X</th><td>15</td><td>18</td><td>22</td><td>19</td>

</tr>

<tr>

<th scope="col">Producent Y</th><td>10</td><td>11</td><td>13</td><td>14,5</td>

</tr>

<tr>

<th scope="col">Producent Z</th><td>24</td><td>28</td><td>32</td><td>30</td>

</tr>

</tbody>      

<tfoot>

<tr>

<td colspan=5>Wszystkie wartości są liczone w tys. kg.</td></td>

</tr>

</tfoot>

</table>

<<przykład>>

<table>

<CAPTION><span>Tabela 1.1.</span> Sprzedaż pomidorów</CAPTION>     

<thead>

<tr>

<th scope="row">&nbsp;</th><th scope="row">2006</th><th scope="row">2007</th><th scope="row">2008</th><th scope="row">2009</th>

</tr>

</thead>      

<tbody>

<tr>

<th scope="col">Producent X</th><td>15</td><td>18</td><td>22</td><td>19</td>

</tr>

<tr>

<th scope="col">Producent Y</th><td>10</td><td>11</td><td>13</td><td>14,5</td>

</tr>

<tr>

<th scope="col">Producent Z</th><td>24</td><td>28</td><td>32</td><td>30</td>

</tr>

</tbody>      

<tfoot>

<tr>

<td colspan=5>Wszystkie wartości są liczone w tys. kg.</td></td>

</tr>

</tfoot>

</table>

<</przykład>>

Wszystkie elementy znajdujące się wewnątrz tabeli mogą być poddane formatowaniu za pomocą CSS poprzez przypisanie odpowiednich stylów do znaczników tworzących strukturę tabeli. Poniżej zamieszczam kilka prostych przykładów mających uzmysłowić, jak to działa.

Używając znaczników thead, tbody oraz tfoot, możemy w prosty i szybki sposób formatować całe partie tabeli. Dlatego warto pamiętać o tych znacznikach podczas budowania tabeli. Poniżej znajduje się prosty przykład oparty na takim sposobie formatowania tabeli.

THEAD

{

background-color:#C0C0C0;

}

TBODY

{

background-color:#C0FFC0;

}

TFOOT

{

background-color:#FFFFC0;

}

<<przykład>>

<div class="przyklad">

<table>

<CAPTION><span>Tabela 1.1.</span> Sprzedaż pomidorów</CAPTION>     

<thead style="background-color:#C0C0C0;">

<tr>

<th scope="row">&nbsp;</th><th scope="row">2006</th><th scope="row">2007</th><th scope="row">2008</th><th scope="row">2009</th>

</tr>

</thead>      

<tbody style="background-color:#C0FFC0;">

<tr>

<th scope="col">Producent X</th><td>15</td><td>18</td><td>22</td><td>19</td>

</tr>

<tr>

<th scope="col">Producent Y</th><td>10</td><td>11</td><td>13</td><td>14,5</td>

</tr>

<tr>

<th scope="col">Producent Z</th><td>24</td><td>28</td><td>32</td><td>30</td>

</tr>

</tbody>      

<tfoot style="background-color:#FFFFC0;">

<tr>

<td colspan=5>Wszystkie wartości są liczone w tys. kg.</td></td>

</tr>

</tfoot>

</table>

</div>

<</przykład>>

Oczywiście nic nie stoi na przeszkodzie, aby formatować wybrane komórki. W przykładowej tabeli zastosowałem znaczniki caption, th, td oraz atrybut scope. Wszystkie te elementy mogą zostać użyte podczas formatowania tabel.

CAPTION

{

font-style:italic;

text-align:left;

}

CAPTION SPAN

{

font-weight:bold;

}     

TD

{

font-style:italic;

text-align:center;

}     

[scope="row"]

{

color:green;

padding:10px;

}

[scope="col"]

{

color:navy;

background-color:#C0C0C0;

padding:10px;

}

<<przykład>>

<div class="przyklad">

<table>

<CAPTION style="font-style:italic;text-align:left;"><span style="font-weight:bold;">Tabela 1.1.</span> Sprzedaż pomidorów</CAPTION> 

<thead style="background-color:#C0C0C0;">

<tr>

<th scope="row" style="color:green;padding:10px;">&nbsp;</th><th scope="row" style="color:green;padding:10px;">2006</th><th scope="row" style="color:green;padding:10px;">2007</th><th scope="row" style="color:green;padding:10px;">2008</th><th scope="row" style="color:green;padding:10px;">2009</th>

</tr>

</thead>      

<tbody style="background-color:#C0FFC0;">

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent X</th><td style="font-style:italic;text-align:center;">15</td><td style="font-style:italic;text-align:center;">18</td><td style="font-style:italic;text-align:center;">22</td><td style="font-style:italic;text-align:center;">19</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Y</th><td style="font-style:italic;text-align:center;">10</td><td style="font-style:italic;text-align:center;">11</td><td style="font-style:italic;text-align:center;">13</td><td style="font-style:italic;text-align:center;">14,5</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Z</th><td style="font-style:italic;text-align:center;">24</td><td style="font-style:italic;text-align:center;">28</td><td style="font-style:italic;text-align:center;">32</td><td style="font-style:italic;text-align:center;">30</td>

</tr>

</tbody>      

<tfoot style="background-color:#FFFFC0;">

<tr>

<td colspan=5>Wszystkie wartości są liczone w tys. kg.</td></td>

</tr>

</tfoot>

</table>

</div>

<</przykład>>

Nic nie stoi na przeszkodzie, aby formatowanie przypisać bezpośrednio do znacznika table.

TABLE

{

margin-left:1cm;

paddin-left:1cm;

border:solid 1px black;

}

Myślę, że sztuczne mnożenie kolejnych przykładów nie ma sensu, zwłaszcza że w specyfikacji CSS znajdziemy kilka dedykowanych stylów odpowiedzialnych za formatowanie tabeli. Poniżej prezentuję tabelę, której zawartość została sformatowana za pomocą stylów zaprezentowanych do tej pory. Będzie to punkt wyjścia dla prezentacji kolejnych możliwości oferowanych przez style.

<<przykład>>

<div class="przyklad">

<table style="margin-left:1cm;paddin-left:1cm;border:solid 1px black;">

<CAPTION style="font-style:italic;text-align:left;"><span style="font-weight:bold;">Tabela 1.1.</span> Sprzedaż pomidorów</CAPTION> 

<thead style="background-color:#C0C0C0;">

<tr>

<th scope="row" style="color:green;padding:10px;">&nbsp;</th><th scope="row" style="color:green;padding:10px;">2006</th><th scope="row" style="color:green;padding:10px;">2007</th><th scope="row" style="color:green;padding:10px;">2008</th><th scope="row" style="color:green;padding:10px;">2009</th>

</tr>

</thead>      

<tbody style="background-color:#C0FFC0;">

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent X</th><td style="font-style:italic;text-align:center;">15</td><td style="font-style:italic;text-align:center;">18</td><td style="font-style:italic;text-align:center;">22</td><td style="font-style:italic;text-align:center;">19</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Y</th><td style="font-style:italic;text-align:center;">10</td><td style="font-style:italic;text-align:center;">11</td><td style="font-style:italic;text-align:center;">13</td><td style="font-style:italic;text-align:center;">14,5</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Z</th><td style="font-style:italic;text-align:center;">24</td><td style="font-style:italic;text-align:center;">28</td><td style="font-style:italic;text-align:center;">32</td><td style="font-style:italic;text-align:center;">30</td>

</tr>

</tbody>      

<tfoot style="background-color:#FFFFC0;">

<tr>

<td colspan="5" style="font-size:xx-small;text-align:right;">Wszystkie wartości są liczone w tys. kg.</td></td>

</tr>

</tfoot>

</table>

</div>

<</przykład>>

Odstępy we wnętrzu tabeli

border-spacing

Dostępne wartości:

wartość liczbowa | inherit

Wartość domyślna:

0

Przykład:

table {border-spacing:1cm 2cm;}

Dziedziczenie:

Tak

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Odstępy pomiędzy komórkami tabeli obraz głównym obramowaniem tabeli mogą być kontrolowane za pomocą polecenia border-spacing.

Poniższy przykład reguluje odstępy pomiędzy komórkami zarówno w pionie, jak i poziomie. Wszystkie przerwy mają taką samą wartość i wynoszą 1 cm.

TABLE

{

border-spacing:1cm;

}

<<przykład>>

<div class="przyklad">

<table style="margin-left:1cm;paddin-left:1cm;border:solid 1px black;border-spacing:1cm;">

<CAPTION style="font-style:italic;text-align:left;"><span style="font-weight:bold;">Tabela 1.1.</span> Sprzedaż pomidorów</CAPTION> 

<thead style="background-color:#C0C0C0;">

<tr>

<th scope="row" style="color:green;padding:10px;">&nbsp;</th><th scope="row" style="color:green;padding:10px;">2006</th><th scope="row" style="color:green;padding:10px;">2007</th><th scope="row" style="color:green;padding:10px;">2008</th><th scope="row" style="color:green;padding:10px;">2009</th>

</tr>

</thead>      

<tbody style="background-color:#C0FFC0;">

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent X</th><td style="font-style:italic;text-align:center;">15</td><td style="font-style:italic;text-align:center;">18</td><td style="font-style:italic;text-align:center;">22</td><td style="font-style:italic;text-align:center;">19</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Y</th><td style="font-style:italic;text-align:center;">10</td><td style="font-style:italic;text-align:center;">11</td><td style="font-style:italic;text-align:center;">13</td><td style="font-style:italic;text-align:center;">14,5</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Z</th><td style="font-style:italic;text-align:center;">24</td><td style="font-style:italic;text-align:center;">28</td><td style="font-style:italic;text-align:center;">32</td><td style="font-style:italic;text-align:center;">30</td>

</tr>

</tbody>      

<tfoot style="background-color:#FFFFC0;">

<tr>

<td colspan="5" style="font-size:xx-small;text-align:right;">Wszystkie wartości są liczone w tys. kg.</td></td>

</tr>

</tfoot>

</table>

</div>

<</przykład>>

Oczywiście nic nie stoi na przeszkodzie, aby zróżnicować wartości odstępów poziomych i pionowych.

TABLE

{

border-spacing:0 10px;

}

<<przykład>>

<div class="przyklad">

<table style="margin-left:1cm;paddin-left:1cm;border:solid 1px black;border-spacing:0 10px;">

<CAPTION style="font-style:italic;text-align:left;"><span style="font-weight:bold;">Tabela 1.1.</span> Sprzedaż pomidorów</CAPTION> 

<thead style="background-color:#C0C0C0;">

<tr>

<th scope="row" style="color:green;padding:10px;">&nbsp;</th><th scope="row" style="color:green;padding:10px;">2006</th><th scope="row" style="color:green;padding:10px;">2007</th><th scope="row" style="color:green;padding:10px;">2008</th><th scope="row" style="color:green;padding:10px;">2009</th>

</tr>

</thead>      

<tbody style="background-color:#C0FFC0;">

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent X</th><td style="font-style:italic;text-align:center;">15</td><td style="font-style:italic;text-align:center;">18</td><td style="font-style:italic;text-align:center;">22</td><td style="font-style:italic;text-align:center;">19</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Y</th><td style="font-style:italic;text-align:center;">10</td><td style="font-style:italic;text-align:center;">11</td><td style="font-style:italic;text-align:center;">13</td><td style="font-style:italic;text-align:center;">14,5</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Z</th><td style="font-style:italic;text-align:center;">24</td><td style="font-style:italic;text-align:center;">28</td><td style="font-style:italic;text-align:center;">32</td><td style="font-style:italic;text-align:center;">30</td>

</tr>

</tbody>      

<tfoot style="background-color:#FFFFC0;">

<tr>

<td colspan="5" style="font-size:xx-small;text-align:right;">Wszystkie wartości są liczone w tys. kg.</td></td>

</tr>

</tfoot>

</table>

</div>

<</przykład>>

Pojedyncze obramowanie

border-collapse

Dostępne wartości:

collapse | separate | inherit

Wartość domyślna:

separate

Przykład:

table {border-collapse:collapse;}

Dziedziczenie:

Tak

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Za pomocą stylu border-collapse można łączyć lub rozłączać obramowania poszczególnych komórek. Dokładniej — dzięki temu stylowi można spowodować, że komórki we wnętrzu tabeli będą miały pojedyncze lub podwójne obramowania.

W poniższym przykładzie widać tabelę z pojedynczym wewnętrznym obramowaniem.

TABLE

{

border:solid black 1px;   

border-collapse:collapse;

}

<<przykład>>

<div class="przyklad">

<table style="margin-left:1cm;paddin-left:1cm;border:solid 1px black;border-collapse:collapse;">

<CAPTION style="font-style:italic;text-align:left;"><span style="font-weight:bold;">Tabela 1.1.</span> Sprzedaż pomidorów</CAPTION> 

<thead style="background-color:#C0C0C0;">

<tr>

<th scope="row" style="color:green;padding:10px;">&nbsp;</th><th scope="row" style="color:green;padding:10px;">2006</th><th scope="row" style="color:green;padding:10px;">2007</th><th scope="row" style="color:green;padding:10px;">2008</th><th scope="row" style="color:green;padding:10px;">2009</th>

</tr>

</thead>      

<tbody style="background-color:#C0FFC0;">

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent X</th><td style="font-style:italic;text-align:center;">15</td><td style="font-style:italic;text-align:center;">18</td><td style="font-style:italic;text-align:center;">22</td><td style="font-style:italic;text-align:center;">19</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Y</th><td style="font-style:italic;text-align:center;">10</td><td style="font-style:italic;text-align:center;">11</td><td style="font-style:italic;text-align:center;">13</td><td style="font-style:italic;text-align:center;">14,5</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Z</th><td style="font-style:italic;text-align:center;">24</td><td style="font-style:italic;text-align:center;">28</td><td style="font-style:italic;text-align:center;">32</td><td style="font-style:italic;text-align:center;">30</td>

</tr>

</tbody>      

<tfoot style="background-color:#FFFFC0;">

<tr>

<td colspan="5" style="font-size:xx-small;text-align:right;">Wszystkie wartości są liczone w tys. kg.</td></td>

</tr>

</tfoot>

</table>

</div>

<</przykład>>

W kolejnym przykładzie widać tabelę z podwójnym wewnętrznym obramowaniem.

TABLE

{

border:solid black 1px ;  

border-collapse:separate;

}

<<przykład>>

<div class="przyklad">

<table style="margin-left:1cm;paddin-left:1cm;border:solid 1px black;border-collapse:separate;">

<CAPTION style="font-style:italic;text-align:left;"><span style="font-weight:bold;">Tabela 1.1.</span> Sprzedaż pomidorów</CAPTION> 

<thead style="background-color:#C0C0C0;">

<tr>

<th scope="row" style="color:green;padding:10px;">&nbsp;</th><th scope="row" style="color:green;padding:10px;">2006</th><th scope="row" style="color:green;padding:10px;">2007</th><th scope="row" style="color:green;padding:10px;">2008</th><th scope="row" style="color:green;padding:10px;">2009</th>

</tr>

</thead>      

<tbody style="background-color:#C0FFC0;">

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent X</th><td style="font-style:italic;text-align:center;">15</td><td style="font-style:italic;text-align:center;">18</td><td style="font-style:italic;text-align:center;">22</td><td style="font-style:italic;text-align:center;">19</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Y</th><td style="font-style:italic;text-align:center;">10</td><td style="font-style:italic;text-align:center;">11</td><td style="font-style:italic;text-align:center;">13</td><td style="font-style:italic;text-align:center;">14,5</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Z</th><td style="font-style:italic;text-align:center;">24</td><td style="font-style:italic;text-align:center;">28</td><td style="font-style:italic;text-align:center;">32</td><td style="font-style:italic;text-align:center;">30</td>

</tr>

</tbody>      

<tfoot style="background-color:#FFFFC0;">

<tr>

<td colspan="5" style="font-size:xx-small;text-align:right;">Wszystkie wartości są liczone w tys. kg.</td></td>

</tr>

</tfoot>

</table>

</div>

<</przykład>>

Kontrola pustych komórek

empty-cells

Dostępne wartości:

show | hide | inherit

Wartość domyślna:

show

Przykład:

table {empty-cells:hide;}

Dziedziczenie:

Tak

Obsługa:

Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Domyślnie przeglądarka wyświetla wszystkie komórki tabeli, nawet jeżeli są one puste. W niektórych przypadkach takie rozwiązanie wygląda nieciekawie i dlatego CSS umożliwia kontrolę sposobu prezentacji pustych komórek tabeli. Służy do tego polecenie empty-cells.

Poniższy przykład prezentuje tabelę, w której wyłączyłem pokazywanie pustych komórek.

TABLE

{

border:solid black 1px;   

empty-cells:hide;

}

<<przykład>>

<div class="przyklad">

<table style="margin-left:1cm;paddin-left:1cm;border:solid 1px black;border-collapse:separate;empty-cells:hide;">

<CAPTION style="font-style:italic;text-align:left;"><span style="font-weight:bold;">Tabela 1.1.</span> Sprzedaż pomidorów</CAPTION> 

<thead style="background-color:#C0C0C0;">

<tr>

<th scope="row" style="color:green;padding:10px;"></th><th scope="row" style="color:green;padding:10px;">2006</th><th scope="row" style="color:green;padding:10px;">2007</th><th scope="row" style="color:green;padding:10px;">2008</th><th scope="row" style="color:green;padding:10px;">2009</th>

</tr>

</thead>      

<tbody style="background-color:#C0FFC0;">

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent X</th><td style="font-style:italic;text-align:center;">15</td><td style="font-style:italic;text-align:center;">18</td><td style="font-style:italic;text-align:center;">22</td><td style="font-style:italic;text-align:center;">19</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Y</th><td style="font-style:italic;text-align:center;">10</td><td style="font-style:italic;text-align:center;">11</td><td style="font-style:italic;text-align:center;">13</td><td style="font-style:italic;text-align:center;">14,5</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Z</th><td style="font-style:italic;text-align:center;">24</td><td style="font-style:italic;text-align:center;">28</td><td style="font-style:italic;text-align:center;">32</td><td style="font-style:italic;text-align:center;">30</td>

</tr>

</tbody>      

<tfoot style="background-color:#FFFFC0;">

<tr>

<td colspan="5" style="font-size:xx-small;text-align:right;">Wszystkie wartości są liczone w tys. kg.</td></td>

</tr>

</tfoot>

</table>

</div>

<</przykład>>

Rysunek 9.1 przedstawia tabelę, w której ukryto puste komórki i jest on przeznaczony dla posiadaczy przeglądarek nieobsługujących tego stylu. Wśród nowych przeglądarek Opera ma problem z prawidłowym ukryciem pustej komórki i nadal wyświetla w tym miejscu tło.

Rysunek 9.1. Przykład tabeli z ukrytymi pustymi komórkami (prostokąt z białym tłem to miejsce po ukrytej komórce)

Kolejny przykład prezentuje tabelę, w której pokazywane są wszystkie komórki, bez względu na to, czy są one pełne, czy też puste. Taki stan jest domyślnym ustawieniem i działa poprawnie w każdej przeglądarce.

TABLE

{

border:solid black 1px;   

empty-cells:show;

}

<<przykład>>

<div class="przyklad">

<table style="margin-left:1cm;paddin-left:1cm;border:solid 1px black;border-collapse:separate;empty-cells:show;">

<CAPTION style="font-style:italic;text-align:left;"><span style="font-weight:bold;">Tabela 1.1.</span> Sprzedaż pomidorów</CAPTION> 

<thead style="background-color:#C0C0C0;">

<tr>

<th scope="row" style="color:green;padding:10px;"></th><th scope="row" style="color:green;padding:10px;">2006</th><th scope="row" style="color:green;padding:10px;">2007</th><th scope="row" style="color:green;padding:10px;">2008</th><th scope="row" style="color:green;padding:10px;">2009</th>

</tr>

</thead>      

<tbody style="background-color:#C0FFC0;">

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent X</th><td style="font-style:italic;text-align:center;">15</td><td style="font-style:italic;text-align:center;">18</td><td style="font-style:italic;text-align:center;">22</td><td style="font-style:italic;text-align:center;">19</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Y</th><td style="font-style:italic;text-align:center;">10</td><td style="font-style:italic;text-align:center;">11</td><td style="font-style:italic;text-align:center;">13</td><td style="font-style:italic;text-align:center;">14,5</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Z</th><td style="font-style:italic;text-align:center;">24</td><td style="font-style:italic;text-align:center;">28</td><td style="font-style:italic;text-align:center;">32</td><td style="font-style:italic;text-align:center;">30</td>

</tr>

</tbody>      

<tfoot style="background-color:#FFFFC0;">

<tr>

<td colspan="5" style="font-size:xx-small;text-align:right;">Wszystkie wartości są liczone w tys. kg.</td></td>

</tr>

</tfoot>

</table>

</div>

<</przykład>>

Generowanie tabeli

table-layout

Dostępne wartości:

auto | fixed | inherit

Wartość domyślna:

auto

Przykład:

table {table-layout:fixed;}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Domyślnie wszystkie przeglądarki podczas wyświetlania strony, w której występuje tabela, wstrzymują wyświetlanie tabeli aż do czasu, gdy cały jej kod zostanie pobrany i odpowiednio zinterpretowany. Takie podejście do prezentacji tabel w przypadku bardzo rozbudowanych konstrukcji znacznie wydłuża proces otwierania witryny. Dlatego w specyfikacji CSS znajdziemy odpowiednie polecenie, za pomocą którego możemy określić sposób wyświetlania tabeli.

Poniższy przykład wymusi ładowanie tabeli bez jej uprzedniej obróbki w pamięci. Wybierając takie ustawienia, musimy liczyć się z tym, że podczas wczytywania strony o skomplikowanej strukturze będzie na niej panować zamieszanie aż do czasu zakończenia procesu wczytywania.

TABLE

{

table-layout:fixed;

}

Kolejny przykład włącza domyślne ustawienia przeglądarki, w efekcie czego tabela będzie pokazana dopiero po wczytaniu całości kodu. Pozwala to na zachowanie porządku na stronie w czasie pobierania kodu, ale równocześnie wydłuża czas wczytywania witryny.

TABLE

{

table-layout:auto;

}

Podpis tabeli

caption-side

Dostępne wartości:

top | bottom | left | right | inherit

Wartość domyślna:

top

Przykład:

table {caption-side:bottom;}

Dziedziczenie:

Tak

Obsługa:

Mozilla Firefox

Pozycja podpisu tabeli może być kontrolowana za pomocą CSS i polecenia caption-side. Podpis może być umieszczony na dole, na górze, z prawej lub lewej strony tabeli.

<table style="caption-side:top;">

<table style="caption-side:bottom;">

<table style="caption-side:left;">

<table style="caption-side:right;">

<<przykład>>

<div class="przyklad">

<h3>Podpis tabeli na górze</h3>

<table style="margin-left:1cm;paddin-left:1cm;border:solid 1px black;border-collapse:separate;empty-cells:show;caption-side:top;">

<CAPTION style="font-style:italic;text-align:left;"><span style="font-weight:bold;">Tabela 1.1.</span> Sprzedaż pomidorów</CAPTION> 

<thead style="background-color:#C0C0C0;">

<tr>

<th scope="row" style="color:green;padding:10px;"></th><th scope="row" style="color:green;padding:10px;">2006</th><th scope="row" style="color:green;padding:10px;">2007</th><th scope="row" style="color:green;padding:10px;">2008</th><th scope="row" style="color:green;padding:10px;">2009</th>

</tr>

</thead>      

<tbody style="background-color:#C0FFC0;">

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent X</th><td style="font-style:italic;text-align:center;">15</td><td style="font-style:italic;text-align:center;">18</td><td style="font-style:italic;text-align:center;">22</td><td style="font-style:italic;text-align:center;">19</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Y</th><td style="font-style:italic;text-align:center;">10</td><td style="font-style:italic;text-align:center;">11</td><td style="font-style:italic;text-align:center;">13</td><td style="font-style:italic;text-align:center;">14,5</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Z</th><td style="font-style:italic;text-align:center;">24</td><td style="font-style:italic;text-align:center;">28</td><td style="font-style:italic;text-align:center;">32</td><td style="font-style:italic;text-align:center;">30</td>

</tr>

</tbody>      

<tfoot style="background-color:#FFFFC0;">

<tr>

<td colspan="5" style="font-size:xx-small;text-align:right;">Wszystkie wartości są liczone w tys. kg.</td></td>

</tr>

</tfoot>

</table>

 

<h3>Podpis tabeli na dole</h3>

<table style="margin-left:1cm;paddin-left:1cm;border:solid 1px black;border-collapse:separate;empty-cells:show;caption-side:bottom;">

<CAPTION style="font-style:italic;text-align:left;"><span style="font-weight:bold;">Tabela 1.1.</span> Sprzedaż pomidorów</CAPTION> 

<thead style="background-color:#C0C0C0;">

<tr>

<th scope="row" style="color:green;padding:10px;"></th><th scope="row" style="color:green;padding:10px;">2006</th><th scope="row" style="color:green;padding:10px;">2007</th><th scope="row" style="color:green;padding:10px;">2008</th><th scope="row" style="color:green;padding:10px;">2009</th>

</tr>

</thead>      

<tbody style="background-color:#C0FFC0;">

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent X</th><td style="font-style:italic;text-align:center;">15</td><td style="font-style:italic;text-align:center;">18</td><td style="font-style:italic;text-align:center;">22</td><td style="font-style:italic;text-align:center;">19</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Y</th><td style="font-style:italic;text-align:center;">10</td><td style="font-style:italic;text-align:center;">11</td><td style="font-style:italic;text-align:center;">13</td><td style="font-style:italic;text-align:center;">14,5</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Z</th><td style="font-style:italic;text-align:center;">24</td><td style="font-style:italic;text-align:center;">28</td><td style="font-style:italic;text-align:center;">32</td><td style="font-style:italic;text-align:center;">30</td>

</tr>

</tbody>      

<tfoot style="background-color:#FFFFC0;">

<tr>

<td colspan="5" style="font-size:xx-small;text-align:right;">Wszystkie wartości są liczone w tys. kg.</td></td>

</tr>

</tfoot>

</table>

 

<h3>Podpis tabeli z lewej</h3>

<table style="margin-left:1cm;paddin-left:1cm;border:solid 1px black;border-collapse:separate;empty-cells:show;caption-side:left;">

<CAPTION style="font-style:italic;text-align:left;"><span style="font-weight:bold;">Tabela 1.1.</span> Sprzedaż pomidorów</CAPTION> 

<thead style="background-color:#C0C0C0;">

<tr>

<th scope="row" style="color:green;padding:10px;"></th><th scope="row" style="color:green;padding:10px;">2006</th><th scope="row" style="color:green;padding:10px;">2007</th><th scope="row" style="color:green;padding:10px;">2008</th><th scope="row" style="color:green;padding:10px;">2009</th>

</tr>

</thead>      

<tbody style="background-color:#C0FFC0;">

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent X</th><td style="font-style:italic;text-align:center;">15</td><td style="font-style:italic;text-align:center;">18</td><td style="font-style:italic;text-align:center;">22</td><td style="font-style:italic;text-align:center;">19</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Y</th><td style="font-style:italic;text-align:center;">10</td><td style="font-style:italic;text-align:center;">11</td><td style="font-style:italic;text-align:center;">13</td><td style="font-style:italic;text-align:center;">14,5</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Z</th><td style="font-style:italic;text-align:center;">24</td><td style="font-style:italic;text-align:center;">28</td><td style="font-style:italic;text-align:center;">32</td><td style="font-style:italic;text-align:center;">30</td>

</tr>

</tbody>      

<tfoot style="background-color:#FFFFC0;">

<tr>

<td colspan="5" style="font-size:xx-small;text-align:right;">Wszystkie wartości są liczone w tys. kg.</td></td>

</tr>

</tfoot>

</table>

 

<h3>Podpis tabeli z prawej</h3>

<table style="margin-left:1cm;paddin-left:1cm;border:solid 1px black;border-collapse:separate;empty-cells:show;caption-side:right;">

<CAPTION style="font-style:italic;text-align:left;"><span style="font-weight:bold;">Tabela 1.1.</span> Sprzedaż pomidorów</CAPTION> 

<thead style="background-color:#C0C0C0;">

<tr>

<th scope="row" style="color:green;padding:10px;"></th><th scope="row" style="color:green;padding:10px;">2006</th><th scope="row" style="color:green;padding:10px;">2007</th><th scope="row" style="color:green;padding:10px;">2008</th><th scope="row" style="color:green;padding:10px;">2009</th>

</tr>

</thead>      

<tbody style="background-color:#C0FFC0;">

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent X</th><td style="font-style:italic;text-align:center;">15</td><td style="font-style:italic;text-align:center;">18</td><td style="font-style:italic;text-align:center;">22</td><td style="font-style:italic;text-align:center;">19</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Y</th><td style="font-style:italic;text-align:center;">10</td><td style="font-style:italic;text-align:center;">11</td><td style="font-style:italic;text-align:center;">13</td><td style="font-style:italic;text-align:center;">14,5</td>

</tr>

<tr>

<th scope="col" style="color:navy;background-color:#C0C0C0;padding:10px;">Producent Z</th><td style="font-style:italic;text-align:center;">24</td><td style="font-style:italic;text-align:center;">28</td><td style="font-style:italic;text-align:center;">32</td><td style="font-style:italic;text-align:center;">30</td>

</tr>

</tbody>      

<tfoot style="background-color:#FFFFC0;">

<tr>

<td colspan="5" style="font-size:xx-small;text-align:right;">Wszystkie wartości są liczone w tys. kg.</td></td>

</tr>

</tfoot>

</table>

</div>

<</przykład>>

Na rysunkach 9.2, 9.3, 9.4 oraz 9.5 widać tabele z podpisami w różnych miejscach. Rysunki przeznaczone są dla posiadaczy innych przeglądarek niż Mozilla Firefox.

Rysunek 9.2. Tabela z podpisem na górze — stan domyślny

 

Rysunek 9.3. Tabela z podpisem na dole

 

Rysunek 9.4. Tabela z podpisem z lewej strony

 

Rysunek 9.5. Tabela z podpisem z prawej strony

 

 

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15577117