Tampilan tabel dengan html sering digunakan untuk aplikasi berbasis website, tentunya jika tampilan tabel yang digunakan menarik, akan jauh lebih enak dipandang daripada menggunakan tampilan tabel secara default. Tampilan defaultnya biasanya seperti gambar dibawah ini.
Gambar 1
Bandingkan dengan table dibawah ini:
Gambar 2
Berbeda bukan, dengan desain gambar yang pertama? Untuk membentuk tabel seperti itu yang dibutuhkan hanya Jquery dan CSS untuk mendesainnya. Berikut adalah script dari table, CSS dan Jquerynya
Script tabel html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tes Tabel</title>
<link rel="stylesheet" href="style/table.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('tr:odd').addClass('ganjil');
$('tr:even').addClass('genap');
});
</script>
</head>
<body>
<table border="1">
<tr>
<th>No</th><th>Nama</th><th>Alamat</th><th>Jenis Kelamin</th>
</tr>
<tr>
<td>1</td><td>Fullan 1</td><td>Konokae</td><td>P</td>
</tr>
<tr>
<td>2</td><td>Fullan 2</td><td>Konokae</td><td>L</td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tes Tabel</title>
<link rel="stylesheet" href="style/table.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('tr:odd').addClass('ganjil');
$('tr:even').addClass('genap');
});
</script>
</head>
<body>
<table border="1">
<tr>
<th>No</th><th>Nama</th><th>Alamat</th><th>Jenis Kelamin</th>
</tr>
<tr>
<td>1</td><td>Fullan 1</td><td>Konokae</td><td>P</td>
</tr>
<tr>
<td>2</td><td>Fullan 2</td><td>Konokae</td><td>L</td>
</tr>
</table>
</body>
</html>
Script CSS:
@charset "utf-8";
/* CSS Document */
table{
border:2px solid #60BB9F;
background:#EBEBEB;
border-collapse:collapse;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
table th{
background:#60BB9F;
color:#FFFFFF;
padding:10px;
text-align:left;
}
table td{
padding:10px;
text-align:left;
}
.ganjil{
background:#8FD6CB;
color:#FFFFFF;
}
.genap{
background:#E8E8E8;
}
/* CSS Document */
table{
border:2px solid #60BB9F;
background:#EBEBEB;
border-collapse:collapse;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
table th{
background:#60BB9F;
color:#FFFFFF;
padding:10px;
text-align:left;
}
table td{
padding:10px;
text-align:left;
}
.ganjil{
background:#8FD6CB;
color:#FFFFFF;
}
.genap{
background:#E8E8E8;
}
Demikian tutorial dalam mendesain tabel dengan Jquery dan CSS. Semoga bermanfaat.
0 Response to "Tampilan Zebra Pada Tabel HTML - JQuery"
Post a Comment