5 tabel ini di namakan masing-masing : Zebra Table dengan nama class “zebra-table“, Rainbow Table dengan nama class “rainbow-table“, Highlighted Column dengan nama class “highlighted-column“, dan Fixed Table Header dengan class “fixed-th“. Ketiga tabel tersebut memiliki fungsi dan kelebihannya masing-masing, seperti yang disebutkan di bawah ini.
Fixed Table Header: Kepala atau judul setiap kolom pada tabel ini bersifat fixed, artinya akan tetap tampil saat tabel di scroll. Tabel ini sangat cocok untuk tabel yang mendaftarkan banyak data, dalam tinggi tabel yang terbatas.
/* CSS for Fixed Table Header in index4.html */
.fixed-th {
width: 100%;
border-collapse: collapse;
box-shadow: 0 2px 3px 1px #ddd;
table-layout: fixed;
border:10px solid #fff;
}
.fixed-th thead {
background-color: #333;
color:#fff;
display: block;
}
/* make it scrolled */
.fixed-th tbody {
display: block;
overflow-y: auto;
width: 100%;
max-height: 300px;
position: static;
}/* end make it scrolled */.fixed-th th,.fixed-th td{
vertical-align: top;
padding:10px 7px;
text-align: left;
}
.fixed-th th + th, .fixed-th td + td {
border-left:1px solid #ddd;
}
.fixed-th th:nth-child(1), .fixed-th td:nth-child(1) {
min-width:40px;
}
.fixed-th th:nth-child(2), .fixed-th td:nth-child(2) {
width:300px;
}
.fixed-th th:nth-child(3), .fixed-th td:nth-child(3) {
width:250px;
}/* End CSS for Fixed Table Header in index4.html */
Highlighted Column : Kebalikan dari highlighted column. Tabel ini menyorot kolom yang dianggap lebih penting dari kolom lain. Tabel seperti ini biasanya digunakan pada pricing tabel, yang mana kolom yang disorot adalah kolom paket harga promo.
/* CSS for Highlighted Column in index3.html */
.highlighted-column {
width: 100%;
border-collapse: collapse;
box-shadow: 0 2px 3px 1px #ddd;
overflow: hidden;
border:10px solid #fff;
}
.highlighted-column th,.highlighted-column td{
vertical-align: top;
padding:10px 7px;
text-align: center;
margin:0;
}
.highlighted-column tr td:nth-child(2),.highlighted-column tr th:nth-child(2) { /* Make column highlighted */
background:#333333;
color: #fff;
}
/* End CSS for Highlighted Column in index3.html */
Highlighted Row : Tabel ini adalah tabel yang menyorot data baris tertentu. Data yang di sorot adalah data yang lebih penting daripada data yang lain.
/* CSS for Highlighted Row in index2.html */
.highlighted-row {
width: 100%;
border-collapse: collapse;
box-shadow: 0 2px 3px 1px #ddd;
overflow: hidden;
border:10px solid #fff;
}
.highlighted-row th,.highlighted-row td{
vertical-align: top;
padding:10px 7px;
text-align: left;
margin:0;
}
/* Make row highlighted */
.highlighted-row tbody tr:nth-child(2) {
background:#cc3333; /* red */
color:#fff;
}/* End CSS for Highlighted Row in index2.html */
Rainbow Table : Tabel ini juga cocok untuk jenis tabel yang memiliki banyak data. Perbedaan warna pada tiap data akan membantu pengguna menemukan data yang dicari. Dari semua tabel yang ada disini, saya kira tabel ini yang paling menarik. Namun, perpaduan warna yang tidak pas justru bisa membuat tabel jadi terlihat norak. Sesuaikan warna dengan warna yang digunakan pada desain web anda.
/* CSS for Rainbow Table in index1.html */
.rainbow-table {
width: 100%;
border-collapse: collapse;
box-shadow: 0 2px 3px 1px #ddd;
overflow: hidden;
border:10px solid #fff;
}
.rainbow-table th,.rainbow-table td{
vertical-align: top;
padding:10px 7px;
text-align: left;
margin:0;
}
.rainbow-table tbody {
color: #fff;
}
/* Make table like rainbow */
.rainbow-table tbody tr:nth-child(4n+1) { /* 4n is 4 colours */
background:#cc3333; /* red */
}
.rainbow-table tbody tr:nth-child(4n+2) {
background:#cccc33; /* yellow */
}
.rainbow-table tbody tr:nth-child(4n+3) {
background:#33cc33; /* green */
}
.rainbow-table tbody tr:nth-child(4n+4) {
background:#3333cc; /* blue */
}/* End CSS for Rainbow Table in index1.html */
Zebra Table : Cocok untuk tabel yang memiliki banyak data, dan setiap data memiliki field-field yang cukup banyak. Table dengan desain belang-belang ini akan menghilangkan kesan monoton pada tabel.
/* CSS for Zebra Table in index.html */
.zebra-table {
width: 100%;
border-collapse: collapse;
box-shadow: 0 2px 3px 1px #ddd;
overflow: hidden;
border:10px solid #fff;
}
.zebra-table th,.zebra-table td{
vertical-align: top;
padding:10px 7px;
text-align: left;
margin:0;
}
.zebra-table tbody tr:nth-child(odd) { /* Make table like zebra */
background:#eee;
}/* End CSS for Zebra Table in index.html */
Masukan kode Dibawah ini sebagai HTML nya
<table class=”zebra-table“>
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Syakir Rahman</td>
<td>Telukpinang</td>
</tr>
<tr>
<td>2</td>
<td>Della Nadya Ayu Aprillia</td>
<td>Cigombong</td>
</tr>
<tr>
<td>3</td>
<td>Muhammad Andika</td>
<td>Sukasari</td>
</tr>
<tr>
<td>4</td>
<td>Galih Tandicha</td>
<td>Cisaat</td>
</tr>
<tr>
<td>5</td>
<td>Elma Septiana</td>
<td>Rancamaya</td>
</tr>
<tr>
<td>6</td>
<td>Lilis Sulistiawati</td>
<td>Bitung Sari</td>
</tr><tr>
<td>7</td>
<td>Muhammad Irzal</td>
<td>Cipinang Gading</td>
</tr>
<tr>
<td>8</td>
<td>Utami ningrum</td>
<td>Cipayung</td>
</tr>
<tr>
<td>9</td>
<td>Fachrurrozi</td>
<td>Ciawi</td>
</tr>
<tr>
<td>10</td>
<td>Issep Muhammad Nasrullah Hakim</td>
<td>Cibedug</td>
</tr>
</tbody>
</table>
No comments:
Post a Comment