Membuat tabel di blogger menggunakan CSS, Contoh 3

Tampilan tabel yang diinginkan

Saya ingin membuat tampilan tabel dengan warna background seperti contoh dibawah dengan menggunakan 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
4	Puspa	Perumahan Citra Raya Blok AA

CSS dan HTML

Untuk membuat tampilan tabel seperti diatas, adalah sebagai berikut :

<style>
#tabel3 {
    width:80%;
    border: 3px solid lightblue;
}

#tabel3 tr:nth-child(even) {
    background-color: #f2f2f2;
}
#tabel3 tr:nth-child(odd) {
    background-color: #f3d9c0;
}

#tabel3 th {
     height:25px;
     background-color: #f38ec0;
     border-bottom: 2px solid lightblue;
     color : white;
}

#tabel3 td {
   border-bottom: 1px solid #dacbe7;
   color : #480063;
   padding:10px;
}

#tabel3 th:hover {
    background-color:lightgreen;
}

#tabel3 td:hover {
   background-color:lightblue;
}
</style>


<span class="subjudul"><b>Tampilan tabel yang diinginkan</b></span>
<br />
<br />
<span class="normal1">Saya ingin membuat tampilan tabel seperti dibawah dengan menggunakan CSS dan html. </span><br />
<br />
<table align="center" id="tabel3">
<tbody>
<tr>
    <th style="width: 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>
<tr>
    <td>4</td>
    <td>Puspa</td>
    <td>Perumahan Citra Raya Blok AA</td>
  </tr>
</tbody>
</table>


Penjelasan

Kode yang digunakan untuk style CSS :

• selector nth-child() digunakan untuk garis zebra, tambahkan background-color untuk baris genap (even) atau ganjil (odd)
• color digunakan untuk memberi warna text
• background-color digunakan untuk memberi warna pada background table
• width digunakan untuk mengatur lebar
• table align="center" id="tabel3" digunakan untuk meletakkan tabel ditengah.

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

---

Artikel terkait :

• Membuat hyperlink di blogger menggunakan html
• Membuat garis pada blogger dengan kode html
• Membuat bullet dan mumbering html
• Membuat bullet dan numbering CSS
• Membuat tabel di blogger menggunakan CSS, Contoh 1
• Membuat tabel di blogger menggunakan CSS, Contoh 2
• Membuat tabel di blogger menggunakan CSS, Contoh 4
• Cara menggabungkan kolom dan baris pada tabel di blog , contoh 5 membuat tabel,
• Tabel dengan scroll dan header tetap, contoh 6 membuat tabel