Kamis, 07 Januari 2016

Cara Membuat Tabel dengan CSS di blogger, Contoh 1

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 :

    Related Posts

    Cara Membuat Tabel dengan CSS di blogger, Contoh 1
    4/ 5
    Oleh