28. Tabele HTML

> Dodaj do ulubionych

Tabela to struktura danych z┼éo┼╝ona z wierszy i kolumn, kt├│ra pozwala na przedstawienie informacji w przejrzysty i uporz─ůdkowany spos├│b.

W formie tabelarycznej cz─Östo przedstawia si─Ö r├│┼╝nego rodzaju harmonogramy, zestawienia, wyniki i wszystkie inne dane, kt├│re maj─ů form─Ö powi─ůzanych ze sob─ů ÔÇ×nag┼é├│wk├│wÔÇŁ i ÔÇ×warto┼ŤciÔÇŁ. Na przyk┼éad:

Tabele HTML - przykład z indeksu Tiobe
Fragment tabeli indeksu Tiobe przedstawiaj─ůcego popularno┼Ť─ç j─Özyk├│w programowania na ┼Ťwiecie

Prawid┼éowo skonstruowane tabele HTML nie tylko dobrze wygl─ůdaj─ů (za spraw─ů zastosowania odpowiednich regu┼é CSS) na stronie internetowej, ale tak┼╝e s─ů poprawnie interpretowane przez narz─Ödzia zwi─Ökszaj─ůce dost─Öpno┼Ť─ç, takie jak czytniki ekranu.

Dlatego do budowy tabel HTML nale┼╝y u┼╝ywa─ç odpowiednich element├│w semantycznych, kt├│re u┼éatwi─ů odbi├│r informacji wszystkim u┼╝ytkownikom.

Poni┼╝sza tabela zawiera zestawienie element├│w HTML s┼éu┼╝─ůcych do tworzenia tabel z kr├│tkimi opisami. Nazwy element├│w prowadz─ů do bardziej szczeg├│┼éowych opis├│w ka┼╝dego z nich.

Element tabeli HTMLOpis
captionPodpis tabeli
colOkre┼Ťla w┼éa┼Ťciwo┼Ťci kolumn w grupie zdefiniowanej przez element colgroup
colgroupDefiniuje grup─Ö kolumn tabeli
tableDefinicja tabeli
tbodyTre┼Ť─ç w┼éa┼Ťciwa tabeli
tdKom├│rka tabeli
tfootStopka tabeli
thKomórka nagłówka tabeli
theadNagłówek tabeli
trWiersz tabeli

Tabele nie s─ů skomplikowanymi strukturami, ale ich budowa, zw┼éaszcza tych bardziej rozbudowanych, wymaga odrobin─Ö pracy.

Poni┼╝ej dowiesz si─Ö, jak utworzy─ç prawid┼éow─ů semantycznie tabel─Ö HTML, kt├│ra b─Ödzie przejrzysta i dost─Öpna nie tylko dla u┼╝ytkownik├│w wizualnych, ale tak┼╝e dla os├│b korzystaj─ůcych z technologii pomocniczych, takich jak czytniki ekranu.

Najprostsza tabela HTML

Definicja tabeli zawiera si─Ö mi─Ödzy znacznikami <table> i </table>. Podstaw─Ö jej budowy stanowi─ů wiersze i kolumny, kt├│re w najprostszej formie, s─ů reprezentowane odpowiednio przez elementy tr i zawarte w nich elementy td.

Je┼Ťli chcemy utworzy─ç jeden wiersz tabeli, to mi─Ödzy znacznikami <table> i </table> (opuszczone dla uproszczenia) napiszemy:

<tr></tr>

Ta tabela nie zawiera jeszcze ┼╝adnych danych, kt├│re mo┼╝emy doda─ç w elementach td:

<tr>
  <td></td>
</tr>

Ta tabela sk┼éada si─Ö z jednego wiersza i jednej kolumny, czyli ma jedn─ů kom├│rk─Ö danych, kt├│ra na razie jest pusta.

Liczb─Ö wierszy i kolumn mo┼╝emy dowolnie zwi─Öksza─ç, np.:

<tr>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
</tr>

Ta tabela ma dwa wiersze i dwie kolumny, czyli w sumie cztery kom├│rki danych.

Poni┼╝ej znajduje si─Ö kompletna definicja tabeli HTML sk┼éadaj─ůcej si─Ö z czterech wierszy i czterech kolumn, czyli zawieraj─ůcej w sumie 16 kom├│rek, z danymi:

<table>
  <tr>
    <td>Zawodnik</td>
    <td>Liczba minut</td>
    <td>Liczba punkt├│w</td>
    <td>Liczba zbi├│rek</td>
  </tr>
  <tr>
    <td>Kowalski</td>
    <td>39</td>
    <td>25</td>
    <td>6</td>
  </tr>
  <tr>
    <td>Nowak</td>
    <td>28</td>
    <td>12</td>
    <td>8</td>
  </tr>
  <tr>
    <td>Kwiatkowski</td>
    <td>41</td>
    <td>30</td>
    <td>1</td>
  </tr>
</table>

Na tej stronie, na kt├│rej dzia┼éaj─ů nasze style CSS, ta tabela wygl─ůda┼éaby tak:

ZawodnikLiczba minutLiczba punkt├│wLiczba zbi├│rek
Kowalski39256
Nowak28128
Kwiatkowski41301

W tej tabeli dane s─ů przedstawione w do┼Ť─ç przejrzysty spos├│b, ale par─Ö rzeczy mo┼╝na w niej poprawi─ç. Na przyk┼éad mo┼╝emy odpowiednio oznaczy─ç wiersz nag┼é├│wka, aby wyr├│┼╝ni─ç go wizualnie, a tak┼╝e, aby u┼éatwi─ç jego odczyt przez czytniki ekranu itp. narz─Ödzia.

Wersja z semantycznym nagłówkiem

Kom├│rki nag┼é├│wka w tabelach HTML oznaczamy za pomoc─ů elementu th, kt├│ry podobnie jak element td oznacza kom├│rk─Ö tabeli, ale dodatkowo informuje, ┼╝e jest to kom├│rka nag┼é├│wka. Na przyk┼éad:

<table>
  <tr>
    <th>Zawodnik</th>
    ...
  </tr>
  ...

Aby w pe┼éni poinformowa─ç wszystkie narz─Ödzia, takie jak czytniki ekranu dla niedowidz─ůcych, o strukturze tabeli, mo┼╝emy zastosowa─ç atrybut scope pozwalaj─ůcy okre┼Ťli─ç, czy dana kom├│rka nag┼é├│wka odnosi si─Ö do kolumny, czy do wiersza. Sp├│jrz na poni┼╝szy przyk┼éad:

<table>
  <tr>
    <th scope="col">Zawodnik</th>
    <th scope="col">Liczba minut</th>
    <th scope="col">Liczba punkt├│w</th>
    <th scope="col">Liczba zbi├│rek</th>
  </tr>
  <tr>
    <th scope="row">Kowalski</th>
    <td>39</td>
    <td>25</td>
    <td>6</td>
  </tr>
  <tr>
    <th scope="row">Nowak</th>
    <td>28</td>
    <td>12</td>
    <td>8</td>
  </tr>
  <tr>
    <th scope="row">Kwiatkowski</th>
    <td>41</td>
    <td>30</td>
    <td>1</td>
  </tr>
</table>

W tej tabeli za pomoc─ů atrybutu scope zaznaczyli┼Ťmy, ┼╝e kom├│rki nag┼é├│wkowe Zawodnik, Liczba minut, Liczba punkt├│w i Liczba zbi├│rek odnosz─ů si─Ö do odpowiednich kolumn, a kom├│rki nag┼é├│wkowe Kowalski, Nowak i Kwiatkowski ÔÇö do odpowiednich wierszy.

Na naszej stronie ta tabela wygl─ůda┼éaby tak:

ZawodnikLiczba minutLiczba punkt├│wLiczba zbi├│rek
Kowalski39256
Nowak28128
Kwiatkowski41301

Scalanie wierszy i kolumn

Czasami trzeba utworzy─ç bardziej skomplikowan─ů tabel─Ö, w kt├│rej wybrane kom├│rki obejmuj─ů wi─Öcej ni┼╝ jeden wiersz lub jedn─ů kolumn─Ö. Sp├│jrz na poni┼╝szy przyk┼éad:

Ceny
Min.Maks.Średnia
Jabłka5 zł6 zł5,50 zł
Gruszki7 zł8 zł7,50 zł
Banany10 zł12 zł11 zł

Tak─ů tabel─Ö HTML mo┼╝na utworzy─ç przy u┼╝yciu atrybut├│w colspan i rowspan. Pierwszy z nich okre┼Ťla liczb─Ö kolumn obejmowanych przez kom├│rk─Ö, a drugi ÔÇö liczb─Ö wierszy, jak─ů obejmuje dana kom├│rka.

<table>
  <tr>
    <td rowspan="2"></td>
    <th colspan="3" scope="col">Ceny</th>
  </tr>
  <tr>
    <th scope="col">Min.</th>
    <th scope="col">Maks.</th>
    <th scope="col">Średnia</th>
  </tr>
  <tr>
    <th scope="row">Jabłka</th>
    <td>5 zł</td>
    <td>6 zł</td>
    <td>5,50 zł</td>
  </tr>
  <tr>
    <th scope="row">Gruszki</th>
    <td>7 zł</td>
    <td>8 zł</td>
    <td>7,50 zł</td>
  </tr>
  <tr>
    <th scope="row">Banany</th>
    <td>10 zł</td>
    <td>12 zł</td>
    <td>11 zł</td>
  </tr>
</table>

W pierwszym elemencie tr tej tabeli najpierw definiujemy kom├│rk─Ö, kt├│ra obejmuje dwa wiersze (<td rowspan="2"></td>), a nast─Öpnie definiujemy kom├│rk─Ö obejmuj─ůc─ů trzy kolumny (<th colspan="3" scope="col">Ceny</th>).

Kolejny element tr zawiera pozosta┼ée ÔÇ×brakuj─ůceÔÇŁ trzy kom├│rki nag┼é├│wkowe znajduj─ůce si─Ö w drugim wierszu obejmowanym przez pierwsz─ů kom├│rk─Ö td:

<tr>
    <th scope="col">Min.  </th>
    <th scope="col">Maks.  </th>
    <th scope="col">Średnia  </th>
</tr>

Dalej znajduj─ů si─Ö pozosta┼ée ÔÇ×normalneÔÇŁ wiersze zawieraj─ůce kom├│rki nag┼é├│wkowe i danych.

Formatowanie kolumn

Szat─Ö wizualn─ů tabel nale┼╝y definiowa─ç za pomoc─ů Kaskadowych arkuszy styl├│w (CSS), kt├│re zawieraj─ů wszystkie narz─Ödzia potrzebne do utworzenia efektownej i przejrzystej prezentacji tabelarycznej.

Cho─ç w CSS s─ů dost─Öpne specjalne selektory pozwalaj─ůce odnie┼Ť─ç si─Ö do wybranych kolumn tabeli, w j─Özyku HTML dodatkowo istniej─ů specjalne elementy, kt├│re to u┼éatwiaj─ů: colgroup i col.

Element colgroup powinien by─ç pierwszym potomkiem tabeli (powinien znajdowa─ç si─Ö za znacznikiem otwieraj─ůcym <table>). Jest on kontenerem zawieraj─ůcym elementy col, kt├│re umo┼╝liwiaj─ů zdefiniowanie formatowania dla kolumn, kt├│rym odpowiadaj─ů.

Powiedzmy, ┼╝e chcemy utworzy─ç tabel─Ö wygl─ůdaj─ůc─ů, jak poni┼╝sza:

J─Özyki skryptoweJ─Özyki kompilowane
JavaScriptC++
PHPJava

Taki efekt możemy uzyskać na kilka sposobów przy użyciu samych arkuszy stylów CSS, jak również przy pomocy elementów colgroup i col z dodatkiem CSS. Spójrz na poniższy przykład:

<table>
  <colgroup>
    <col style="background-color:  lightblue; width: 200px">
    <col style="background-color:  lightgreen; width: 200px">
  </colgroup>
  <tr>
    <th>J─Özyki skryptowe</th>
    <th>J─Özyki kompilowane</th>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>C++</td>
  </tr>
  <tr>
    <td>PHP</td>
    <td>Java</td>
  </tr>
</table>

W tym przypadku utworzyli┼Ťmy dwa elementy col reprezentuj─ůce poszczeg├│lne kolumny tabeli. Zastosowane do nich style odnosz─ů si─Ö do ca┼éych kolumn, kt├│rym one odpowiadaj─ů.

Nag┼é├│wek, tre┼Ť─ç w┼éa┼Ťciwa i stopka tabeli

W bardziej rozbudowanych tabelach dodatkowo mo┼╝na u┼╝y─ç specjalnych element├│w do oznaczania cz─Ö┼Ťci nag┼é├│wkowej, tre┼Ťci w┼éa┼Ťciwej i stopki tabeli. S┼éu┼╝─ů do tego odpowiednio elementy thead, tbody i tfoot.

Elementy te nic nie zmieniaj─ů w zakresie dost─Öpno┼Ťci tabeli dla u┼╝ytkownik├│w z wadami wzroku. Za to s─ů pomocne przy formatowaniu wizualnym tabeli, poniewa┼╝ u┼éatwiaj─ů odnoszenie si─Ö do jej poszczeg├│lnych cz─Ö┼Ťci.

Element thead powinien znajdowa─ç si─Ö bezpo┼Ťrednio za znacznikiem otwieraj─ůcym <table>, chyba ┼╝e zosta┼é u┼╝yty tak┼╝e element colgroup. Je┼Ťli tak, to element thead powinien znajdowa─ç si─Ö bezpo┼Ťrednio za nim. Na przyk┼éad:

<table>
  <colgroup>
    <col style="background-color: lightblue; width: 200px">
    <col style="background-color: lightgreen; width: 200px">
  </colgroup>
  <thead>
    <tr>
      <th>J─Özyki skryptowe</th>
      <th>J─Özyki kompilowane</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>JavaScript</td>
      <td>C++</td>
    </tr>
    <tr>
      <td>PHP</td>
      <td>Java</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Wszystkich</td>
      <td>4</td>
    </tr>
  </tfoot>
</table>

Podpis tabeli

Podpis tabeli nale┼╝y umie┼Ťci─ç w elemencie caption, kt├│ry powinien by─ç pierwszym elementem znajduj─ůcym si─Ö za znacznikiem otwieraj─ůcym <table>. Na przyk┼éad:

<table>
  <caption>J─Özyki skryptowe i kompilowane z podsumowaniem</caption>
  <colgroup>
    <col style="background-color: lightblue; width: 200px">
    <col style="background-color: lightgreen; width: 200px">
  </colgroup>
  <thead>
    <tr>
      <th>J─Özyki skryptowe</th>
      <th>J─Özyki kompilowane</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>JavaScript</td>
      <td>C++</td>
    </tr>
    <tr>
      <td>PHP</td>
      <td>Java</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Wszystkich</td>
      <td>4</td>
    </tr>
  </tfoot>
</table>

Teraz nasza tabela wygl─ůda┼éaby tak:

J─Özyki skryptowe i kompilowane z podsumowaniem
J─Özyki skryptoweJ─Özyki kompilowane
JavaScriptC++
PHPJava
Wszystkich4

W tym przypadku mo┼╝na jeszcze pogrubi─ç zawarto┼Ť─ç kom├│rek stopki, co dzi─Öki elementowi tfoot by┼éoby bardzo proste. Wystarczy┼éoby na przyk┼éad zastosowa─ç prost─ů regu┼é─Ö CSS tfoot td {font-weight: bold}.

Znasz ju┼╝ wszystkie elementy HTML s┼éu┼╝─ůce do tworzenia tabel. Aby sformatowa─ç ich wygl─ůd, mo┼╝na u┼╝ywa─ç wszystkich ÔÇ×normalnych w┼éasno┼Ťci CSSÔÇŁ, ale istnieje te┼╝ kilka takich, kt├│re s─ů przeznaczone specjalnie do pracy z tabelami. Poni┼╝ej znajdziesz ich opis.

Stylizacja tabel za pomoc─ů CSS

W jednej z wcze┼Ťniejszych uwag w tym rozdziale pokaza┼éem, jak wygl─ůda┼éaby tabela pozbawiona formatowania za pomoc─ů arkuszy styl├│w. Do stylizacji tabel mo┼╝na u┼╝ywa─ç wielu w┼éasno┼Ťci CSS odnosz─ůcych si─Ö do r├│┼╝nych element├│w, ale istnieje tak┼╝e grupa w┼éasno┼Ťci specjalnie przeznaczonych do pracy z tabelami. W poni┼╝szej tabeli znajduje si─Ö ich zestawienie:

W┼éasno┼Ť─çOpis
border-collapseOkre┼Ťla, czy kraw─Ödzie obramowania s─ůsiaduj─ůcych kom├│rek maj─ů zosta─ç scalone, czy nie
border-spacingOkre┼Ťla odst─Öp mi─Ödzy s─ůsiaduj─ůcymi kom├│rkami tabeli
caption-sideOkre┼Ťla po┼éo┼╝enie podpisu tabeli
empty-cellsOkre┼Ťla spos├│b traktowania pustych kom├│rek
table-layoutOkre┼Ťla spos├│b rozmieszczenia element├│w tabeli

Przyjrzymy si─Ö tym w┼éasno┼Ťciom po kolei, a zaczniemy od uk┼éadu tabeli.

Okre┼Ťlanie uk┼éadu tabeli

Do okre┼Ťlania uk┼éadu tabeli s┼éu┼╝y w┼éasno┼Ť─ç table-layout, kt├│ra przyjmuje dwie warto┼Ťci: auto i fixed.

W wi─Ökszo┼Ťci przegl─ůdarek warto┼Ť─ç auto jest stosowana domy┼Ťlnie i powoduje ona w┼é─ůczenie algorytmu automatycznego dostosowywania rozmiaru kom├│rek do ich zawarto┼Ťci.

Natomiast warto┼Ť─ç fixed okre┼Ťla szeroko┼Ť─ç kolumn tabeli i ca┼éej tabeli na podstawie szeroko┼Ťci element├│w table i col lub szeroko┼Ťci pierwszego wiersza kom├│rek (dalsze wiersze nie s─ů brane pod uwag─Ö w tej kwestii).

W poni┼╝szym oknie mo┼╝esz wypr├│bowa─ç r├│┼╝ne ustawienia w┼éasno┼Ťci table-layout ÔÇô zmie┼ä jej warto┼Ť─ç na karcie CSS z auto na fixed, aby sprawdzi─ç, co si─Ö stanie.

See the Pen Test table-layout by Łukasz Piwko (@shebangpl) on CodePen.

Stylizacja obramowania kom├│rek

Dwie specjalne w┼éasno┼Ťci CSS odnosz─ůce si─Ö do kraw─Ödzi obramowania kom├│rek tabeli to border-collapse i border-spacing.

W┼éasno┼Ť─ç border-collapse okre┼Ťla, czy kraw─Ödzie s─ůsiaduj─ůcych kom├│rek maj─ů by─ç scalone, czy rozdzielone. Przyjmuje ona dwie warto┼Ťci: collapse i separate. Warto┼Ť─ç collapse oznacza scalanie kraw─Ödzi, a separate ÔÇô ich rozdzielanie.

Powiedzmy, ┼╝e mamy nast─Öpuj─ůc─ů prost─ů tabel─Ö HTML:

<table>
  <tr>
    <td>JavaScript</td>
    <td>C++</td>
  </tr>
  <tr>
    <td>PHP</td>
    <td>Java</td>
  </tr>
  <tr>
    <td>Suma</td>
    <td>4</td>
  </tr>
</table>

Zastosujemy do niej poni┼╝szy arkusz styl├│w:

td {
  border: 5px solid lightpink;
}

Teraz nasza tabela wygl─ůda tak:

Border collapse separate

Przy domy┼Ťlnych ustawieniach CSS kraw─Ödzie s─ů rozdzielone (odpowiada za to domy┼Ťlne ustawienie w┼éasno┼Ťci border-collapse, kt├│rym jest separate) i odsuni─Öte od siebie (za ten odst─Öp mi─Ödzy nimi odpowiada domy┼Ťlne ustawienie w┼éasno┼Ťci border-spacing).

A teraz zmienimy ustawienie w┼éasno┼Ťci border-collapse na collapse (zwr├│─ç uwag─Ö, ┼╝e stosuje si─Ö j─ů do elementu table):

table {
  border-collapse: collapse;
}

Po wprowadzeniu tej regu┼éy nasza tabela wygl─ůda inaczej:

Border collapse collapse

Kraw─Ödzie obramowania kom├│rek s─ů scalone, co mo┼╝na pozna─ç po ich grubo┼Ťci ÔÇô gdyby nie by┼éy scalone, a tylko z┼é─ůczone ze sob─ů przez likwidacj─Ö odst─Öpu mi─Ödzy nimi, to tworzy┼éyby grubsz─ů lini─Ö.

Ponadto zmiana ustawienia w┼éasno┼Ťci border-collapse na collapse spowodowa┼éa znikni─Öcie odst─Öpu mi─Ödzy kom├│rkami, poniewa┼╝ w┼éasno┼Ť─ç border-spacing (tak┼╝e jej domy┼Ťlne ustawienie) dzia┼éa tylko wtedy, gdy w┼éasno┼Ť─ç border-collapse jest ustawiona na separate.

W┼éasno┼Ť─ç border-spacing tak┼╝e odnosi si─Ö do elementu table i mo┼╝e przyjmowa─ç jedn─ů lub dwie warto┼Ťci w dowolnej jednostce d┼éugo┼Ťci. Je┼Ťli zostanie podana tylko jedna warto┼Ť─ç, to dotyczy ona wszystkich czterech stron. Je┼Ťli zostan─ů podane dwie warto┼Ťci, to pierwsza dotyczy lewej i prawej strony, a druga ÔÇô g├│ry i do┼éu.

Nale┼╝y pami─Öta─ç, ┼╝e ta w┼éasno┼Ť─ç dzia┼éa tylko wtedy, gdy w┼éasno┼Ť─ç border-collapse jest ustawiona na collapse.

Gdyby┼Ťmy na przyk┼éad w regule odnosz─ůcej si─Ö do naszej tabeli zmienili ustawienie w┼éasno┼Ťci border-collapse na separate oraz dodali deklaracj─Ö border-spacing: 10px 20px:

table {
  border-collapse: separate;
  border-spacing: 10px 20px;
}

ÔÇŽnasza tabela wygl─ůda┼éaby tak, jak na poni┼╝szym zrzucie ekranu:

Border spacing

Położenie podpisu

Za pomoc─ů w┼éasno┼Ťci caption-side mo┼╝na okre┼Ťli─ç, czy podpis tabeli ma si─Ö znajdowa─ç na g├│rze, czy na dole. Przyjmuje ona dwie warto┼Ťci: top (g├│ra, ustawienie domy┼Ťlne) i bottom (d├│┼é). Powiedzmy na przyk┼éad, ┼╝e dodali┼Ťmy do powy┼╝szej tabeli element caption:

<table>
  <caption>Podpis tabeli</caption>
  <tr>
    <td>JavaScript</td>
    <td></td>
  </tr>
  <tr>
    <td>PHP</td>
    <td>Java</td>
  </tr>
  <tr>
    <td>Suma</td>
    <td>4</td>
  </tr>
</table>

Nast─Öpnie definiujemy dwie nast─Öpuj─ůce regu┼éy:

td {
  border: 5px solid lightpink;
}
caption {
  caption-side: bottom
}

Pierwsza regu┼éa ma tylko znaczenie kosmetyczne. Natomiast druga umieszcza podpis tabeli pod tabel─ů, mimo ┼╝e zawieraj─ůcy go element znajduje si─Ö na samym pocz─ůtku w kodzie HTML:

podpis tabeli caption side bottom

Pokazywanie i ukrywanie pustych kom├│rek

Aby okre┼Ťli─ç, czy puste kom├│rki tabeli maj─ů by─ç widoczne, czy ukryte, nale┼╝y u┼╝y─ç w┼éasno┼Ťci empty-cells. Przyjmuje ona dwie warto┼Ťci: show (pokazuj, ustawienie domy┼Ťlne) i hide (ukrywaj). Gdyby┼Ťmy do tabeli z poprzedniej sekcji zastosowali poni┼╝sz─ů deklaracj─Ö CSS:

empty-cells: hidden;

ÔÇŽto tabela ta wygl─ůda┼éaby tak, jak na poni┼╝szym zrzucie ekranu:

empty cells hidden

To by┼éa ostatnia w┼éasno┼Ť─ç CSS przeznaczona specjalnie do stylizowania element├│w tabel, ale poni┼╝ej znajduje si─Ö jeszcze opis typowego zastosowania selektora n-tego dziecka do tabel.

Tabele w naprzemienne paski

Za pomoc─ů pseudoklasy CSS :nth-child mo┼╝na w ┼éatwy spos├│b utworzy─ç tabel─Ö o wygl─ůdzie podobnym do tabeli pokazanej na pocz─ůtku tego rozdzia┼éu.

Pseudoklasa ta mo┼╝e przyjmowa─ç jako warto┼Ť─ç s┼éowa kluczowe odd i even, kt├│re odpowiednio oznaczaj─ů ÔÇ×nieparzystyÔÇŁ i ÔÇ×parzystyÔÇŁ. Na przyk┼éad:

tr:nth-child(odd) {
  background-color: gray;
}
tr:nth-child(even) {
  background-color: lightgray;
}

Teraz wszystkie nieparzyste wiersze tabeli (pierwszy, trzeci itd.) b─Öd─ů mia┼éy kolor szary, a wszystkie parzyste ÔÇô kolor jasnoszary.

Znasz ju┼╝ wszystkie elementy tabel HTML i umiesz je stylizowa─ç za pomoc─ů CSS. Tak naprawd─Ö, je┼Ťli uwa┼╝nie czytasz ten kurs od samego pocz─ůtku, to znasz ju┼╝ zdecydowan─ů wi─Ökszo┼Ť─ç element├│w HTML5. W nast─Öpnym rozdziale poznasz pozosta┼ée. Nie wszystkie s─ů cz─Östo u┼╝ywane, wi─Öc ich opis jest bardzo zwi─Öz┼éy. W razie potrzeby ┼éatwo znajdziesz dodatkowe informacje, klikaj─ůc ich nazwy, kt├│re s─ů odno┼Ťnikami do stron zawieraj─ůcych bardziej szczeg├│┼éowe opisy.

Podsumowanie

  • Tabele HTML tworzymy przy u┼╝yciu elementu table.
  • Element tbody oznacza tre┼Ť─ç g┼é├│wn─ů tabeli.
  • Wiersze tabeli HTML tworzymy za pomoc─ů elementu tr.
  • Kom├│rki tabel tworzymy za pomoc─ů elementu td.
  • Kom├│rk─Ö nag┼é├│wka tabeli oznacza element th.
  • Nag┼é├│wek tabeli oznacza element thead.
  • Stopk─Ö tabeli oznacza element tfoot.
  • Element colgroup definiuje grup─Ö kolumn tabeli.
  • Element col okre┼Ťla w┼éa┼Ťciwo┼Ťci kolumn w grupie tabeli.
  • Element caption oznacza podpis tabeli.
  • W┼éasno┼Ť─ç CSS border-collapse okre┼Ťla, czy obramowania kom├│rek tabeli maj─ů by─ç scalane, czy nie.
  • W┼éasno┼Ť─ç CSS border-spacing okre┼Ťla odst─Öp mi─Ödzy kraw─Ödziami obramowania kom├│rek tabeli.
  • W┼éasno┼Ť─ç CSS caption-side okre┼Ťla po┼éo┼╝enie podpisu tabeli.
  • W┼éasno┼Ť─ç CSS empty-cells okre┼Ťla czy puste kom├│rki tabeli maj─ů by─ç widoczne, czy ukryte.
  • W┼éasno┼Ť─ç CSS table-layout okre┼Ťla spos├│b definiowania uk┼éadu tabeli.
  • Pseudoklasa CSS :nth-child umo┼╝liwia odnoszenie si─Ö do wybranych numerycznie element├│w potomnych innego elementu. Warto┼Ť─ç odd pozwala odnie┼Ť─ç si─Ö do nieparzystych element├│w potomnych, a warto┼Ť─ç even ÔÇô do parzystych.