[HTML/CSS] Kolorowanie wierszy tabeli za pomocą arkusza styli CSS

Kolorowanie wierszy tabeli może być bardzo kłopotliwe, szczególnie gdy tabela jest duża, zawiera dużo wierszy. W tej poradzie przedstawię sposób jaki daje nam CSS3. Użyję pseudoklasy :nth-child() za pomocą której pokoloruję wiersze tabeli i nadam jej unikalny styl.

<style type="text/css">
  th {background: #555;color: #FFF;} 
  tr:nth-child(odd) {background: #CCC;}
  tr:nth-child(even) {background: #EFEFEF;}
</style>

Powyższy arkusz styli koloruje nam wiersze tabeli naprzemiennie i dodatkowo nagłówek tabeli ma zdefiniowany inny kolor. Element th, czyli wiersz nagłówka ma podany kolor tła i kolor czcionki. Kolejne wiersze są zdefiniowane za pomocą pseudoklasy :nth-child() za pomocą której możemy odwołać się do elementu, który ma przed sobą określoną w nawiasie liczbę rodzeństwa w strukturze dokumentu. Wartość umieszczona w nawiasie może być numerem, słowem kluczowym lub formułą. W tej poradzie użyjemy dwóch słów kluczowych:

  • odd - odnosi się do nieparzystych elementów,
  • even - odnosi się do parzystych elementów.

Poniżej kompletny przykład.

<!DOCTYPE html>
<html>
<head>
  <title>Kolorowanie wierszy tabeli za pomocą arkusza styli</title>
  <meta charset="utf-8" />
  <style type="text/css">
  th {background: #555;color: #FFF;}
  tr:nth-child(odd) {background: #CCC;}
  tr:nth-child(even) {background: #EFEFEF;}
  </style>
</head>
<body>
  <table>
  <tr>
    <th>nagłówek 1</th>
    <th>nagłówek 2</th>
    <th>nagłówek 3</th>
  </tr>
  <tr>
    <td>treść 11</td>
    <td>treść 12</td>
    <td>treść 13</td>
  </tr>
  <tr>
    <td>treść 21</td>
    <td>treść 22</td>
    <td>treść 23</td>
  </tr>
  <tr>
    <td>treść 31</td>
    <td>treść 32</td>
    <td>treść 33</td>
  </tr>
  <tr>
    <td>treść 41</td>
    <td>treść 42</td>
    <td>treść 43</td>
  </tr>
  </table>
</body>
</html>

A tak wygląda efekt działania na podstawie powyższego kodu.

Kolorowanie wierszy tabeli za pomocą arkusza styli CSS - demo

autor: Krzysztof Szypulski

data dodania/aktualizacji: Piątek, 18 kwietnia 2014 (08:59:22)

tagi:

css, css3, html, html5, nth-child, odd, even, kolorowanie wierszy, tabela, table, tr, td, th

Formularz kontaktowy

Masz pytania? Pisz śmiało, postaram się odpowiedzieć.

1 * 1 =
* pole obowiązkowe
Krzysztof Szypulski KESS

tel: +48 505 171 235 e-mail: admin@kess.com.pl

ul. Żydowo 44, 76-010 Polanów

Copyright © 2001 - 2017 by Krzysztof Szypulski "KESS"
przejdź do góry strony