path: root/files/pl/web/css/na_początek/tables/index.html

---
title: Tabele
slug: Web/CSS/Na_początek/Tables
tags:
  - 'CSS:Na_początek'
translation_of: Learn/CSS/Building_blocks/Styling_tables
translation_of_original: Web/Guide/CSS/Getting_started/Tables
---
<p> </p>
<p>Ta strona bardziej szczegółowo opisuje selektory oraz sposoby tworzenia stylów dla tabel.</p>
<p>Stworzysz nowy dokument zawierający tabelę oraz nadasz mu styl.</p>
<h3 id="Informacja:_Wi.C4.99cej_o_selektorach" name="Informacja:_Wi.C4.99cej_o_selektorach">Informacja: Więcej o selektorach</h3>
<p>CSS daje wiele sposobów na wybranie elementów, bazując na ich wzajemnych relacjach. Możesz ich użyć, aby stworzyć bardziej dokładne selektory.</p>
<p>Poniżej znajduje się podsumowanie selektorów bazujące na ich wzajemnych relacjach:</p>
<table style="margin-left: 2em;">
  <tbody>
    <tr>
      <td style="width: 10em;"><strong>Selektor</strong></td>
      <td><strong>Wybiera</strong></td>
    </tr>
    <tr>
      <td><code>A E</code></td>
      <td>Dowolny element E, który jest <b>potomkiem</b> elementu A (to znaczy jest dzieckiem albo dzieckiem dziecka, <i>itp</i>.))</td>
    </tr>
    <tr>
      <td><code>A &gt; E</code></td>
      <td>Dowolny element E, który jest dzieckiem elementu A</td>
    </tr>
    <tr>
      <td><code>E:first-child</code></td>
      <td>Dowolny element E, który jest pierwszym dzieckiem swojego rodzica</td>
    </tr>
    <tr>
      <td><code>B + E</code></td>
      <td>Dowolny element E, który jest następnym z <i>rodzeństwa</i> elementu B (to znaczy: następnym dzieckiem tego samego rodzica)</td>
    </tr>
  </tbody>
</table>
<p>Możesz łączyć te selektory w złożone relacje.</p>
<p>Możesz też użyć symbolu <code>*</code> (gwiazdka), który znaczy "dowolny element".</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
  <caption>
    Przykład</caption>
  <tbody>
    <tr>
      <td>Tabela HTML posiada atrybut <code>id</code>, ale jej wiersze i komórki nie posiadają własnych identyfikatorów:
        <div style="width: 30em;">
          <p>&lt;TABLE id="data-table-1"&gt; ... &lt;TR&gt; &lt;TD&gt;Prefiks&lt;/TD&gt; &lt;TD&gt;0001&lt;/TD&gt; &lt;TD&gt;domyślnie&lt;/TD&gt; &lt;/TR&gt; ...</p>
        </div>
        <p>Poniższe reguły powodują, że pierwsza komórka w każdym wierszu jest pogrubiona, natomiast druga używa kroju monospace. Dotyczą one tylko jednej, określonej tabeli w dokumencie:</p>
        <div style="width: 45em;">
          <ol>
            <li>data-table-1 td:first-child {font-weight: bolder;}</li>
            <li>data-table-1 td:first-child + td {font-family: monospace;}</li>
          </ol>
        </div>
        <p>Wygląda to tak:</p>
        <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
          <tbody>
            <tr>
              <td>
                <table style="width: 18em; margin-right: 2em;">
                  <tbody>
                    <tr>
                      <td><strong>Prefiks</strong></td>
                      <td>&lt;tt&gt;0001&lt;/tt&gt;</td>
                      <td>domyślnie</td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
  <caption>
    Więcej szczegółów</caption>
  <tbody>
    <tr>
      <td>Kiedy stworzysz bardziej szczegółowy selektor, zazwyczaj wzrośnie jego priorytet.
        <p>Jeżeli korzystasz z opisanych tu technik, unikasz potrzeby określania atrybutu <code>class</code> lub <code>id</code> w wielu znacznikach dokumentu. Zamiast tego logika zostaje przeniesiona na CSS.</p>
        <p>W dużych projektach, gdzie prędkość ma duże znaczenie, możesz sprawić, że twój arkusz stylów będzie działał szybciej, poprzez unikanie złożonych reguł, które zależą od relacji między elementami.</p>
        <p>Aby dowiedzieć się więcej o selektorach, zajrzyj do specyfikacji CSS na stronę <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selektory</a>.</p>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="Informacja:_Tabele" name="Informacja:_Tabele">Informacja: Tabele</h3>
<p>Tabela układa informacje w prostokątną siatkę. Niektóre tabele mogą być skomplikowane, a różne przeglądarki mogą pokazywać różne wyniki.</p>
<p>Kiedy tworzysz swój dokument, użyj tabel do wyrażenia relacji między elementami informacji. Wówczas nie ma znaczenia, jeśli różne przeglądarki wyświetlą je w trochę inny sposób, ponieważ przekaz pozostanie jasny.</p>
<p>Nie używaj tabel w sposób, do którego nie zostały przeznaczone, na przykład aby tworzyć przy ich pomocy układ wizualny. Techniki opisane na poprzedniej stronie tego kursu (<a href="pl/CSS/Na_pocz%c4%85tek/Uk%c5%82ad">Układ</a>) nadają się do tego znacznie lepiej.</p>
<h4 id="Struktura_tabeli" name="Struktura_tabeli">Struktura tabeli</h4>
<p>W tabeli każdy kawałek informacji jest wyświetlany w <i>komórce</i>.</p>
<p>Komórki wyświetlane w jednej linii tworzą <i>wiersz</i>.</p>
<p>W niektórych tabelach wiersze mogą być grupowane. Specjalna grupa wierszy, która znajduje się na górze tabeli, nazywa się <i>nagłówkiem</i>. Specjalna grupa wierszy znajdująca się na dole tabeli nazywa się <i>stopką</i>. Główne wiersze w tabeli tworzą jej <i>ciało</i> i one również mogą być łączone w grupy.</p>
<p>Komórki ułożone w pionowej linii tworzą <i>kolumnę</i>, ale użyteczność kolumn w tabelach CSS jest ograniczona.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
  <caption>
    Przykład</caption>
  <tbody>
    <tr>
      <td>Tabela selektorów znajdująca się na górze tej strony posiada dziesięć komórek i pięć wierszy.
        <p>Pierwszy wiersz jest nagłówkiem. Kolejne cztery są ciałem tabeli. Nie posiada ona stopki.</p>
        <p>Ma natomiast dwie kolumny.</p>
      </td>
    </tr>
  </tbody>
</table>
<p><br>
  Ten kurs omawia tylko proste tabele, dla których wynik jest przewidywalny. W prostej tabeli każda komórka zajmuje miejsce w jednym wierszu i jednej kolumnie. Możesz skorzystać z CSS-u do złożonych tabel, gdzie komórki rozciągają się na więcej niż jeden wiersz lub kolumnę, ale tego typu tabele wykraczają poza zakres tego kursu.</p>
<h4 id="Ramki" name="Ramki">Ramki</h4>
<p>Komórki nie posiadają marginesów zewnętrznych.</p>
<p>Komórki posiadają ramki oraz marginesy wewnętrzne. Domyślnie ramki są oddzielone o wartość własności <code>border-spacing</code> tabeli. Możesz usunąć całkowicie odstępy przez ustawienie własności <code>border-collapse</code> tabeli na wartość <code>collapse</code>.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
  <caption>
    Przykład</caption>
  <tbody>
    <tr>
      <td>Poniżej widać trzy tabele.
        <p>Tabela po lewej ma ustawione odstępy ramek na 0.5 em. Tabela w środku ma ustawione odstępy ramek na zero. Tabela po prawej ma zwinięte ramki:</p>
        <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
          <tbody>
            <tr>
              <td style="padding-right: 2em;">
                <table style="">
                  <tbody>
                    <tr>
                      <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
                      <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
                    </tr>
                    <tr>
                      <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
                      <td style="border: 1px solid #c00; text-align: center;">Spades</td>
                    </tr>
                  </tbody>
                </table>
              </td>
              <td style="padding-right: 2em;">
                <table style="">
                  <tbody>
                    <tr>
                      <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
                      <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
                    </tr>
                    <tr>
                      <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
                      <td style="border: 1px solid #c00; text-align: center;">Spades</td>
                    </tr>
                  </tbody>
                </table>
              </td>
              <td style="padding-right: 6em;">
                <table style="border-collapse: collapse;">
                  <tbody>
                    <tr>
                      <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
                      <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
                    </tr>
                    <tr>
                      <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
                      <td style="border: 1px solid #c00; text-align: center;">Spades</td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
<h4 id="Opis" name="Opis">Opis</h4>
<p><i>Opis</i> jest etykietą opisującą całą tabelę. Domyślnie jest wyświetlana nad tabelą.</p>
<p>Aby przesunąć opis na dół, ustaw jego własność <code>caption-side</code> na <code>bottom</code>. Ta własność jest dziedziczona, więc możesz ją ustawić dla całej tabeli lub innego rodzica.</p>
<p>Aby ustawić styl tekstu opisu, użyj normalnych własności tekstowych.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
  <caption>
    Przykład</caption>
  <tbody>
    <tr>
      <td>Ta tabela posiada opis na dole:
        <div style="width: 30em;">
          <ol>
            <li>demo-table &gt; caption {</li>
          </ol>
          <pre class="eval">
 caption-side: bottom;
 font-style: italic;
 text-align: right;
 }
</pre>
        </div>
        <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
          <tbody>
            <tr>
              <td>
                <table>
                  <caption>
                    Suits</caption>
                  <tbody>
                    <tr>
                      <td>
                        <table style="border-collapse: collapse;">
                          <tbody>
                            <tr>
                              <td style="border: 1px solid gray; text-align: center;">Clubs</td>
                              <td style="border: 1px solid gray; text-align: center;">Hearts</td>
                            </tr>
                            <tr>
                              <td style="border: 1px solid gray; text-align: center;">Diamonds</td>
                              <td style="border: 1px solid gray; text-align: center;">Spades</td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
<h4 id="Puste_kom.C3.B3rki" name="Puste_kom.C3.B3rki">Puste komórki</h4>
<p>Możesz wyświetlić puste komórki (czyli ich ramki oraz tło) przez określenie <code>empty-cells: show;</code> dla elementu tabeli.</p>
<p>Możesz je ukryć, określając <code>empty-cells: hide;</code>. Wtedy jeżeli element rodzic komórki posiada tło, zostanie ono pokazane w miejscu pustej komórki.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
  <caption>
    Przykład</caption>
  <tbody>
    <tr>
      <td>Poniższe tabele mają jasnozielone tło. Ich komórki mają tło jasnoszare i ciemnoszare ramki.
        <p>W lewej tabeli puste komórki są wyświetlane, w prawej ukrywane:</p>
        <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
          <tbody>
            <tr>
              <td style="padding-right: 2em;">
                <table style="background-color: #dfd;">
                  <tbody>
                    <tr>
                      <td style="border: 1px solid #555; background-color: #eee;"> </td>
                      <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td>
                    </tr>
                    <tr>
                      <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td>
                      <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td>
                    </tr>
                  </tbody>
                </table>
              </td>
              <td style="padding-right: 6em;">
                <table style="background-color: #dfd;">
                  <tbody>
                    <tr>
                      <td> </td>
                      <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td>
                    </tr>
                    <tr>
                      <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td>
                      <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
<p> </p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
  <caption>
    Więcej szczegółów</caption>
  <tbody>
    <tr>
      <td>Aby dowiedzieć się więcej o tabelach, zajrzyj do rozdziału <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tabele</a> w specyfikacji CSS.
        <p>Informacje tam zawarte wykraczają poza ten kurs, ale nie opisują różnic miedzy przeglądarkami, które mogą wpływać na wyświetlanie złożonych tabel.</p>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="Zadanie:_Ustawianie_styl.C3.B3w_dla_tabeli" name="Zadanie:_Ustawianie_styl.C3.B3w_dla_tabeli">Zadanie: Ustawianie stylów dla tabeli</h3>
<p>Stwórz nowy dokument HTML, <code>doc3.html</code>. Skopiuj i wklej poniższy kod, upewniając się, że zaznaczasz całą zawartość:</p>
<div style="width: 48em; height: 12em; overflow: auto;">
  <pre>&lt;DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;Przykładowy dokument 3&lt;/TITLE&gt;
&lt;LINK rel="stylesheet" type="text/css" href="style3.css"&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;

&lt;TABLE id="demo-table"&gt;
&lt;CAPTION&gt;Oceans&lt;/CAPTION&gt;

&lt;THEAD&gt;
&lt;TR&gt;
&lt;TH&gt;&lt;/TH&gt;
&lt;TH&gt;Area&lt;/TH&gt;
&lt;TH&gt;Mean depth&lt;/TH&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TH&gt;&lt;/TH&gt;
&lt;TH&gt;million km&lt;SUP&gt;2&lt;/SUP&gt;&lt;/TH&gt;
&lt;TH&gt;m&lt;/TH&gt;
&lt;/TR&gt;
&lt;/THEAD&gt;

&lt;TBODY&gt;
&lt;TR&gt;
&lt;TH&gt;Arctic&lt;/TH&gt;
&lt;TD&gt;13,000&lt;/TD&gt;
&lt;TD&gt;1,200&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TH&gt;Atlantic&lt;/TH&gt;
&lt;TD&gt;87,000&lt;/TD&gt;
&lt;TD&gt;3,900&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TH&gt;Pacific&lt;/TH&gt;
&lt;TD&gt;180,000&lt;/TD&gt;
&lt;TD&gt;4,000&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TH&gt;Indian&lt;/TH&gt;
&lt;TD&gt;75,000&lt;/TD&gt;
&lt;TD&gt;3,900&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TH&gt;Southern&lt;/TH&gt;
&lt;TD&gt;20,000&lt;/TD&gt;
&lt;TD&gt;4,500&lt;/TD&gt;
&lt;/TR&gt;
&lt;/TBODY&gt;

&lt;TFOOT&gt;
&lt;TR&gt;
&lt;TH&gt;Total&lt;/TH&gt;
&lt;TD&gt;361,000&lt;/TD&gt;
&lt;TD&gt;&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TH&gt;Mean&lt;/TH&gt;
&lt;TD&gt;72,000&lt;/TD&gt;
&lt;TD&gt;3,800&lt;/TD&gt;
&lt;/TR&gt;
&lt;/TFOOT&gt;

&lt;/TABLE&gt;

&lt;/BODY&gt;
&lt;/HTML&gt;
</pre>
</div>
<p>Stwórz nowy arkusz stylów, <code>style3.css</code>. Skopiuj i wklej poniższy kod, upewniając się, że zaznaczasz cały:</p>
<div style="width: 48em; height: 12em; overflow: auto;">
  <pre>/*** Styl dla doc3.html (Tabele) ***/

#demo-table {
  font: 100% sans-serif;
  background-color: #efe;
  border-collapse: collapse;
  empty-cells: show;
  border: 1px solid #7a7;
  }

#demo-table &gt; caption {
  text-align: left;
  font-weight: bold;
  font-size: 200%;
  border-bottom: .2em solid #4ca;
  margin-bottom: .5em;
  }


/* basic shared rules */
#demo-table th,
#demo-table td {
  text-align: right;
  padding-right: .5em;
  }

#demo-table th {
  font-weight: bold;
  padding-left: .5em;
  }


/* header */
#demo-table &gt; thead &gt; tr:first-child &gt; th {
  text-align: center;
  color: blue;
  }

#demo-table &gt; thead &gt; tr + tr &gt; th {
  font-style: italic;
  color: gray;
  }

/* fix size of superscript */
#demo-table sup {
  font-size: 75%;
  }

/* body */
#demo-table td {
  background-color: #cef;
  padding:.5em .5em .5em 3em;
  }

#demo-table tbody th:after {
  content: ":";
  }


/* footer */
#demo-table tfoot {
  font-weight: bold;
  }

#demo-table tfoot th {
  color: blue;
  }

#demo-table tfoot th:after {
  content: ":";
  }

#demo-table &gt; tfoot td {
  background-color: #cee;
  }

#demo-table &gt; tfoot &gt; tr:first-child td {
  border-top: .2em solid #7a7;
  }
</pre>
</div>
<p>Otwórz dokument w swojej przeglądarce. Powinien wyglądać mniej więcej tak:</p>
<table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
  <tbody>
    <tr>
      <td>
        <div>
          <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceans</p>
          <div style="border: 1px solid #7a7; background-color: #efe;">
            <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;">
              <tbody>
                <tr style="text-align: center; color: blue;">
                  <th> </th>
                  <th>Area</th>
                  <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th>
                </tr>
                <tr style="font-style: italic; color: gray;">
                  <th> </th>
                  <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th>
                  <th style="padding-left: .5em; padding-right: .5em;">m</th>
                </tr>
                <tr>
                  <th style="padding-right: .5em;">Arctic:</th>
                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td>
                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td>
                </tr>
                <tr>
                  <th style="padding-right: .5em;">Atlantic:</th>
                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td>
                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
                </tr>
                <tr>
                  <th style="padding-right: .5em;">Pacific:</th>
                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td>
                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td>
                </tr>
                <tr>
                  <th style="padding-right: .5em;">Indian:</th>
                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td>
                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
                </tr>
                <tr>
                  <th style="padding-left: .5em; padding-right: .5em;">Southern:</th>
                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td>
                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td>
                </tr>
                <tr>
                  <th style="padding-right: .5em; color: blue;">Total:</th>
                  <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
                  <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
                </tr>
                <tr>
                  <th style="padding-right: .5em; color: blue;">Mean:</th>
                  <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
                  <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<p>Porównaj reguły ze swojego arkusza stylów z wyświetloną tabelą, aby upewnić się, że rozumiesz działanie każdej reguły. Jeżeli napotkasz regułę, której nie rozumiesz, wykomentuj ją i odśwież okno przeglądarki, aby zobaczyć, co się stanie.</p>
<p>Poniżej znajduje się kilka uwag dotyczących tej tabeli:</p>
<ul>
  <li>Opis znajduje się poza ramką tabeli.</li>
  <li>Jeżeli masz określoną minimalną wielkość punktu, może to wpłynąć na indeks górny w km<sup>2</sup>.</li>
  <li>Istnieją trzy puste komórki. Dwie z nich pozwalają na pokazanie tła tabeli. Trzecia posiada własne tło i górną ramkę.</li>
  <li>Dwukropki zostały dodane przez arkusz stylów.</li>
</ul>
<p> </p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
  <caption>
    Wyzwania</caption>
  <tbody>
    <tr>
      <td>Zmień arkusz stylów tak, aby tabela wyglądała jak poniżej:
        <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
          <tbody>
            <tr>
              <td>
                <div>
                  <div style="border: 1px solid #7a7; background-color: #efe;">
                    <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;">
                      <tbody>
                        <tr style="text-align: center; color: blue;">
                          <th> </th>
                          <th>Area</th>
                          <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th>
                        </tr>
                        <tr style="font-style: italic; color: gray;">
                          <th> </th>
                          <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th>
                          <th style="padding-left: .5em; padding-right: .5em;">m</th>
                        </tr>
                        <tr>
                          <th style="padding-right: .5em;">Arctic:</th>
                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td>
                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td>
                        </tr>
                        <tr>
                          <th style="padding-right: .5em;">Atlantic:</th>
                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td>
                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td>
                        </tr>
                        <tr>
                          <th style="padding-right: .5em;">Pacific:</th>
                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td>
                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td>
                        </tr>
                        <tr>
                          <th style="padding-right: .5em;">Indian:</th>
                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td>
                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td>
                        </tr>
                        <tr>
                          <th style="padding-left: .5em; padding-right: .5em;">Southern:</th>
                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td>
                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td>
                        </tr>
                        <tr>
                          <th style="padding-right: .5em; color: blue;">Total:</th>
                          <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
                          <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
                        </tr>
                        <tr>
                          <th style="padding-right: .5em; color: blue;">Mean:</th>
                          <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
                          <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceans</p>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
<p> </p>
<h4 id="Co_dalej.3F" name="Co_dalej.3F">Co dalej?</h4>
<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>.</p>
<p>Jest to ostatnia strona tego kursu, która opisuje własności i wartości CSS. Aby dowiedzieć się więcej o własnościach i wartościach w CSS, zajrzyj na stronę <a class="external" href="http://www.w3.org/TR/CSS21/propidx.html">Full property table</a> w specyfikacji CSS.</p>
<p>Następna strona znowu wraca do tematu przeznaczenia i struktury arkuszy stylów CSS: <b><a href="pl/CSS/Na_pocz%c4%85tek/Media">Media</a></b></p>