Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

Efekt Zebra na kolumnach tabeli HTML

poniedziałek,

Efekt Zebra na kolumnach tabeli HTML

Efekt „Zebra” polega na ustawieniu naprzemiennie dwóch kolorów dla pewnych elementów, co może zdecydowanie poprawić czytelność. Dla języka CSS i tabel HTML najczęściej prezentowane są przykłady związane z wierszami tabeli, jednak nic nie stoi na przeszkodzie, żeby podobną technikę zastosować dla kolumn. W materiale przedstawiono dwa sposoby uzyskania efektu „Zebra” dla kolumn. Dla obu przykładów posłużył ten sam kod HTML. Jest on dość obszerny, dlatego zamieszczono go na końcu artykułu.

Wybrane karty GeFrorce 8
Nazwa Nazwa rdzenia Częstotliwość rdzenia Częstotliwość shaderów Zunifikowane jednostki Szyna pamięci
8400 GS G86/GT218 450/520 MHz 900 MHz 16 64-bit
8500 GT G86 450 MHz 900 MHz 16 128-bit
8600 GT G84 540 MHz 1190 MHz 32 128-bit
8600 GTS G84 675 MHz 1450 MHz 32 128-bit
8800 GS G92 575 MHz 1375 MHz 96 192-bit
8800 GTS G80 500 MHz 1200 MHz 96 320-bit
8800 GT G92 600 MHz 1500 MHz 112 256-bit
8800 GTS 512 G92 650 MHz 1625 MHz 128 256-bit
8800 GTX G80 575 MHz 1350 MHz 128 384-bit
8800 Ultra G80 612 MHz 1500 MHz 128 384-bit
/* formatowanie podstawowe */
table {
  border-collapse: collapse;
}
th, td {
  padding:3px 6px;
  border-bottom: solid 1px #000;
}

/* efekt zebra */
col:nth-child(odd) {
  background: #eee;
}
th {
  background: #000;
  color: #fff;
}

W pierwszym przykładzie wykorzystano znacznik <col>. „Formatowanie podstawowe” tabeli omówiono w poprzednich materiałach. Nieparzyste kolumny wybrane selektorem „col:nth-child(odd)” otrzymały szary kolor tła. Efekt „Zebra” pojawił się także w nagłówkach tabeli, co obniżyło czytelność tabeli, dlatego zastosowano odrębną regułę dla tych elementów (th { background: #000; color: #fff;}). Nagłówki znajdują się nad kolumnami i ich czarny „przykrył” barwę kolumny.

Wybrane karty GeFrorce 8
Nazwa Nazwa rdzenia Częstotliwość rdzenia Częstotliwość shaderów Zunifikowane jednostki Szyna pamięci
8400 GS G86/GT218 450/520 MHz 900 MHz 16 64-bit
8500 GT G86 450 MHz 900 MHz 16 128-bit
8600 GT G84 540 MHz 1190 MHz 32 128-bit
8600 GTS G84 675 MHz 1450 MHz 32 128-bit
8800 GS G92 575 MHz 1375 MHz 96 192-bit
8800 GTS G80 500 MHz 1200 MHz 96 320-bit
8800 GT G92 600 MHz 1500 MHz 112 256-bit
8800 GTS 512 G92 650 MHz 1625 MHz 128 256-bit
8800 GTX G80 575 MHz 1350 MHz 128 384-bit
8800 Ultra G80 612 MHz 1500 MHz 128 384-bit
/* formatowanie podstawowe */
table {
  border-collapse: collapse;
}
 th,  td {
  padding:3px 6px;
  border-bottom: solid 1px #000;
}

/* efekt zebra */
 tbody td:nth-child(odd) {
  background: #eee;
}

W drugim przykładzie szary kolor otrzymały nieparzyste komórki tabeli w obrębie elementu <tbody>, zrealizowano to przy pomocy selektora „tbody td:nth-child(odd)”. Odmienny kolor kolumn nie pojawia się w nagłówkach tabeli, dlatego zrezygnowano z ich formatowania, jednak w razie potrzeby można także dla nich zdefiniować inne barwy.

Kod HTML

<table>
	<caption>Wybrane karty GeFrorce 8</caption>
	<col>
	<col>
	<col>
	<col>
	<col>
	<col>
<thead>
<tr>
  <th>Nazwa</th>
  <th>Nazwa rdzenia</th>
  <th>Częstotliwość rdzenia</th>
  <th>Częstotliwość shaderów</th>
  <th>Zunifikowane jednostki</th>
  <th>Szyna pamięci</th>
</tr>
</thead>
<tbody>
<tr>
  <td>8400 GS</td>
  <td>G86/GT218</td>
  <td>450/520 MHz</td>
  <td>900 MHz</td>
  <td>16</td>
  <td>64-bit</td>
</tr>
<tr>
  <td>8500 GT</td>
  <td>G86</td>
  <td>450 MHz</td>
  <td>900 MHz</td>
  <td>16</td>
  <td>128-bit</td>
</tr>
<tr>
  <td>8600 GT</td>
  <td>G84</td>
  <td>540 MHz</td>
  <td>1190 MHz</td>
  <td>32</td>
  <td>128-bit</td>
</tr>
<tr>
  <td>8600 GTS</td>
  <td>G84</td>
  <td>675 MHz</td>
  <td>1450 MHz</td>
  <td>32</td>
  <td>128-bit</td>
</tr>
<tr>
  <td>8800 GS</td>
  <td>G92</td>
  <td>575 MHz</td>
  <td>1375 MHz</td>
  <td>96</td>
  <td>192-bit</td>
</tr>
<tr>
  <td>8800 GTS</td>
  <td>G80</td>
  <td>500 MHz</td>
  <td>1200 MHz</td>
  <td>96</td>
  <td>320-bit</td>
</tr>
<tr>
  <td>8800 GT</td>
  <td>G92</td>
  <td>600 MHz</td>
  <td>1500 MHz</td>
  <td>112</td>
  <td>256-bit</td>
</tr>
<tr>
  <td>8800 GTS 512</td>
  <td>G92</td>
  <td>650 MHz</td>
  <td>1625 MHz</td>
  <td>128</td>
  <td>256-bit</td>
</tr>
<tr>
  <td>8800 GTX</td>
  <td>G80</td>
  <td>575 MHz</td>
  <td>1350 MHz</td>
  <td>128</td>
  <td>384-bit</td>
</tr>
<tr>
  <td>8800 Ultra</td>
  <td>G80</td>
  <td>612 MHz</td>
  <td>1500 MHz</td>
  <td>128</td>
  <td>384-bit</td>
</tr>
</table>

Trzy miesiące temu na naszej stronie…

Artykuł: Intel Core i9

Intel Core i9

Artykuł: Święto Lotnictwa Polskiego

Święto Lotnictwa Polskiego

Artykuł: Dzień, w którym słońce zaszło w&nbsp;południe

Dzień, w którym słońce zaszło w południe

Artykuł: GeForce 300

GeForce 300

Artykuł: Sega Dreamcast

Sega Dreamcast

Artykuł: Jacob Ziv

Jacob Ziv

Artykuł: Józef Olszyna-Wilczyński

Józef Olszyna-Wilczyński

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły