Tag Archives: Table Hover

Membuat Table Zebra Hover

Leave a reply
Table Zebra Hover

Table Zebra Hover

Table Zebra Hover adalah table dengan 2 warna barisnya selang seling yang ketika disorot / highlight dengan mouse pointer akan berubah warna barisnya.

Sebenarnya kita dapat membuat table zebra hover ini baik dengan CSS maupun javascript. Namun di sini kita akan gunakan CSS, karena secara performance lebi baik.

Berikut ini struktur HTML untuk membuat tablenya.

<body>
<table id="table-a">
	<thead>
	<tr><th>Header 1</th><th>Header 2</th>	<th>Header 3</th></tr>
	</thead>
	<tbody>
	<tr><td>Item 1A</td><td>Item 1B</td><td>Item 1C</td></tr>
	<tr><td>Item 2A</td><td>Item 2B</td><td>Item 2C</td></tr>
	<tr><td>Item 3A</td><td>Item 3B</td><td>Item 3C</td></tr>
	<tr><td>Item 4A</td><td>Item 4B</td><td>Item 4C</td></tr>
	<tr><td>Item 5A</td><td>Item 5B</td><td>Item 5C</td></tr>
	</tbody>
</table>
</body>

Untuk presentasinya kita buat dengan coding CSS sehingga table akan berbentuk zebra (2 warna) dan ketika barisnya di highlight / hover akan berubah warna.

#table-a
{	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	width: 500px;
	text-align: center;
	border-collapse: collapse;
}
#table-a th
{	font-size: 13px;
	font-weight: normal;
	padding: 8px;
	background: #b9c9fe;
	border-top: 4px solid #aabcfe;
	border-bottom: 1px solid #fff;
	color: #039;
}
#table-a td
{	padding: 8px;
	background: #e8edff;
	border-bottom: 1px solid #fff;
	color: #669;
	border-top: 1px solid transparent;
}
#table-a tr:hover td
{	background: #d0dafd;
	color: #339;
}

Kita dapat memodifikasi tabel zebra hover ini dengan mengembangkan struktur dan presentasinya.