Mempercantik Tampilan Table Dengan CSS
Mempercantik tampilan sebuah table dengan CSS, agar tampilan table menjadi lebih elegan dari yang sebelumnya tampilannya masih biasa. Jadi CSS disini berperan sebagai mempercantik tampilan sebuah table dengan sedikit sentuhan dari CSS. Ok Langsung saja kita praktekan kodingnya dan silahkan teman-teman perhatikan langkah dibawah ini :
1. Langkah yang pertama ialah buat dahulu tag html dan kode table dengan menggunakan html terlebih dahulu. Seperti berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabel</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<br>
<br>
<center><h1>Mempercantik Table dengan CSS</h1></center>
<br>
<br>
<!-- ini merupakan kode table html -->
<table>
<thead>
<tr>
<th>No</th>
<th>Nama Siswa</th>
<th>Jurusan</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Dina</td>
<td>RPL</td>
<td>Gianyar</td>
</tr>
<tr>
<td>2</td>
<td>Anton</td>
<td>MM</td>
<td>Gianyar</td>
</tr>
<tr>
<td>3</td>
<td>Riska</td>
<td>TKJ</td>A
<td>Gianyar</td>
</tr>
<tr>
<td>4</td>
<td>Sari Ayu</td>
<td>AK</td>
<td>Gianyar</td>
</tr>
</tbody>
</table>
<!-- ini merupakan kode table html -->
</body>
</html>
2. Langkah kedua ialah buat dulu kode css seperti berikut :
*{
margin: 0 auto;
padding: 0;
font-family: Helvetica;
box-sizing: border-box;
}
table {border:1px solid #0088FF; border-collapse: collapse; box-shadow: 0px 2px 5px silver;}
table thead{background: #0088FF; color: white; border-bottom: 4px solid #006fd0;}
table th,td {padding: 20px;}
table tr:nth-child(2n){
background-color: #ededed;
}
Jika sudah silahkan simpan semua file diatas dan buka index.html di browser teman masing-masing dan lihat hasilnya. Hasilnya seperti dibawah ini :
Untuk memperlancar proses metode pembelajaran kalian saya juga menambahkan sebuah video silahkan teman-teman download atau tonton di Channel Youtube Saya di AgusTutorial
Bagi teman-teman yang ingin download source kodenya silahkan klik tombol download dibawah ini :
Sekian dulu ya teman,Semoga tutorial dari saya bermanfaat untuk kalian semua dan saya ucapkan terima kasih .
Comments
Post a Comment