Cara membuat tabel kolom di blog `

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 :

No	Properti	Keterangan
1.	table	untuk membuat garis pinggir secara keseluruhan
2.	tr	untuk membuat baris dari atas ke bawah
3.	th	sebagai table heading atau induk td
4.	td	untuk 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 :

No	Properti
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 1	Table Heading 2
kolom 1	kolom 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 1	Table Heading 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

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

Terima kasih Anda telah membaca Artikel mengenai Cara membuat tabel kolom di blog dan Kata kunci untuk Artikel ini yaitu Cara membuat tabel kolom di blog