Jumat, 10 Agustus 2012


Cara membuat tabel kolom di blog


By on 07.47

Sepertinya sudah tidak asing lagi tentang Bagaimana Cara membuat tabel ( table ) untuk blog ,baik akan kita bahas Sedikit mengenai tentang Tabel ini , Seperti yang kita ketahui tabel ini berfungsi untuk mem perinci dan memperjelas Post / Artikel dengan detail tertentu.Tabel ini menampilkan diantaranya seperti nomor ( biasanya di sisi kiri ),sedang isi /kolom ditengah ,di sisi kanan biasanya keterangan .oke ,, akan kita buat Tabel ini sesederhana mungkin .
Berikut langkah - langkahnya :
Cara membuat tabel menggunakan html :
Properti yang akan kita gunakan yaitu :

NoProperti Keterangan
1.tableuntuk membuat garis pinggir secara keseluruhan
2.truntuk membuat baris dari atas ke bawah
3.thsebagai table heading atau induk td
4.tduntuk mengisi kolom / isi dari kiri ke kanan

kode di atas sebagai berikut :


<table style="background:#ddd; cellpadding="0" cellspacing="0" border="1" width="80%"><tbody><tr><th style="background:blue; color:white; font-style:bold; font-size:13px; width="15%">No</th><th style="background:blue; color:white; font-style:bold; font-size:13px;width="25%">Properti</th>
<th style="background:blue; color:white; font-style:bold; font-size:13px;width="35%">Keterangan</th></tr><tr><td>1.</td><td><b>table</b></td><td>untuk membuat garis pinggir secara keseluruhan </td></tr><tr><td>2.</td><td><b>tr</b></td><td>untuk membuat baris dari atas ke bawah</td></tr>
<tr><td>3.</td><td><b>th</b></td><td>sebagai table heading atau induk td</td></tr>
<tr><td>4.</td><td><b>td</b></td><td>untuk mengisi kolom / isi dari kiri ke kanan</td></tr></tbody></table>

 anda juga dapat menyesuaikan besarnya font text ( font-size ) ,lebarnya table( width ) dan background td berbeda berikut contohnya :

 <table border="1" cellpadding="1" cellspcing="0" style="width: 80%;"><tbody>
<tr><th style="background: blue; color: white; font-size: 20px; font-weight: bold; width: 40%;">Table Heading 1</th><th style="background: blue; color: white; font-size: 20px; font-weight: bold; width: 40%;">Table Heading 2</th></tr>
<tr><td style="background: #9fc5e8; color: black; font-size: 14px; font-weight: normal; text-align: center;">kolom 1</td><td style="background: #9fc5e8; color: black; font-size: 14px; font-weight: normal; text-align: center;">kolom 2</td></tr>
</tbody></table>
Hasil :


NoProperti
1.<table> -->untuk membuat tabel secara keseluruhan ( garis tepi ) dan di tutup dengan </table>
2.<tr>      --> untuk membuat baris dari atas ke bawah di tutup dengan </tr>
3.<th>     -->sebagai table heading ( induk dari td /isi kolom ) di tutup dengan </th>
4.<td>     --> untuk mengisi kolom dari kiri kekanan di tutup dengan </td>
Table Heading 1Table Heading 2
kolom 1kolom 2
Anda juga bisa mengilangkan Garis tepi table ( border ) tersebut dengan mengubah nilai border="0" dan juga anda bisa membuat background td berwarna warni ( selang - seling )


<table border="0" cellpadding="1" cellspcing="0" style="width: 80%;"><tbody>
<tr><th style="background: blue; color: white; font-size: 20px; font-weight: bold; width: 40%;">Table Heading 1</th><th style="background: blue; color: white; font-size: 20px; font-weight: bold; width: 40%;">Table Heading 2</th></tr>
<tr><td style="background: #9fc5e8; color: black; font-size: 14px; font-weight: normal; text-align: center;">Baris 1 Kolom 1</td><td style="background: #9fc5e8; color: black; font-size: 14px; font-weight: normal; text-align: center;">Baris 1 Kolom 2</td></tr>
<tr><td style="background: #cfe2f3; color: black; font-size: 14px; font-weight: normal; text-align: center;">Baris 2 Kolom 1</td><td style="background: #cfe2f3; color: black; font-size: 14px; font-weight: normal; text-align: center;">Baris 2 kolom 2</td></tr>
<tr><td style="background: #9fc5e8; color: black; font-size: 14px; font-weight: normal; text-align: center;">Baris 3 Kolom 1</td><td style="background: #9fc5e8; color: black; font-size: 14px; font-weight: normal; text-align: center;">Baris 3 Kolom 2</td></tr>
</tbody></table>
Hasil :
Table Heading 1Table Heading 2
Baris 1 Kolom 1Baris 1 Kolom 2
Baris 2 Kolom 1Baris 2 kolom 2
Baris 3 Kolom 1Baris 3 Kolom 2

Saya kira cukup sekian tentang Cara membuat table Html,Semoga bermanfaat bagi sobat,
Jangan lupa like ya ,,

Tukang Coding
Judul: Cara membuat tabel kolom di blog
Review oleh: Tukang Coding | Template TreTans 1.0
Update pada: 07.47 | Rating: 4.5

Comment for "Cara membuat tabel kolom di blog"

0 komentar

Posting Komentar