mozilla

Tabele

 

Ta strona bardziej szczegółowo opisuje selektory oraz sposoby tworzenia stylów dla tabel.

Stworzysz nowy dokument zawierający tabelę oraz nadasz mu styl.

Informacja: Więcej o selektorach

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.

Poniżej znajduje się podsumowanie selektorów bazujące na ich wzajemnych relacjach:

Selektor Wybiera
A E Dowolny element E, który jest potomkiem elementu A (to znaczy jest dzieckiem albo dzieckiem dziecka, itp.))
A > E Dowolny element E, który jest dzieckiem elementu A
E:first-child Dowolny element E, który jest pierwszym dzieckiem swojego rodzica
B + E Dowolny element E, który jest następnym z rodzeństwa elementu B (to znaczy: następnym dzieckiem tego samego rodzica)

Możesz łączyć te selektory w złożone relacje.

Możesz też użyć symbolu * (gwiazdka), który znaczy "dowolny element".

Przykład
Tabela HTML posiada atrybut id, ale jej wiersze i komórki nie posiadają własnych identyfikatorów:

<TABLE id="data-table-1"> ... <TR> <TD>Prefiks</TD> <TD>0001</TD> <TD>domyślnie</TD> </TR> ...

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:

  1. data-table-1 td:first-child {font-weight: bolder;}
  2. data-table-1 td:first-child + td {font-family: monospace;}

Wygląda to tak:

Prefiks <tt>0001</tt> domyślnie
Więcej szczegółów
Kiedy stworzysz bardziej szczegółowy selektor, zazwyczaj wzrośnie jego priorytet.

Jeżeli korzystasz z opisanych tu technik, unikasz potrzeby określania atrybutu class lub id w wielu znacznikach dokumentu. Zamiast tego logika zostaje przeniesiona na CSS.

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.

Aby dowiedzieć się więcej o selektorach, zajrzyj do specyfikacji CSS na stronę Selektory.

Informacja: Tabele

Tabela układa informacje w prostokątną siatkę. Niektóre tabele mogą być skomplikowane, a różne przeglądarki mogą pokazywać różne wyniki.

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.

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 (Układ) nadają się do tego znacznie lepiej.

Struktura tabeli

W tabeli każdy kawałek informacji jest wyświetlany w komórce.

Komórki wyświetlane w jednej linii tworzą wiersz.

W niektórych tabelach wiersze mogą być grupowane. Specjalna grupa wierszy, która znajduje się na górze tabeli, nazywa się nagłówkiem. Specjalna grupa wierszy znajdująca się na dole tabeli nazywa się stopką. Główne wiersze w tabeli tworzą jej ciało i one również mogą być łączone w grupy.

Komórki ułożone w pionowej linii tworzą kolumnę, ale użyteczność kolumn w tabelach CSS jest ograniczona.

Przykład
Tabela selektorów znajdująca się na górze tej strony posiada dziesięć komórek i pięć wierszy.

Pierwszy wiersz jest nagłówkiem. Kolejne cztery są ciałem tabeli. Nie posiada ona stopki.

Ma natomiast dwie kolumny.


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.

Ramki

Komórki nie posiadają marginesów zewnętrznych.

Komórki posiadają ramki oraz marginesy wewnętrzne. Domyślnie ramki są oddzielone o wartość własności border-spacing tabeli. Możesz usunąć całkowicie odstępy przez ustawienie własności border-collapse tabeli na wartość collapse.

Przykład
Poniżej widać trzy tabele.

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:

Clubs Hearts
Diamonds Spades
Clubs Hearts
Diamonds Spades
Clubs Hearts
Diamonds Spades

Opis

Opis jest etykietą opisującą całą tabelę. Domyślnie jest wyświetlana nad tabelą.

Aby przesunąć opis na dół, ustaw jego własność caption-side na bottom. Ta własność jest dziedziczona, więc możesz ją ustawić dla całej tabeli lub innego rodzica.

Aby ustawić styl tekstu opisu, użyj normalnych własności tekstowych.

Przykład
Ta tabela posiada opis na dole:
  1. demo-table > caption {
 caption-side: bottom;
 font-style: italic;
 text-align: right;
 }
Suits
Clubs Hearts
Diamonds Spades

Puste komórki

Możesz wyświetlić puste komórki (czyli ich ramki oraz tło) przez określenie empty-cells: show; dla elementu tabeli.

Możesz je ukryć, określając empty-cells: hide;. Wtedy jeżeli element rodzic komórki posiada tło, zostanie ono pokazane w miejscu pustej komórki.

Przykład
Poniższe tabele mają jasnozielone tło. Ich komórki mają tło jasnoszare i ciemnoszare ramki.

W lewej tabeli puste komórki są wyświetlane, w prawej ukrywane:

  Hearts
Diamonds Spades
  Hearts
Diamonds Spades

 

Więcej szczegółów
Aby dowiedzieć się więcej o tabelach, zajrzyj do rozdziału Tabele w specyfikacji CSS.

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.

Zadanie: Ustawianie stylów dla tabeli

Stwórz nowy dokument HTML, doc3.html. Skopiuj i wklej poniższy kod, upewniając się, że zaznaczasz całą zawartość:

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Przykładowy dokument 3</TITLE>
<LINK rel="stylesheet" type="text/css" href="style3.css">
</HEAD>
<BODY>

<TABLE id="demo-table">
<CAPTION>Oceans</CAPTION>

<THEAD>
<TR>
<TH></TH>
<TH>Area</TH>
<TH>Mean depth</TH>
</TR>
<TR>
<TH></TH>
<TH>million km<SUP>2</SUP></TH>
<TH>m</TH>
</TR>
</THEAD>

<TBODY>
<TR>
<TH>Arctic</TH>
<TD>13,000</TD>
<TD>1,200</TD>
</TR>
<TR>
<TH>Atlantic</TH>
<TD>87,000</TD>
<TD>3,900</TD>
</TR>
<TR>
<TH>Pacific</TH>
<TD>180,000</TD>
<TD>4,000</TD>
</TR>
<TR>
<TH>Indian</TH>
<TD>75,000</TD>
<TD>3,900</TD>
</TR>
<TR>
<TH>Southern</TH>
<TD>20,000</TD>
<TD>4,500</TD>
</TR>
</TBODY>

<TFOOT>
<TR>
<TH>Total</TH>
<TD>361,000</TD>
<TD></TD>
</TR>
<TR>
<TH>Mean</TH>
<TD>72,000</TD>
<TD>3,800</TD>
</TR>
</TFOOT>

</TABLE>
   
</BODY>
</HTML>

Stwórz nowy arkusz stylów, style3.css. Skopiuj i wklej poniższy kod, upewniając się, że zaznaczasz cały:

/*** 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 > 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 > thead > tr:first-child > th {
  text-align: center;
  color: blue;
  }

#demo-table > thead > tr + tr > 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 > tfoot td {
  background-color: #cee;
  }

#demo-table > tfoot > tr:first-child td {
  border-top: .2em solid #7a7;
  }

Otwórz dokument w swojej przeglądarce. Powinien wyglądać mniej więcej tak:

Oceans

  Area Mean depth
  million km2 m
Arctic: 13,000 1,200
Atlantic: 87,000 3,900
Pacific: 180,000 4,000
Indian: 75,000 3,900
Southern: 20,000 4,500
Total: 361,000  
Mean: 72,000 3,800

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.

Poniżej znajduje się kilka uwag dotyczących tej tabeli:

  • Opis znajduje się poza ramką tabeli.
  • Jeżeli masz określoną minimalną wielkość punktu, może to wpłynąć na indeks górny w km2.
  • Istnieją trzy puste komórki. Dwie z nich pozwalają na pokazanie tła tabeli. Trzecia posiada własne tło i górną ramkę.
  • Dwukropki zostały dodane przez arkusz stylów.

 

Wyzwania
Zmień arkusz stylów tak, aby tabela wyglądała jak poniżej:
  Area Mean depth
  million km2 m
Arctic: 13,000 1,200
Atlantic: 87,000 3,900
Pacific: 180,000 4,000
Indian: 75,000 3,900
Southern: 20,000 4,500
Total: 361,000  
Mean: 72,000 3,800

Oceans

 

Co dalej?

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji.

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ę Full property table w specyfikacji CSS.

Następna strona znowu wraca do tematu przeznaczenia i struktury arkuszy stylów CSS: Media

Autorzy i etykiety dokumentu

Etykiety: 
Contributors to this page: Verruckt, teoli, gandalf, Ptak82, ethertank, Takenbot, Anonymous, Ruby, Witia
Ostatnia aktualizacja: teoli,