piątek, 2020-10-23

Przykłady kodu CSS dla tabel

Dzięki możliwościom kaskadowych arkuszy stylów elementy HTML mogą otrzymywać niepowtarzalny wygląd. Wszystkie prezentowane przykłady dotyczą tabeli, której kod zamieszczono poniżej. Wstępne informacje o stylach CSS dla tabel znajdziesz w materiale „Domyślne style CSS dla tabel”.

<div class="tabele">
<table>
	<caption>Pierwsza generacja Intel Core</caption>
	<thead>
    <tr>
        <th>Marka</th>
        <th>Rdzenie</th>
        <th>Technologia</th>
        <th>Data wydania</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Core Solo</td>
        <td>1</td>
        <td>65 nm</td>
        <td>styczeń 2006</td>
    </tr>
    <tr>
        <td>Core Duo</td>
        <td>2</td>
        <td>65 nm</td>
        <td>styczeń 2006</td>
    </tr>
    </tbody>
</table>
</div>

W pierwszym przykładzie zastosowano tzw. efekt zebra oraz podświetlanie wiersza tabeli po najechaniu na niego myszą. Kluczowym elementem efaktu „Zebra” jest selektor .tabele tr:nth-child(even) wybierający parzyste wiersze tabeli, dzięki niemu można w ich przypadku zdefiniować odmienny kolor tła. Więcej o efekcie „Zebra” dowiesz się z materiału „Efekt Zebra”. Podświetlanie wiersza zrealizowano przy pomocy pseudoklasy :hover (wiersz 7).

.tabele{max-width:768px;font-family:sans-serif;}
.tabele table{width:100%;border-collapse:collapse;}
.tabele caption{font-size:1.4em;padding:20px;}
.tabele thead tr{background: #000;color:#fff;}
.tabele tbody tr{background: #eee;}
.tabele tr:nth-child(even){background: #def;}
.tabele tbody tr:hover{background: #fc0;}
.tabele td{padding:8px 4px;text-align: center;}

Kolejny przykład to wykorzystanie gradientu oraz przezroczystości. Element div, w którym znajduje się tabela, otrzymał tło zgodne z deklaracją w wierszu nr 4. Dodatkowo tabela została zawężona do 80% dostępnego miejsca (wiersz nr 10). Zadbano o starsza przeglądarki niewspierające formatu rgba, początkowo kolor tła wiersza ustalono jako czarny, stosując biały litery, treść jest czytelna. Przeglądarki obsługujące rgba wezmą pod uwagę powtarzającą się deklarację własności background i zastosują jako tło kolor biały z dużą przezroczystością, dodatkowo nagłówek tabeli otrzymał nieznacznie nieco mniej przezroczyste tło. W barwie zapisanej w RGBA pierwsze trzy parametry to składowe w formacie RGB, czwarta liczba oznacza stopień przezroczystości. Zapis .3 oznacza to samo co 0.3. Dla uzyskania lepszego efektu wizualnego nagłówek otrzymał trochę mniej przezroczyste tło.

.tabele{
	max-width: 768px;
	font-family: sans-serif;
	background: linear-gradient(45deg, #49a09d, #5f2c82);
	padding:40px 20px;
	color:#fff;
}

.tabele table{
	width: 80%;
	border-collapse: collapse;
	margin: 0 auto;}

.tabele caption{
	font-size: 1.2em;
	padding-bottom: 20px;
}

.tabele tr{
	background: #000;
	background: rgba(255,255,255,.3);
	border-bottom:solid 1px #fff;
	text-align: left;
}

.tabele tbody tr{
	background: rgba(255,255,255,.1);
}

.tabele tbody tr:hover{
	background: rgba(255,0,0,.1);
}

.tabele td{
	padding: 8px 4px;
	text-align: left;
}

W trzecim przykładzie zademonstrowano możliwość wyróżnienia kolumny odmienną barwą, dodatkowo w odróżnieniu od pozostałych, nie zmienia ona barwy po najechaniu myszą. Kluczowym elementem w tym rozwiązaniu jest selektor .tabele tr td:nth-of-type(1) (wiersz nr 37) wybierający pierwszą komórkę każdego wiersza. Po preanalizowaniu przykładu na pewno dojdziesz do wniosku, że efekt „Zebra” można stosować także w przypadku kolumn.

.tabele {
	max-width: 768px;
	font-family: sans-serif;
	background: #000;
	padding: 40px 20px;
	color: #fff;
	text-align: left;
}

.tabele table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 auto;
}

.tabele caption {
	font-size: .8em;
	text-decoration: underline;
	padding-bottom: 20px;
}

.tabele tbody tr {
	background: #ccc;
	border-bottom: solid 1px #000;
	color: #000;
}


.tabele tbody tr:hover {
	background: #fff;
}

.tabele td {
	padding: 8px 4px;
}

.tabele tr td:nth-of-type(1) {
	background: #007DC3;
}

Jedyną większą innowacją w ostatnim przykładzie jest zastosowanie obramowania komórki z każdej strony (wiersz nr 32).

.tabele {
	max-width: 768px;
	font-family: sans-serif;
	background: #000;
	background: linear-gradient(rgba(67,251,63,1) 11%, rgba(0,0,0,0.9) 100%);
	color: #fff;
	text-align: right;
	padding-bottom: 30px;
	text-shadow: 0 0 1px #000;
}

.tabele table {
	width:90%;
	border-collapse: collapse;
	margin: 0 auto;
}

.tabele caption {
	font-size: 1em;
	background: #000;
	padding: 20px;
	margin: 10px auto;
}

.tabele tbody tr:hover {
	background: #777;
	background: rgba(0,0,0,.2);
}

.tabele td {
	padding: 8px;
	border: solid 1px #000;
}