[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)