Membuat Tabel Di Blogger Memakai Css, Pola 2

Tampilan tabel yang diinginkan

Saya ingin menciptakan tampilan tabel dengan garis bawah dan hover menyerupai pola dibawah dengan memakai CSS dan html.

No.	Nama	Alamat
1	Nita	Jl. Mawar no. 10, RT 001/RW 013 Kelapa Dua - Kabupaten Tangerang - Banten.
2	Alisa	Jl. Melati no. 5 RT 001/RW 013 Kelapa Dua - Kabupaten Tangerang - Banten.
3	Lois	Jl. Melati no. 3

CSS dan HTML

Untuk menciptakan tampilan tabel menyerupai diatas, ialah sebagai berikut :

<style>

#tabel2 th {
   border-bottom: 3px solid lightblue;
}

#tabel2 td {
   border-bottom: 1px solid #ddd;
}

#tabel2 tr:hover {
    background-color:lightgreen;
}

#tabel2 td:hover {
   background-color:lightblue;
}

</style>

<table id="tabel2">
<tbody>
<tr>
    <th 30px="">No.</th>
    <th style="width: 150px;">Nama</th>
    <th>Alamat</th>
</tr>
<tr>
    <td>1</td>
    <td>Nita</td>
    <td>Jl. Mawar no. 10, RT 001/RW 013 Kelapa Dua - Kabupaten Tangerang - Banten.</td>
  </tr>
<tr>
    <td>2</td>
    <td>Alisa</td>
    <td>Jl. Melati no. 5 RT 001/RW 013 Kelapa Dua - Kabupaten Tangerang - Banten.</td>
  </tr>
<tr>
    <td>3</td>
    <td>Lois</td>
    <td>Jl. Melati no. 3 </td>
  </tr>
</tbody>
</table>


Penjelasan

Kode yang dipakai untuk style CSS :

• border-bottom dipakai untuk menunjukkan garis horizontal pada <th> dan <td>
• tr:hover dipakai untuk menunjukkan highlight pada baris yang dipilih memakai cursor
• td:hover dipakai untuk menunjukkan highlight pada field data (td) yang dipilih memakai cursor

Referensi
http://www.w3schools.com/css/css_table.asp

---

Artikel terkait :

• Membuat hyperlink di blogger memakai html
• Membuat garis pada blogger dengan arahan html
• Membuat bullet dan mumbering html
• Membuat bullet dan numbering dengan CSS
• Membuat tabel di blogger memakai CSS, Contoh 1
• Membuat tabel di blogger memakai CSS, Contoh 3
• Membuat tabel di blogger memakai CSS, Contoh 4