Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

Przykłady kodu CSS dla tabel

piątek,

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

Pierwsza generacja Intel Core
Marka Rdzenie Technologia Data wydania
Core Solo 1 65 nm styczeń 2006
Core Duo 2 65 nm styczeń 2006
.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.

Pierwsza generacja Intel Core
Marka Rdzenie Technologia Data wydania
Core Solo 1 65 nm styczeń 2006
Core Duo 2 65 nm styczeń 2006
.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.

Pierwsza generacja Intel Core
Marka Rdzenie Technologia Data wydania
Core Solo 1 65 nm styczeń 2006
Core Duo 2 65 nm styczeń 2006
.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).

Pierwsza generacja Intel Core
Marka Rdzenie Technologia Data wydania
Core Solo 1 65 nm styczeń 2006
Core Duo 2 65 nm styczeń 2006
.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;
}
Artykuł: Funkcjonowanie jednostek oświaty

Funkcjonowanie jednostek oświaty

Artykuł: Kontrola poprawności danych

Kontrola poprawności danych

Artykuł: Usprawnienie obsługi danych z&nbsp;formularza

Usprawnienie obsługi danych z formularza

Artykuł: PHP: Tablice wielowymiarowe

PHP: Tablice wielowymiarowe

Artykuł: Raspberry Pi

Raspberry Pi

Artykuł: Wacław Iwaszkiewicz

Wacław Iwaszkiewicz

Nasze technikum

Szkoły dla dorosłych

Pełna oferta edukacyjna