Ta strona bardziej szczegółowo opisuje selektory oraz sposoby tworzenia stylów dla tabel.
Stworzysz nowy dokument zawierający tabelę oraz nadasz mu styl.
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".
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:
Wygląda to tak:
|
| Kiedy stworzysz bardziej szczegółowy selektor, zazwyczaj wzrośnie jego priorytet.
Jeżeli korzystasz z opisanych tu technik, unikasz potrzeby określania atrybutu 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. |
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.
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.
| 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.
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.
| 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:
|
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.
Ta tabela posiada opis na dole:
caption-side: bottom; font-style: italic; text-align: right; }
|
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.
| 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:
|
| 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. |
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
|
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:
Zmień arkusz stylów tak, aby tabela wyglądała jak poniżej:
|
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