Pada dasarnya anda yang datang ke tutorial diblog saya adalah ada yang merasa tampilan tablenya kurang menarik, tidak enak dipandang dan juga masih belajar cara membuat table dengan htmlnya. Pastinya membuat table yang bagus adalah impian anda yang baru belajar HTML dan CSS bukan?. nah jika benar demkian tepat sekali anda datang ke blog saya.
Dalam tulisan artikel kali ini anda akan belajar cara mendesain table html anda supaya terlihat bagus dan enak dipandang. adapun langkah-langkahnya adalah sebagai berikut :
Membuat Kerangka Table Html
pada tutorial kali ini anda kan membuat kerangka table yang akan anda buat didalam html. kerangka tersebut meliputi
- Judul
- Tombol Button
- Table
Untuk lebih jelasnya silahkan anda buat file dengan nama "index.html" kemudian copy kode table dibawah ini :
Index.html
<html>
<head>
<title>Membuat table bagus ala aplikasimurahan.blogspot.com</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<center><h1>Membuat table bagus ala aplikasimurahan.blogspot.com</h1></center>
<button>Tambah Data</button>
<br><br/>
<table cellspacing='0' >
<thead>
<tr>
<th>Nama Murid</th>
<th>Alamat</th>
<th>Kelas</th>
<th>Usia</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ari Purnama</td>
<td>Cikedung - Indramayu</td>
<td>Kelas 3A</td>
<td>15</td>
<td>
<button>Edit</button><button>Delete</button>
</td>
</tr>
<tr>
<td>Budiarto Nugroho</td>
<td>Cikedung - Indramayu</td>
<td>Kelas 3A</td>
<td>14</td>
<td><button>Edit</button><button>Delete</button></td>
</tr>
<tr>
<td>Caryono</td>
<td>Cikedung - Indramayu</td>
<td>Kelas 3A</td>
<td>15</td>
<td><button>Edit</button><button>Delete</button></td>
</tr>
<tr>
<td>Darwinto</td>
<td>Cikedung - Indramayu</td>
<td>Kelas 3A</td>
<td>14</td>
<td><button>Edit</button><button>Delete</button></td>
</tr>
</tbody>
</table>
</body>
</html>
Hasil dari kode diatas adalah seperti terlihat pada gambar di bawah ini.
Jika dilihat dari gambar diatas tampak berantakan bukan dari segi desain table juga tidak rapih dan terlihat jelek. untuk membuat tampilan table lebih menarik maka tambahkan kode css.
Cara Design Table dengan CSS
Setelah kerangka dasar dari html selesai dibuat, langkah selanjutnya adalam membuat desain dengan css. untuk membuat desain dengan css anda membuat file dengan nama "index.css", fungsi dari file css adalah untuk memanipulasi tampilan agar menjadi menarik. silahkan copy code dibawah ini kemudian pindahkan ke index.css anda.
Index.css
Index.css
h1{
font-family: sans-serif;
}
button{
width:100px;
height:30px;
}
table {
font-family: Arial, Helvetica, sans-serif;
background: #eaebec;
border: #0080ff 1px solid;
text-align:center;
}
table th {
color: white;
padding: 15px 35px;
background: #0080ff;
}
table tr {
text-align: center;
padding-left: 20px;
}
table td {
color: #666;
padding: 15px 35px;
background: #fafafa;
border: #0080ff 1px solid;
}
table tr:hover td {
background: #f2f2f2;
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);
}
ketika ditambahkan Css hasil akhir dari tabel diatas akan menghasilkan tampilan seperti dibawah ini
Kesimpulan :
Html (hyper text markup language) adalah bahasa kerangka desain untuk web yang mendeskripsikan struktur dari web page. karena html masih bersifat kerangka maka untuk memperindah tampilan dari kerangka tersebut dibutuhkan yang namanya file CSS.
File Css fungsinya adalah untuk memperindah tampilan menjadi lebih menarik untuk dipandang oleh mata. Demikian tutorial singkat dari saya, semoga bermanfaat untuk anda yang baru belajar sampai ketemu ditutorial lainnya.
0 Komentar