Cara Membuat Tabel dengan CSS di blogger, Contoh 1

Tabel yang diinginkan

Saya ingin membuat tampilan tabel  dengan menggunakan CSS dan html, seperti contoh berikut :

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

CSS dan HTML

Untuk membuat tabel seperti diatas, berikut ini adalah CSS dan html yang  digunakan :

<style>

#tabel1 {
    border-collapse: collapse;
    border : 2px solid violet;
}


#tabel1 th {
    border: 1px solid red;
    text-align:left;
    padding : 10px;
}


#tabel1 td {
    border: 1px solid green;
    height : 30px;
    vertical-align : top;
    padding : 3px;
}
</style>


<table align="center" id="tabel1">
<tbody>
<tr>
    <th style="width: 100px;">Nama</th>
    <th style="width: 200px;">Alamat</th>
</tr>
<tr>
    <td>Nita</td>
    <td style="width: 200px;">Jl. Mawar no. 10, RT 001/RW 013 Kelapa Dua - Kabupaten Tangerang - Banten.</td>
  </tr>
<tr>
    <td>Alisa</td>
    <td style="width: 200px;">Jl. Melati no. 5 RT 001/RW 013 Kelapa Dua - Kabupaten Tangerang - Banten.</td>
  </tr>
<tr>
    <td>Lois</td>
    <td style="width: 200px;">Jl. Melati no. 3 </td>
  </tr>
</tbody></table>



Penjelasan

Untuk membuat tabel :

• Tabel diawali dengan <table><tbody> dan diakhiri </tbody></table>
• Baris dalam tabel : diawali dengan <tr> dan diakhiri </tr>
• Field pada Header dalam tabel  dibatasi dengan <th> dan </th>
• Data/Isi tabel dalam tabel  dibatasi dengan <td> dan </td>

Kode yang digunakan untuk style CSS :

• border digunakan untuk property border
• border-collapse digunakan agar border menjadi satu garis
• width dan height digunakan untuk mengontrol lebar dan tinggi
• text-align digunakan untuk horizontal alignment seperti : kiri (left), kanan (right), atau tengah (center)) untuk isi didalam <th> atau <td>  Secara default, isi untuk <th> berada ditengah dan untuk <td> berada di kiri.
• vertical-align : digunakan untuk vertical alignment seperti atas (top), bawah (bottom) atau tengah (middle) dari isi didalam <th> atau <td>. Secara default berada ditengah.
• Padding : digunakan untuk mengontrol spasi antara border dan isi tabel.
  

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 2
• Membuat tabel di blogger menggunakan CSS, Contoh 3
• Membuat tabel di blogger menggunakan CSS, Contoh 4