Cara Membuat Tabel Belang dengan CSS

Cara Membuat Tabel Belang dengan CSS

17:23
Membuat tabel belang-belang dengan CSS bukanlah hal yang sulit. Html merupakan dasar pembuatan sebuah halaman website. Untuk membuat suatu halaman website yang menarik dan dinamis di butuhkan beberapa tambahan seperti CSS, PHP, Javascript, jQuery, dll. Nah kali ini saya sharing mengenai tag Tabel dalam HTML<table> dimana tabel banyak digunakan untuk menginformasikan sebuah informasi berbentuk list/daftar. Informasi akan terlihat menarik jika kita membuat tabel menjadi belang-belang dengan CSS di HTML. Selain itu kita juga bisa mengatur background, warna border, tebal border, jenis border, dan lain2 di postingan ini. Oke, sesuai judul kita akan mencoba membuat tabel (table) menjadi warna belang-belang/selang-seling dengan menggunakan CSS.
Cara mudah membuat tabel belang dengan CSS

A. Membuat tabel belang dengan CSS pada seluruh halaman.

Membuat tabel (table) seperti warna zebra/belang merupakan hal yang cukup mudah. Kita hanya menambahkan kode CSS pada dokumen html. berikut kode HTML dan CSS membuat tabel warna belang :
<html>
<head>
<title>belang</title>
</head>
<style type=”text/css”>
table{ font: 11px Arial Helvetica, sans-serif; color: #000; border-collapse: collapse; border-spacing: 0;  border:0px solid #333;}
table th { color: #fff; background-color:#555; font-size:15px; padding:2px 5px; }
table td { font-size: 12px; text-align:left; padding: 7px 7px; background-color: #CCE9FD; border:3px solid #ffffff;}
table tr:nth-child(odd) td { background-color: #FFFF99; }
</style>
<body>
<table>
<tr>
<th>No</th>
<th>Judul</th>
</tr>
<tr>
<td>1</td>
<td>Membuat Tabel Belang-belang di HTML</td>
</tr>
<tr>
<td>2</td>
<td>Aplikasi Belajar Tajwid di Android dengan suara</td>
</tr>
<tr>
<td>3</td>
<td>Tema WordPress dengan loading Cepat</td>
</tr>
</table>
</body>
</html>
Maka dari hasil dokumen html diatas jika kita simpan dengan format .html akan tampil seperti gambar berikut ini:
membuat tabel belang htmlKeterangan : Untuk merubah warna belang pada tabel dalam arti baris. Maka kita cukup mengatur CSS diatas. Pada CSS yang saya beri warna biru dan merah itulah yang kita edit untuk mengganti warna belang. Untuk mendapatkan kode warna kita bisa ambil dengan A.photoshop,dll. Untuk  judul kita bisa ubah pada warna coklat. dan rata text kita bisa ganti pada warna hijau,bisa center, atau right. So, intinya kita belajar CSS dulu agar lebih mudah memahaminya. Ingat, jika kita mempunya banyak tabel maka secara otomatis warna tabel akan menjadi belang semua. Untuk menanggulangi hal tersebut saya beri ilmunya. he…just sharing.

B. Membuat beberapa tabel dengan warna belang yang berbeda-beda.


Yuk sampai disini kita akan sharing bagaimana membuat beberapa tabel dengan warna belang yang berbeda-beda. Bayangkan jika semua halaman yang ada tabelnya mempunyai warna sama, Waw…gk keren. he…canda..! Oke intinya mudah. lagi-lagi pada kode css kita. Banyak tabel dengan warna berbeda bisa kita akali dengan memberi selektor terhadap tabel yang kita pilih. Contohnya tabel A dengan belang biru merah, Tabel B dengan warna belang hijau kuning. Nah kita bedakan dulu tabel A dan B dengan memberi selektor.
Contoh tabel dengan warna belang biru-merah:
<table id=”birumerah”>……….</table>
Nah pada tabel diatas kita beri selektor dengan nama birumerah. maka pada CSS kita tambah juga seperti berikut:
<style type=”text/css”>
table#birumerah{ width:90%; font: 11px Arial Helvetica, sans-serif;
color: #000; border-collapse: collapse; border-spacing: 0;  border:0px solid #333;}
table#birumerah th { color: #fff; background-color:#555; font-size:15px; padding:2px 5px; }
table#birumerah td { font-size: 12px; text-align:center; padding: 7px 7px; background-color: blue; border:3px solid #ffffff;}
table#birumerah tr:nth-child(odd) td { background-color: red; }
</style>
kesimpulannya pada CSS setiap tabel kita beri selektor yang berbeda-beda dan kita mempunyai beberapa kode CSS untuk setia tabelnya. Gimana, Udah paham? he….Tenang aja, jika kurang paham tanyakan lewat komentar. Oke..
Untuk Lebih tahu banyak tentang bagaimana membuat tabel menjadi menarik liat saja postingan saya sebelumnya. Maka semakin lengkap, bisa membuat tabel menjadi warna belang dan menambah tampilan tabel menjadi lebih menarik. Semoga cara membuat tabel belang dengan CSS ini bisa membantu Agan dalam belajar HTML.

1 comments:


EmoticonEmoticon

Subscribe to: Post Comments (Atom)