unslug pl: move

1 files changed, 597 insertions, 0 deletions

diff --git a/files/pl/learn/css/building_blocks/styling_tables/index.html b/files/pl/learn/css/building_blocks/styling_tables/index.html
new file mode 100644
index 0000000000..3e09737217
--- /dev/null
+++ b/files/pl/learn/css/building_blocks/styling_tables/index.html
@@ -0,0 +1,597 @@
+---
+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>