Assalamualaikum Wr. Wb.
Kembali bersama Webhozz Blog. Alhamdulillah pada postingan ini, saya ingin membagikan ilmu lagi. Oke langsung saja, pada pertemuan kali ini kita akan membuat desain tabel yang menarik. Karena mungkin bisa saja kita bosan dengan tampilan tabel default bawaan html. Jadi untuk menambah keindahannya kita menggunakan CSS.
Pertama buat file baru, bebas mau kasih nama apa untuk filenya. Kemudian buat struktur HTML seperti di bawah ini. Kita tambahkan tag <title></title> dengan kata “Tabel CSS”. Maka akan seperti ini.
Kedua, Buat struktur tabel pada tag <body></body> seperti ini.
Jadi, hasilnya akan tampak seperti ini pada umumnya.
Oke, kode HTMLnya sudah kita buat. Selanjutnya adalah membuat file CSSnya.
Ketiga, kita buat script cssnya dan sisipkan pada tag <head></head>. Berikut adalah kodenya.
Berikut ini adalah source code lengkapnya.
<!DOCTYPE html><html>
<head>
<title>Tabel CSS</title>
<style type=”text/css”>
table
{
border:1px solid black;
font-family: arial;
font-size: 20px;
}
th
{
background-color: #00FF66;
}
tr:hover
{
background-color: yellow;
}
</style>
</head>
<body>
<table align=”center” border=”1″>
<tr>
<th align=”center”>No.</th> <th>Nama</th> <th>Alamat</th> <th>Pekerjaan</th>
</tr>
<tr>
<td align=”center”>1</td>
<td>Danny Julian Pratama</td>
<td>Jln. Sukanegla, Cicaheum</td>
<td>Trainer</td>
</tr>
<tr>
<td align=”center”>2</td>
<td>Fahra Natasya</td>
<td>Jln. Raya Kopo, Suka Asih</td>
<td>Youtuber</td>
</tr>
<tr>
<td align=”center”>3</td>
<td>Iko Uwais</td>
<td>Jln. Sukanegla, Cicaheum</td>
<td>Aktor Laga</td>
</tr>
</table>
</body>
</html>
Setelah itu, saat dijalankan pada browser akan terlihat seperti ini di saat normal.
Akan tetapi jika kita arahkan mouse pada salah satu baris, maka baris tersebut akan berubah warna. Begitu pula dengan dengan baris yang lainnya.
Dan begitulah akhirnya, tabel css kita yang atraktif sudah jadi. Dengan koding sederhana ini, silahkan kembangkan sesuai kreatifitasmu masing-masing.
Alhamdulillah, demikianlah tutorial pada postingan kali ini. Silahkan mencoba dimanapun dan kapanpun ada berada. Maaf jika ada kesalahan pada tutorial ini. Insya Allah akan posting tutorial lagi. Demikian dari saya, Walaikumsalam Wr. Wb.