Iwan Setiawan

Web & graphic designer, illustrator

Love digital design, follow me @intraktives

Tabel menjadi bagian penting di halaman web untuk menampilkan data tabular seperti price list, data penjualan, data pertumbuhan, dan lainnya yang ditampilkan secara tabular. Di tutorial ini kita akan membuat tabel dan stylenya menggunakan CSS3. Dengan adanya CSS3 styling terhadap tabel menjadi lebih mudah.

 

 

Untuk mempercantik tabel ini kita akan menggunakan salah satu pseudo-class dari CSS3 yaitu :nth-child. Dengan :nth-child kita bisa menargetkan elemen tertentu yang merupakan anak (child) dari elemen lain yang dalam hal ini sebagai parent. Diantaranya bisa digunakan pada elemen <tr>,<td> yang merupakan child dari elemen <table> dan <li> yang merupakan child dari elemen list yakni <ol> atau <ul>. Pada contoh ini elemen yang akan kita berikan style menggunakan :nth-child adalah elemen <tr> yang merupakan child dari elemen <table>.

Adapun table yang akan kita buat adalah seperti contoh berikut :

 

NamaAlamatPekerjaan
Amin Jakarta Pegawai
Joni Bogor Pegawai
Beni Bekasi Desainer
Deny Solo Wiraswasta

HTML

<table class="tabel">
<thead>
<tr><th>Nama</th><th>Alamat</th><th>Pekerjaan</th></tr>
</thead>
<tbody>
<tr>
<td>Amin</td>
<td>Jakarta</td>
<td>Pegawai</td>
</tr>
<tr>
<td>Joni</td>
<td>Bogor</td>
<td>Pegawai</td>
</tr>
<tr>
<td>Beni</td>
<td>Bekasi</td>
<td>Desainer</td>
</tr>
<tr>
<td>Deny</td>
<td>Solo</td>
<td>Wiraswasta</td>
</tr>
</tbody>
</table>

CSS

table.tabel{
	width:600px;
	background-color:#ebebeb;
	border-collapse:collapse;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:15px;
	margin-left:250px;
	margin-bottom:150px;
	}
th{
	background: linear-gradient(#445B8C,#2F4062);
	color:#FFF;
	}
tr td,th{
	padding:16px;
	box-shadow: inset 0 -1px #FFF; 
	}
tbody tr:nth-child(even){
	color:#666;
	background:#E6E6E6;
	transition:background 0.8s;
	}
tbody tr:nth-child(even):hover{
	background: rgba(0,0,0,0.19);
	}

 

Fungsi dari pseudo-class :nth-child disini adalah memberi background warna berbeda untuk baris (row) dari tabel. Pada baris (row) 2 dan 4 background warnanya agak sedikit tua dibandingkan baris (row) 1 dan 3.Untuk itu kita memberi keyword even (genap) di kode CSS berikut. Dengan keyword even (genap) kita hanya akan menargetkan baris (row) genap saja.

tbody tr:nth-child(even){
  ...
  }

 

Selain itu dengan :nth-child kita bisa memberi efek transisi pada baris (row) genap yakni baris 2 dan baris 4. Dimana bila kita arahkan kursor ke baris (row) 2 dan 4 maka terjadi perubahan background warna menjadi lebih tua, dan warna teksnya menjadi hitam

 tbody tr:nth-child(even):hover{
  ...
  }