Membuat Desain Tabel dengan CSS

Tabel merupakan elemen yang penting untuk menampilkan facts yang ada di dalam database, jika ingin records yang di tampilkan dalam tabel terlihat menarik kita buat menggunakan css. Desain tabel yang menarik adalah perpaduan warna dan kerapian dari struktur tabel akan menarik bagi orang yang melihatnya.

Warna baris pada tabel biasanya menggunakan warna yang soft, karena yang ditonjolkan adalah isi datanya. Kombinasi warna soft ini biasanya menggunakan jenis warna monochromatic yaitu kombinasi warna tertentu dengan warna lain yang lebih muda.

Tutorial kali ini kita akan membuat tabel seperti di bawah ini:

Berikut script yang harus di buat

1. Index.Html

<html> <head> <title>Desain tabel sederhana menggunakan css</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Mendesain Tabel Menggunakan CSS</h1> <h2>Contoh tabel</h2> <table class="table1"> <tr> <th>No</th> <th>Nama</th> <th>Alamat</th> <th>Usia</th> </tr> <tr> <td>1</td> <td>Eko Yunanto</td> <td>Jakarta selatan</td> <td>20</td> </tr> <tr> <td>2</td> <td>Budi Luhur</td> <td>Bandung</td> <td>21</td> </tr> <tr> <td>3</td> <td>Novianto</td> <td>Surabaya</td> <td>30</td> </tr> <tr> <td>4</td> <td>Bagus Budianto</td> <td>Bandung</td> <td>30</td> </tr> <tr> <td>5</td> <td>Jopan</td> <td>Papua</td> <td>22</td> </tr> <tr> <td>6</td> <td>Agus</td> <td>Surabaya</td> <td>31</td> </tr> </table> </body> </html>

2. Style.Css

.Table1  font-circle of relatives: sans-serif; coloration: #444; border-collapse: crumble; width: 50%; border: 1px strong #f2f5f7;  .Table1  border-disintegrate: collapse; font-size: 14px;  .Table1 tr th heritage: #35A9DB; colour: #fff; font-weight: everyday;  .Table1, th, td  padding: 8px 20px; textual content-align: center-right;  .Table1 tr:hover  heritage-color: #f5f5f5;  .Table1 tr:nth-baby(even)  historical past-colour: #f2f2f2; 

Jika kita ingin membuat variasi desain tabel dengan css harus di sesuaikan desain tabel seperti warna, border, caption agar meanrik sesuai thema web yang kita buat, selamat mencoba semoga berguna.

0 Response to "Membuat Desain Tabel dengan CSS"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel