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:
Table dengan tampilan bordernya model collapse, lihat contohnya dibawah 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>
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.
Kode html table tersebut adalah sbb :
Keterangan : bgcolor adalah untuk mengganti warna latar belakang kolom table.
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!
Itulah share dari kami mengenai cara membuat tabel/ table di dalam postingan blog, semoga share kami di atas dapat bermanfaat untuk Anda.
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.
0 comments:
Posting Komentar