Membuat Desain Tabel Dengan Css

Tabel merupakan elemen yang penting untuk menampilkan data yang ada di dalam database, jikalau ingin data yang di tampilkan dalam tabel terlihat menarik kita buat memakai css. Desain tabel yang menarik ialah perpaduan warna dan kerapian dari struktur tabel akan menarik bagi orang yang melihatnya.

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

Tutorial kali ini kita akan menciptakan tabel menyerupai di bawah ini:

Berikut script yang harus di buat

1. index.html

<html> <head>  <title>Desain tabel sederhana memakai 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-family: sans-serif;     color: #444;     border-collapse: collapse;     width: 50%;     border: 1px solid #f2f5f7; } .table1 {  border-collapse: collapse;  font-size: 14px; } .table1 tr th{     background: #35A9DB;     color: #fff;     font-weight: normal; }   .table1, th, td {     padding: 8px 20px;     text-align: center-right; }   .table1 tr:hover {     background-color: #f5f5f5; }   .table1 tr:nth-child(even) {     background-color: #f2f2f2; }

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

Membuat Desain Tabel Dengan Css

0 Response to "Membuat Desain Tabel Dengan Css"

Posting Komentar