Tabelki przydatne są do zestawiania danych różnego typu. W HTML-u do wstawiania tabel służy znacznik <table></table> wewnątrz którego umieszcza się tytuł w znaczniku <caption> (opcjonalny) a następnie wiersze tabelki <tr></tr> w pomiędzy które z kolei umieszczać można komórki nagłówka tabeli <th> lub zwykłej komórki <td>. Oto prosty przykład kodu tabelki:
<table style="margin:auto; border-collapse:collapse;" border="4px" cellpadding="5px">
<caption>Maksymalna cena złota z 4 pierwszych miesięcy 2015 roku</caption>
<tr><th rowspan="2">Kruszec</th><th colspan="4">Cena w danym miesiącu zł/uncja 2015</th></tr>
<tr><th>I</th><th>II</th><th>III</th><th>IV</th></tr>
<tr><th>Srebro</th> <td>69,07</td><td>63,41</td><td>64,21</td><td>62,49</td></tr>
<tr><th>Złoto</th> <td>4 878,74</td><td>4 751,42</td><td>4 580,61</td><td>4 584,13</td></tr>
</table>
Rezultat działania powyższego kodu:
Maksymalna cena złota z 4 pierwszych miesięcy 2015 roku
Kruszec
Cena w danym miesiącu zł/uncja 2015
I
II
III
IV
Srebro
69,07
63,41
64,21
62,49
Złoto
4 878,74
4 751,42
4 580,61
4 584,13
Atrybuty znacznika <table>
Atrybut style ma szerokie zastosowanie praktycznie w wszystkich znacznikach HTML, tutaj jednak wymienię dwa podstawowe style użyte w powyższym kodzie dla tego atrybutu, a są to:
margin:auto;
które zastępuje atrybut align="center" (przestarzały przez co nie zaleca się jego używania). Druga element:
border-collapse:collapse;
powoduje, że obramowanie tabelki będzie rysowane pojedynczą linią.
Z kolei atrybut border umożliwia ustawienie szerokości linii obramowania dla tabeli i komórek w niej zawartych. Istnieje również możliwość ustawienia marginesów wewnątrz wszystkich komórek tabeli za pomocą atrybutu cellpadding.
Atrybuty znaczników <th> i <td>
Możliwe jest łączenie komórek tak nagłówkowych, jak i normalnych za pomocą dwóch atrybutów. Pierwszy z nich colspan umożliwia łączenie komórek w poziomie, drugi rowspan.
Formatowanie tabelki za pomocą styli CSS
Nagłówkowe komórki można sformatować stosując następujący kod CSS:
table th{
background: black; /* można podać też link do tła w następujący sposób: black UTL('tlo.gif'); */
color: white;
font-weight: normal;
}
Wynik działania powyższego kodu:
Maksymalna cena złota z 4 pierwszych miesięcy 2015 roku
Kruszec
Cena w danym miesiącu zł/uncja 2015
I
II
III
IV
Srebro
69,07
63,41
64,21
62,49
Złoto
4 878,74
4 751,42
4 580,61
4 584,13
Wyrównywanie komórek tabeli w pionie i poziomie:
td{
text-align: left|right|center; /* wyrównanie do lewej, prawej lub środka - wybierz jedną z tych opcji */
vertical-align: top|bottom|center; /* wyrównanie do góry, dołu lub środka */
}
Przykład zastosowania powyższego stylu:
Maksymalna cena złota z 4 pierwszych miesięcy 2015 roku
Kruszec
Cena w danym miesiącu zł/uncja 2015
I
II
III
IV
Srebro
69,07
63,41
64,21
62,49
Złoto
4 878,74
4 751,42
4 580,61
4 584,13
Możliwe jest również wyświetlanie obramowania tylko określonej krawędzi tabeli:
tr:nth-child(even){ /* even - oznacza, że style zostaną zastosowane do co drugiego wiersza tabeli, istnieje jeszcze słowo kluczowe odd oznaczające nieparzyste wiersze. Można również wpisać numer wiersza, którego style mają dotyczyć */
background-color: #cccccc;
}
Wynik działania z powyższym stylem:
Maksymalna cena złota z 4 pierwszych miesięcy 2015 roku
