Wstawianie tabelek w HTML-u

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 2862 razy

Wstawianie tabelki na stronie

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
Kruszec	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
Kruszec	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
Kruszec	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:

th, td { border-bottom: 1px solid black; border-top: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; }

Zamiana koloru co drugiego wiersza 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
Kruszec	Cena w danym miesiącu zł/uncja 2015
Kruszec	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