poniedziałek, 2020-11-02

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>