Para master-master web sudah tidak asing lagi dengan yang namanya css ini karena fungsinya untuk mengatur arau mendesign layout sebuah halaman web. tapi kali ini saya akan memberikan contoh cara mendesign sebuah tabel supaya kelihatan menarik dengan css. Fungsi css jika kita lihat secara rinci adalah mengubah semua
format tampilan dasar tabel menjadi format khusus dengan warna dan
ukuran tulisan yang dideklarasikan pada css, intinya css itu untuk mempercantik tampilan entah pada tabel maupun layout sebuah halaman website. langsung saja ikuti caranya seperti dibawah ini :
<h1>Data Mahasiswa</h1>
<table>
<tr>
<th>Nama</th>
<th>Alamat</th>
<th>E-Mail</th>
</tr>
<tr>
<td>Birrul Walidain</td><td>Lombok</td><td>birul@japan.com</td>
</tr>
<tr>
<td>Bagus Budiartowo</td><td>Lamongan</td><td>bagus@yahoo.co.id</td>
</tr>
<tr>
<td>Alif Trian Husna</td><td>Malang</td><td>trian@gmail.com</td>
</tr>
<tr>
<td>Shandy Pradesa</td><td>Banyuwangi</td><td>shandy@mail.com</td>
</tr>
<tr>
<td>Samsul Aris</td><td>Situbondo</td><td>Samsul@linuxmail.com</td>
</tr>
</table>
Hasilnya Seperti Gambar DI Bawah ini :
Setelah itu kita tinggal mempercantik tampilannya dengan menambahkan kode css seperti berikut ini
<html>
<head>
<title>Contoh Design Tabel Dengan CSS</title>
<style type="text/css">
table {
font: 12px/24px Verdana, Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 500px;
margin:0 auto;
}
th {
border: 1px solid #CCC;
padding: 0 0.5em;
text-align: center;
background-color:#FF3300
}
td {
border: 1px solid #CCC;
padding: 0 0.5em;
background-color:#CCCCCC;
}
h1 {
color:#003300;
font:22px "Trebuchet MS";
text-align:center;
}
</style>
</head>
<body>
<h1>Data Mahasiswa</h1>
<table>
<tr>
<th>Nama</th>
<th>Alamat</th>
<th>E-Mail</th>
</tr>
<tr>
<td>Birrul Walidain</td><td>Lombok</td><td>birul@japan.com</td>
</tr>
<tr>
<td>Bagus Budiartowo</td><td>Lamongan</td><td>bagus@yahoo.co.id</td>
</tr>
<tr>
<td>Alif Trian Husna</td><td>Malang</td><td>trian@gmail.com</td>
</tr>
<tr>
<td>Shandy Pradesa</td><td>Banyuwangi</td><td>shandy@mail.com</td>
</tr>
<tr>
<td>Samsul Aris</td><td>Situbondo</td><td>Samsul@linuxmail.com</td>
</tr>
</table>
</body>
</html>
Setelah kita tambahkan dengan css hasilnya seperti gambar di bawah ini :
Semoga bermanfaat.
Title : Design Tabel Dengan CSS
Description : Para master-master web sudah tidak asing lagi dengan yang namanya css ini karena fungsinya untuk mengatur arau mendesign layout sebuah hala...