Dalam pembuatan sebuah website, salah satu elemen yang selalu ada dan paling sering digunakan adalah tabel. Tabel biasanya digunakan untuk menampilkan data-data tertentu sesuai dengan kolom dan bidangnya masing-masing. Tabel yang baik harus memiliki tampilan yang enak dipandang mata karena biasanya tampilan data yang terdaftar dan menumpuk pada tabel membuat orang jenuh untuk membacanya.
Pada posting kali ini saya akan menunjukkan pada anda bagaimana cara mendesain sebuah tabel agar lebih menarik dan tidak membuat orang jenuh saat membaca datanya. Ada 5 macam tabel yang saya buat dengan desain yang berbeda. Setiap desain memiliki peruntukkannya masing-masing.
Namun, perlu anda ketahui bahwa ini lebih kepada sebuah konsep desain. Jadi, tabel yang anda terapkan pada website yang anda buat sebaiknya disesuaikan lagi dengan keseluruhan desain anda.
Oke kita langsung saja.
5 tabel yang saya buat ini saya 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.
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.
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.
Highlighted Row : Tabel ini adalah tabel yang menyorot data baris tertentu. Data yang di sorot adalah data yang lebih penting daripada data yang lain.
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.
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.
Markup HTML
Markup HTML yang digunakan saya samakan pada setiap tabel yang saya buat. Kode tersebut merupakan HTML standar dari pembuatan sebuah tabel. Yang berbeda dari setiap table adalah nama class-nya masing-masing yang saya tandai dengan warna merah. Anda bisa lihat kodenya dibawah.
<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>
Kode CSS
Setiap tabel dengan nama class-nya sendiri di desain dengan kode css-nya masing-masing. Ketiga tabel tersebut di desain dengan menggunakan metode pseudo class :nth-child(). Nah, untuk kode css-nya masing-masing, anda bisa lihat tab kode dibawah ini beserta keterangannya.
.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 */
.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 */
.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 */
.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 */
.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 */
Setiap keterangan-keterangan yang penting saya sertakan secara langsung dalam komentar CSS-nya. Jika anda memperhatikannya, anda akan mengetahui bahwa ternyata hanya ada beberapa baris kode saja untuk styling setiap tabel. Untuk menyesuaikannya dengan desain web anda, anda bisa mengganti warna-warnanya. Atau, anda juga mungkin bisa menambahkan style-style yang menurut anda bagus.
So, Bagaimana menurut anda? ada ide lain ? 🙂 Saya tunggu jawaban anda di komentar.
Sekian. Semoga bermanfaat.
~Muhammad Syakirurohman~
Adhyaksa Jaya
Waw fixed head-nya mantap gan. Thx tutorialnya 😀
Syakir Rahman
Sip, semoga bermanfaat ya gan 😀
5 Cara Membuat Tabel HTML menjadi Lebih Menarik - BloggerIndo
[…] pembuatan sebuah website, salah satu elemen yang selalu ada dan paling sering digunakan adalah tabel. Tabel biasanya digunakan untuk menampilkan data-data tertentu […]
Wahab Saputra
Nice tutor…
muhammad isra
Jujur.. sebagai newbie… saya mendapatkan ilmu baru mengenai pembuatan table pada blog..rupanya begini caranya…
terima kasih banyak mas…. salam sukses selalu..
Syakir Rahman
Yaap, sama-samaa.. sukses juga gan 😀
Agus
Semakin lama,semakin bertambah ilmu aku disini :3
keep posting selalu mas syakir 😀
Syakir Rahman
Yaa.. siap mas hehe.. semoga bermanfaat aja lah 😀
Agus
mas,saya sedang training membuat web travel mobil….yang saya bingung dibagian admin…kalo web sejenis yg saya buat itu,btuh bagian apalagi ya kira :/ ?? soalnya gk ada bagian posting dan komen 😀
Syakir Rahman
Liat-liat website travel yang sudah ada aja mas.. nanti inspirasinya ketemu sendiri
Amry Martin
Keren MAS Postingannya, terima kasih untuk ilmunya mas.
Semoga mas semakin berjaya dan postingan saya semakin menarik berkat postingan yang mannnntap ini !!!
Jangan lupa untuk mengunjungi situs saya ya di http://www.agendriver.com/
Syakir Rahman
Sip.. Sama-samaa.. Amiin 😀
sandi
bang ente orang mana? bogor kah?
Syakir Rahman
Iyaaap.. bogor gan 😀
fandi
Widih keren2 bro. Izin belajar yya!
Bahzam
Terima kasih infonya..
Ditungu kunjungan balik ya:
http://ukafahrurosid.com
http://bahzam.com
Thanks
Arlicious
keren kang… kang kalo mau bikin yang Responsive gimana yaaa…?
Syakir Rahman
Itu sudah responsive kok
Amry Martin
Artikel yang bagus gan, semoga setelah membaca artikel ini blogg saya semakin maju…haha
Jika Anda membutuhkan Drivers Printer silahkan kunjungi situs saya di http://www.agendriver.com/
Situsaya
itu bisaa buat blogger ya?
Saiful
trims tabelnya, ane bookmark dulu karena sering nyari 🙂 thanks ya
Syakir Rahman
Silahkan
ASKEP
makasih banyak gan,langsung praktekkan dulu,oya kok punya saya belum responsive ya mas dengan 5 kolom, gimana agar responsive dalam membuat tabel
Syakir Rahman
Pada dasarnya yang saya share di atas sudah responsive.. coba ulik lagi sendiri, mungkin ada yang tertinggal kode cssnya
CasepA
Terimakasih atas ilmunya, salam kenal..
Syakir Rahman
Sama-sama, salam kenal juga
pulau harapan
infonya baik sekali gan akhirnnya saya dapat membuat table dengan cara agan
teguh
gan gimana cara buat code css supaya bisa frame kayak kotak yg ada nama 5 code itu,
Syakir Rahman
Itu pakai tab di bootstrap, terus diubah lagi cssnya.. coba baca ini : Membuat tab bootstrap
Koko
memang bagus.
Ka gimana caranya buat Tab view seperti di postingan??
Makasih sblumnya…
Syakir Rahman
Itu pakai tab di bootstrap, terus diubah lagi cssnya.. coba baca ini : Membuat tab bootstrap
Nusasoft.net
[…] Zebra […]
Somiarta
Wah sangat bermanfaat sekali infonya..
Bagi agan yang berminat belajar membuat website bisa dilihat di situs berikut ini Belajar Membuat Website di Bali
Nedi Arwandi
Thank’s and matur nuwun tutorial’y, sob……
sandi
ijin berguru kang.
Kampung Inggris
Keren… tapi kira2 pa tabel diatas bisa diterapkan pada semua jenis template?
Syakir Rahman
Tentu bisa mas
joko
gan mau nanya kalau dalam table diberi titik dua (:),jadi tiap nginputkan 2 angka ditandai tanda titik dua. kira -kira apa ya gan untuk listing php nya?
Syakir Rahman
Waduuh.. iya itu pakai php, tapi saya lupa nama functionnya.. coba cari di blog sebelah
dudu
bro, mau tanya kalo bikin tabel yang paling bawah banget gimana ya? tertarik nih saya..
Syakir Rahman
Itu kan sudah dikasih tutorialnya.. tinggal dipelajari saja atau download aja contohnya
iyus
makasih infonya…
kizeh
Saya lebih suka highlighted table
Nur
all right gan …
mau dicoba dulu bikin tabelnya … biar lebih mudah ngatur posisi text dan gak berantakan ^_^
cctv pantura
zebra tabel lebih simpel menurut saya..
Bensin77
gan klo fungsi tabelnya buat iklan baris gmna ya caranya ?
biar per baris ada 5 kolom ke bawahnya 5 kolom, tapi ukuran kolomnya sama semua
Syakir Rahman
Ditentukan saja ukuran width sama heightnya.. kalo pengen lebih jelas.. otak-atik aja kode sampel yang saya berikan di atas
Oni Zamroni
Trima kasih gan untuk tutor tabel responsifnya.. tapi jujur ya sy aga pusing liat kode2nya 😀 .. Maaf gan kalo bisa info mengenai plugin untuk membuat tabel responsif di wordpress dungs.. Salam
Syakir Rahman
Coba cari namanya tablepress kalo ga salah 🙂
fozan
artikel yang bagus..thanks gan..
karimunjawa
aku ingin membuat tabel paling atas 2 kolom terus bawahnya 1 kolom bawahnya lagi ada 2 kolom, scriptnya gimana ya min
Syakir Rahman
Pakai atribut colspan atau rowspan.. prakteknya coba lihat disini : http://www.w3schools.com/tags/att_td_colspan.asp
informasi bisnis
melihat ada kode yang harus diselipkan pada css template, apa ini tidak bentrok dengan isi kode lainnya?
karena saya sudah menggunakan template premium dan gak bisa setting sendiri
Syakir Rahman
insyaallah tida.. siapa bilang mas.. bisa kok, selama mas paham apa yang mas tambahkan
Fadhil
kalau mau di pake di blog gimana? saya masih pemula
Syakir Rahman
Copy-pastekan kodenya markup htmlnya di editor html untuk postingnya.. dan cssnya di templatenya
fiki efendi
Wah manteb nih tutorial membuat tablenya, nambah lagi nihh ilmu ane, kunjungi juga min http://www.fikiefendi.net/
kuroh
thanks pak
asmkawa
saya akan cuba buat di blog saya,terima kasih dgn infonya
Dokloz
Gan cara letakin kode css nya dimana? maklum masih newbie main blog hehe 😀
Syakir Rahman
Download dulu demo filenya.. edit di source code editor, terus bedah sendiri susunan kodenya
kapalomen
wow, mantap,
ini yang saya cari.
thank min
nabil
Gan kode cssnya di selipin di sebelah mana di edit template?
syakirurahman
di atas < /b:skin >
Fadli Irawan Marjan
sangat membantu sekali terimakasih sanggat bermanfaat.
Bimtek Keuangan
Dari sekian banyak situs yang mengulas html dengan tampilan menarik, ini yang menurut saya paling bagus dan mudah
drasis
Mas boleh izin share ???
Mayuf
Terimakasih gan
mery sintia
terima kasih , artikelnya sangat membantu untuk wawasan ilmu html
mery sintia
artikel yang bermanfaat Thanks
Obat Hepatitis
Akhirnya .. nemu juga tutorial yang lengkap buat design tabel di website saya
Terimakasih banyak ya
Freebook
Mantapp saya akan mencobanya…
Dan mari kita saling bersilaturrahmi…
Karimunjawa
wuihhh mantap html nya… setelah di praktekkan dan berhasil. kini blog ku menjadi cantik dan semakin menarik.
Paket Wisata Karimunjawa
Makaih agan,,, saya banyak belajar dari itu ini tentang tabel yang menarik…
Niazulianti
Terimakasih min artikelnya , sangat membantu saya dalam mempelajari dan memahami cara membuat tabel di html. Sukses terus min .
Perkenalkan nama saya Nia zulianti
Kunjungi website kampus kami https://www.atmaluhur.ac.id/