Wstawianie tabelek w HTML-u

Stronę tą wyświetlono już: 198 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:

Listing 1
  1. <table style="margin:auto; border-collapse:collapse;" border="4px" cellpadding="5px">
  2. <caption>Maksymalna cena złota z 4 pierwszych miesięcy 2015 roku</caption>
  3. <tr><th rowspan="2">Kruszec</th><th colspan="4">Cena w danym miesiącu zł/uncja 2015</th></tr>
  4. <tr><th>I</th><th>II</th><th>III</th><th>IV</th></tr>
  5. <tr><th>Srebro</th> <td>69,07</td><td>63,41</td><td>64,21</td><td>62,49</td></tr>
  6. <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>
  7. </table>

Rezultat działania powyższego kodu:

Maksymalna cena złota z 4 pierwszych miesięcy 2015 roku
KruszecCena w danym miesiącu zł/uncja 2015
IIIIIIIV
Srebro 69,0763,4164,2162,49
Złoto 4 878,744 751,424 580,614 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:

Listing 2
  1. margin:auto;

które zastępuje atrybut align="center" (przestarzały przez co nie zaleca się jego używania). Druga element:

Listing 3
  1. 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:

Listing 4
  1. table th{
  2. background: black; /* można podać też link do tła w następujący sposób: black UTL('tlo.gif'); */
  3. color: white;
  4. font-weight: normal;
  5. }

Wynik działania powyższego kodu:

Maksymalna cena złota z 4 pierwszych miesięcy 2015 roku
KruszecCena w danym miesiącu zł/uncja 2015
IIIIIIIV
Srebro 69,0763,4164,2162,49
Złoto 4 878,744 751,424 580,614 584,13

Wyrównywanie komórek tabeli w pionie i poziomie:

Listing 5
  1. td{
  2. text-align: left|right|center; /* wyrównanie do lewej, prawej lub środka - wybierz jedną z tych opcji */
  3. vertical-align: top|bottom|center; /* wyrównanie do góry, dołu lub środka */
  4. }

Przykład zastosowania powyższego stylu:

Maksymalna cena złota z 4 pierwszych miesięcy 2015 roku
KruszecCena w danym miesiącu zł/uncja 2015
IIIIIIIV
Srebro 69,0763,4164,2162,49
Złoto 4 878,744 751,424 580,614 584,13

Możliwe jest również wyświetlanie obramowania tylko określonej krawędzi tabeli:

Listing 6
  1. th, td {
  2. border-bottom: 1px solid black;
  3. border-top: 1px solid black;
  4. border-left: 1px solid black;
  5. border-right: 1px solid black;
  6. }

Zamiana koloru co drugiego wiersza tabeli:

Listing 7
  1. 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ć */
  2. background-color: #cccccc;
  3. }

Wynik działania z powyższym stylem:

Maksymalna cena złota z 4 pierwszych miesięcy 2015 roku
KruszecCena w danym miesiącu zł/uncja 2015
IIIIIIIV
Srebro 69,0763,4164,2162,49
Złoto 4 878,744 751,424 580,614 584,13

Komentarze