Cara Menciptakan Tabel Dengan Css Di Blogger, Pola 1

Tabel yang diinginkan

Saya ingin menciptakan tampilan tabel  dengan memakai CSS dan html, ibarat pola 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 menciptakan tabel ibarat diatas, berikut ini yaitu CSS dan html yang  dipakai :

<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 menciptakan 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 dipakai untuk style CSS :

• border dipakai untuk property border
• border-collapse dipakai biar border menjadi satu garis
• width dan height dipakai untuk mengontrol lebar dan tinggi
• text-align dipakai untuk horizontal alignment ibarat : 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 : dipakai untuk vertical alignment ibarat atas (top), bawah (bottom) atau tengah (middle) dari isi didalam <th> atau <td>. Secara default berada ditengah.
• Padding : dipakai untuk mengontrol spasi antara border dan isi tabel.
  

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