Zebra stil tablice uz pomoć css-a i jQuery JavaScript biblioteke

Kako većina današnjih Internet stranica koristi <div> za strukturno oblikovanje stranica za razliku od nekada krištenih tablica. Uz pomoć jednog malog trika vrlo jednostavno možete za svaki parni ili neparni red postaviti drugačiji css still.

Prije pisanja oblikovanja tablice uz pomoć css-a istu morami i napraviti, niže možete vidjeti primjer jedne tablice.

Nakon što ste napravili tablicu na red dolazi oblikovanje iste uz pomoć css-a.
Kao što vidite svaki dio tablice se satoji od taga (table, tr, th, td) postoje tu još neki no ovo su korišteni u primjeru. Na temelju njih definirat ćemo stil tablice.
Primjer css-a za tablicu.

table {
	width: 100%;
	text-align: left;
	border-top: 5px solid #9BAFF1;
	border-right: 1px solid #9BAFF1;
	border-bottom: 5px solid #9BAFF1;
	border-left: 1px solid #9BAFF1;
	color: #003399;
}
td, th {
	padding: 4px;
}
th {
	font-weight: bold;
	background-color: #B9C9FE;
	border-bottom: 1px solid #cef;
}
td {
	text-align: center;
}

Taj css će nam dati oblikovanje kao na slici ispod.

Tablica samo s css formatiranjem

Sada je potrebno definirati still parnih (even) odnosno neparnih (odd) redaka tablice.

.even {
	background-color: #E8EDFF;
}
.even td {
	border-top: 1px solid #9BAFF1;
	border-bottom: 1px solid #9BAFF1;
}

Za automatsku primjenu klase, sve što jQuery JavaScript biblioteka treba za neparne redove je:

$(document).ready(function(){
	$("tr:odd").addClass("odd");
});

Ili za parne

$(document).ready(function(){
	$("tr:even").addClass("even");
});

Naravno moguća je i kombinacija

$(document).ready(function(){
	$("tr:odd").addClass("odd");
	$("tr:even ").addClass("even ");
});

No cijela stvar funkcionira kada u cijelu stvar uključimo i jQuery JavaScript Library.

Evo kako to izgleda u praksi.

Leave a comment