Tabele
Wstęp
W tym rozdziale dowiesz się jak formatować tabele. Jak połączyć ramki tabeli, zmienić położenie tekstu w komórkach oraz jak zmienić wygląd co drugiego wiersza tabeli.
border-collapse
Właściwośćborder-collapsesłuży do ustalenia czy ramki tabeli mają się połączyć w jedną ramkę, czy też mają być wyświetlane oddzielnie.
| 1 2 3 4 5 6 7 8 9101112 | <p>Ramka scalona</p><tablestyle="border-collapse: collapse;"><tr><td>komórka 1</td><td>komórka 2</td><td>komórka 3</td></tr><tr><td>komórka 1</td><td>komórka 2</td><td>komórka 3</td></tr><tr><td>komórka 1</td><td>komórka 2</td><td>komórka 3</td></tr></table><p>Ramka rozłączona</p><tablestyle="border-collapse: separate;"><tr><td>komórka 1</td><td>komórka 2</td><td>komórka 3</td></tr><tr><td>komórka 1</td><td>komórka 2</td><td>komórka 3</td></tr><tr><td>komórka 1</td><td>komórka 2</td><td>komórka 3</td></tr></table> |
|---|---|
Jak widzisz, kiedy ramki są rozdzielone, mają kilku pikselowy odstęp. Do tej pory nie spotkałem rozłączonych ramek na nowoczesnych stronach internetowych, staraj się też raczej ich nie używać.
vertical-align i text-align
Właściwośćtext-alignjuż poznałeś i wiesz, że można dzięki niej zmieniać położenie tekstu horyzontalnie, natomiastvertical-alignzmienia położenie wertykalnie w komórkach tabeli. Wartości jakie przyjmuje to:
top- u góry;middle- w środku;bottom- na dole.
Uruchom poniższy przykład, aby zobaczyć efekt użycia tych wartości.
| 1 2 3 4 5 6 7 8 91011121314151617 | <tablestyle="border-collapse: collapse;"><tr><tdstyle="text-align: left;vertical-align: top;">left - top</td><tdstyle="text-align: center;vertical-align: top;">center - top</td><tdstyle="text-align: right;vertical-align: top;">right - top</td></tr><tr><tdstyle="text-align: left;vertical-align: middle;">left - middle</td><tdstyle="text-align: center;vertical-align: middle;">center - middle</td><tdstyle="text-align: right;vertical-align: middle;">right - middle</td></tr><tr><tdstyle="text-align: left;vertical-align: bottom;">left - bottom</td><tdstyle="text-align: center;vertical-align: bottom;">center - bottom</td><tdstyle="text-align: right;vertical-align: bottom;">right - bottom</td></tr></table> |
|---|---|
hover
W tym miejscu musimy wprowadzić takie pojęcie jakpseudoklasa. Pozwala nam ona wybrać pewne elementy na podstawie ich aktualnego stanu. W kodzie CSS pseudoklasy zapisujemy po selektorze, po którym należy jeszcze umieścić dwukropek:. Użyjemy teraz pseudoklasyhover, która zostaje dodana do elementów, gdy najedziemy na nie myszką. Po opuszczeniu myszką obszaru danego elementu, pseudoklasahoverjest dla niego dezaktywowana. Jeśli ciężko Ci zrozumieć ten krótki opis, to na pewno wszystko wyjaśni się po uruchomieniu poniższego przykładu.
Gdy najedziesz na paragraf zmieni się jego kolor tła.
| 123 | p:hover{background-color:grey;} |
|---|---|
Dzięki tej pseudoklasie można bardzo ładnie stylować tabelę.
| 1 2 3 4 5 6 7 8 91011 | tbodytr:hover{background-color:#ccc;}table{border-collapse:collapse;}td{width:100px;height:40px;text-align:center;} |
|---|---|
nth-child
Innym ciekawym działaniem jest zmiana, na przykład tła koloru, co drugiemu wierszowi ciała tabeli. Tu będziemy wykorzystywać inną pseudoklasę, a mianowicienth-child()gdzie w nawiasach zapiszemy, które elementy chcemy zmienić.
Więcej szczegółów na temat tej pseudoklasy znajdziesz w dodatku. Na chwilę obecną zapamiętaj, że w nawiasach można wpisaćodd- nieparzyste alboeven- parzyste.
| 1 2 3 4 5 6 7 8 9101112131415 | tbodytr:nth-child(even){background-color:#FF695C;}tbodytr:nth-child(odd){background-color:#668CFF;}table{border-collapse:collapse;}td{width:100px;height:40px;text-align:center;} |
|---|---|
Jak zobaczyłeś w przykładzie, parzyste wiersze posiadają czerwony kolor tła, a nieparzyste niebieski.
Poziomy scroll
Zastanówmy się jeszcze, co się w sytuacji, gdy tabela będzie za szeroka i nie zmieści się w swoim elemencie nadrzędnym. Standardowo w takiej sytuacji po prostu wyjdzie poza jego obszar, a to może zaburzyć poprawny wygląd szablonu strony. Aby poradzić sobie z tym problemem, możemy użyć właściwościoverflow-xz wartościąautodla elementu nadrzędnego. Efekt będzie taki, że w sytuacji, gdy tabela będzie zbyt szeroka, to zostanie wyświetlony poziomy pasek przewijania. Dzięki temu nie zaburzymy struktury strony, a jednocześnie użytkownik będzie mógł przejrzeć całą zawartość tabeli.
| 1 2 3 4 5 6 7 8 91011121314151617181920212223242526272829303132 | <divstyle="overflow-x: auto;"><table><thead><tr><th>ID</th><th>Imię</th><th>Nazwisko</th><th>Telefon</th></tr></thead><tbody><tr><td>1</td><td>Jan</td><td>Kowalski</td><td>1234567890</td></tr><tr><td>2</td><td>Anna</td><td>Przybylska</td><td>2345678901</td></tr><tr><td>3</td><td>Mikołaj</td><td>Święty</td><td>3456789012</td></tr></tbody></table></div> |
|---|---|
Użycie tej właściwości jest pomocne nie tylko w przypadku tabel, można jej użyć również do wyświetlania grafik lub chociażby fragmentów kodu.
Zadanie 1
W tym zadaniu Twoim celem jest ustawienie wyśrodkowania tekstu w pionie dla każdej komórki oraz pogrubienie tekstu w każdym parzystym wierszu tabeli.
Podsumowanie
W tej lekcji miałeś okazję dowiedzieć się jak przy pomocy CSS ulepszyć wygląd tabel. Przy okazji omawiania tego zagadnienia zapoznałeś się również z bardzo ważnym elementem CSS jakim są pseudoklasy.