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

• 
• Ivan Mišić
  09.04.2009
  0 Komentara
• 
  Tweet
• Web Design | css, JavaScript, jQuery

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.

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.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"><!--mce:0--></script>

Evo kako to izgleda u praksi.

Povezani postovi

• CSS vodič za jednostavnije i brže pisanje
• Twitter Status Updates Na Vlastitoj Internet Stranici
• Kako Napraviti Pivot Tablice Excel 2007
• Naprednije korištenje HTML lista
• MySQL Tipovi podataka – Data Types