CSS untuk Membuat Efek Hover pada Tabel

16 Apr

Selamat Pagi…………… ^^

Alhamdulilah bisa ketemu lagi disini…

ingin menceritakan apa yang saya tau saat ini.. meskipun sedikit tapi mudah-mudahan sangat bermanfaat buat temen2..

untuk kali ini saya membuat tutorial tentang CSS,, sedikt pengetahuan saya tentang CSS hover pada tabel akan saya coba share di blog ini,,

mau tau kelanjutanya,, chek this out ^^

okeh langsung saja kita mulai..

1. buatlah satu file berisikan data pada tabel.. (*dalam contoh ini saya membuat tabel statis jadi tidak menggunakan database)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” href=”css.css” />   (*link untuk menghubungkan file css)
<title>Belajar CSS</title>
</head>

<table cellpadding=”10″ border=”0″ align=”center” id=”table” style=”font-size:14px”>(* id table merupakan id dengan nama table pada css yang memberikan efek hover pada tabel)

<tr >

    <th > No.</th>
    <th> Calon Asprak </th>
    <th> Matakuliah Dipilih </th>
    <th> Total Penilaian </th>  
   
       
   
</tr>
<tr style=”font-family:’Century Gothic'”>

    <td > 1.</td>
    <td> Tanti</td>
    <td> Basis Data </td>
    <td> 20000 </td>  
 
    </tr>
    
<tr style=”font-family:’Century Gothic'”>

    <td > 2.</td>
    <td> Ichsan</td>
    <td> Basis Data </td>
    <td> 19000 </td>  
    <td colspan=”2″> Tools </td>
</tr>       
   

<body>
</body>
</html>

2. buat file CSS  dengan format . css (*misal css.css) berikut  sourcenya

/* CSS tabel */#table tr:hover (*css tabel hover)
{
    background-color:#ccaed0;
    
    font-family: “Century Gothic”, cursive;
    color: #000;
}/** garis tabel **/    
table, tr{
    border-collapse:collapse;
    }th{
    background:#dacde7; (memberikan warna back ground pada pada th )
    
    font-family:”Century Gothic”;
    color:#000;
    padding:10px;
    border: solid thin #FFF;
    border-collapse:collapse;
    border-color:#fff;
}
td
{
    padding:10px;
    border:thin solid #FFF;
    border-collapse:collapse;
    border-color:#fbf3fd;
    
    
}

 
 
 
——————————>>>
nb: (*) merupakan penjelaan dari saya
——————————>>>
 
berikut merupakan tampilannya,,
 
 
terimakasih.. semoga bermanfaat ^^

One Response to “CSS untuk Membuat Efek Hover pada Tabel”

  1. Running Text March 17, 2014 at 1:53 pm #

    Wah cukup lengkap juga, Terimakasih.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: