Cara membuat tabel didalam postingan blog

Halo sobat blogger... apakah kamu sudah mengetahui bagaimana cara membuat tabel didalam postingan blog?

Waktu sobat membuat postingan baru di halaman new entri blogger, fitur untuk penulisan atau pembuatan tabel tidak ada kan? oleh karena itu untuk tetep bisa membuat tabel di dalam postingan blog tersebut, sobat harus mengetikkan sendiri script atau kode HTMLnya.

Tetapi sebelumnya saya mau bertanya dulu pada kalian, apakah tabel didalam postingan blog yang sobat maksud adalah seperti ini?

Daftar Minimal Jumlah Deposit Modal Trading Forex 

No	Nama Broker	Minimal Deposit	Keterangan
1	Agea.....	01 USD	Bank Lokal
2	FBS......	01 USD	Bank Lokal
3	OctaFx...	05 USD	Bank Lokal
4	NatureFx	20 USD	Bank Lokal

Jika jawaban sobat adalah iya, maksud saya tabel yang ingin sobat buat maksudnya adalah seperti itu dan misalkan sobat ingin bisa membuat tabel kayak gitu, script atau kode HTML untuk tabel tersebut adalah seperti ini:

<center>
<table width="415" border="1">

<tr>

<td width="15"><b>No</b></td>

<td width="100"><b>Nama Broker</b></td>

<td width="150"><b>Minimal Deposit</b></td>

<td width="150"><b>Keterangan</b></td>

</tr>

<tr>

<td>1</td>

<td>Agea</td>

<td>1 USD</td>
<td>Bank Lokal</td>

</tr>

<tr>

<td>2</td>

<td>FBS</td>

<td>1 USD</td>
<td>Bank Lokal</td> 

</tr>

<tr>

<td>3</td>

<td>OctaFx</td>

<td>5 USD</td>
<td>Bank Lokal</td> 

</tr>

<tr>

<td>4</td>

<td>NatureFx</td>

<td>20 USD</td>
<td>Bank Lokal</td> 

</tr>

</table>
</center>

Table dengan tampilan bordernya model collapse, lihat contohnya dibawah ini!

No	Nama Broker	Minimal Deposit	Keterangan
1	Agea	1 USD	Bank Lokal
2	FBS	1 USD	Bank Lokal
3	OctaFx	5 USD	Bank Lokal
4	NatureFx	20 USD	Bank Lokal

Kode HTML & kode CSSnya table yang bordernya model collapse seperti di atas adalah sebagai berikut :

         <table align="center" width="415" border="1" style="border-collapse: collapse;">
    <tr>
    <th width="15">No</th>
    <th width="100">Nama Broker</th>
    <th width="150">Minimal Deposit</th>
    <th width="150">Keterangan</th>
    </tr>
    <tr>
    <td>1</td>
    <td>Agea</td>
    <td>1 USD</td>
    <td>Bank Lokal</td>
    </tr>
    <tr>
    <td>2</td>
    <td>FBS</td>
    <td>1 USD</td>
    <td>Bank Lokal</td>
    </tr>
    <tr>
    <td>3</td>
    <td>OctaFx</td>
    <td>5 USD</td>
    <td>Bank Lokal</td>
    </tr>
    <tr>
    <td>4</td>
    <td>NatureFx</td>
    <td>20 USD</td>
    <td>Bank Lokal</td>
    </tr>
    </table>

Kode CSS border collapse dari kode html table di atas adalah yang ini: style="border-collapse: collapse;"

Cara membuat table yang tampilannya lain yaitu berbeda dengan tampilan table di atas.

No	Nama Broker	Minimal Deposit	Keterangan
1	Agea	1 USD	Bank Lokal
2	FBS	1 USD	Bank Lokal
3	OctaFx	5 USD	Bank Lokal
4	NatureFx	20 USD	Bank Lokal

Kode html table tersebut adalah sbb :

<table align="center" border="0" style="width: 450px;">

<tr> 

<td bgcolor="green">No</td> 

<td bgcolor="green">Nama Broker</td> 

<td bgcolor="green">Minimal Deposit</td> 

<td bgcolor="green">Keterangan</td> 

</tr>

<tr> <td bgcolor="#ffff99">1</td> 

<td bgcolor="#ffff99">Agea</td> 

<td bgcolor="#ffff99">1 USD</td> 

<td bgcolor="#ffff99">Bank Lokal</td> 

</tr>

<tr> <td bgcolor="#ffff99">2</td> 

<td bgcolor="#ffff99">FBS</td> 

<td bgcolor="#ffff99">1 USD</td> 

<td bgcolor="#ffff99">Bank Lokal</td> 

</tr>

<tr> <td bgcolor="#ffff99">3</td> 

<td bgcolor="#ffff99">OctaFx</td> 

<td bgcolor="#ffff99">5 USD</td> 

<td bgcolor="#ffff99">Bank Lokal</td> 

</tr>

<tr> <td bgcolor="#ffff99">4</td> 

<td bgcolor="#ffff99">NatureFx</td> 

<td bgcolor="#ffff99">20 USD</td> 

<td bgcolor="#ffff99">Bank Lokal</td> 

</tr>

</table>

Keterangan : bgcolor adalah untuk mengganti warna latar belakang kolom table.

Sekarang kalau sobat sudah tahu bagaimana penulisan script atau kode HTMLnya, silahkan sobat mengetikkan sendiri script HTML tabel lainnya dengan mengganti angka-angka yang berwarna merah dan kata-kata yang berwarna biru dengan angka-angka dan kata-kata kreasi sobat sendiri, jika script atau kode HTML tabel sobat sudah jadi, tahap selanjutnya adalah memasukkan atau menyisipkan script atau kode HTML sobat tersebut didalam artikel atau postingan blog sobat.

Prosesnya menyisipkan kode HTML tabel ke postingan blog sama seperti membuat artikel baru, hanya saja waktu mengetikkan script atau kode HTML untuk tabel tersebut, sobat harus mengganti format penulisan new entri artikel sobat dari model format "compose" ke model format "HTML", kalau sudah klik "Pratinjau" dulu baru kemudian klik "Simpan".

Kode HTML dan CSS untuk membuat table dengan border (garis tepi) nya adalah berupa garis putus - putus (dashed) :

<table width="50%" height="81" border="0" align="center" cellpadding="5" cellspacing="5" bordercolor="#CCCCCC" bgcolor="#E6F4F9" style="border-style:dashed; border-width:1.5pt;  padding-left: 5.4pt; padding-right: 5.4pt; padding-top: 0cm; padding-bottom: 0cm">
<tr>
<td height="67">Cara membuat table dipostingan blog. Cara membuat tabel dipostingan blog. CSS untuk membuat table. CSS untuk membuat tabel. Kode HTML untuk membuat table. Kode HTML untuk membuat table.
</td>
</tr>
</table>

Hasil table nya adalah nampak seperti ini!

Cara membuat table dipostingan blog. Cara membuat tabel dipostingan blog. CSS untuk membuat table. CSS untuk membuat tabel. Kode HTML untuk membuat table. Kode HTML untuk membuat table.

Itulah share dari kami mengenai cara membuat tabel/ table di dalam postingan blog, semoga share kami di atas dapat bermanfaat untuk Anda.