mau dapat artikel terbaru blog ini? silahkan ikuti update blog ini

buat Tabel dalam posting artikel di blogspot.


No

URAIAN

JUMLAH

KET.

1

Uraian 1

Rp 1.000.000

-

2

Uraian 2

Rp 500.000

-

3

TOTAL

Rp 1.500.000

-

Untuk membuat sebuah table sederhana seperti contoh diatas untuk dimasukkan ke dalam posting artikel memang tidak disediakan secara langsung oleh pihak blogger.com but dengan menggunakan HTML kita bisa membuat sebuah table sederhana, seperti contoh diatas.
Sebelum membuat table yang harus diperhatikan adalah berapa jumlah kolom dan baris yang akan kita buat, lebar/width dari halaman body post blog pada blog anda.
Jika ingin membuat Tabel Seperti contoh diatas maka saya membuat sebuah catatan pada file notepad seperti dibawah ini:
kolom: 4
baris: 4
width: maksimal 400px, berhubung lebar main body post pada blog ini tidak lebih dari 500px.
Sehingga data masing-masing lebar kolom adalah sebagai berikut:
Kolom No (nomor): 20px
Kolom URAIAN: 160px
Kolom JUMLAH: 140px
Kolom KET. (Keterangan): 60px
Tebal garis (border): .5px solid
Padding: 1px
Setelah data sudah dicatat dengan lengkap masuk ke akun blogger anda dan jangan lupa untuk memilih mode HTML (bukan mode compose) dalam membuat posting ini, setelah itu copy kode dibawah ini dan lakukan perubahan sesuai dengan kebutuhan Anda, btw keterangan kode HTML bisa dilihat pada Keterangan dibawah kode ini:
<TABLE STYLE=
"BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; BORDER-COLLAPSE: collapse; mso-border-alt: solid windowtext .5pt; mso-yfti-tbllook: 480; mso-padding-alt: 0cm 1px 0cm 1px; mso-border-insideh: .5pt solid windowtext; mso-border-insidev: .5pt solid windowtext"
CELLSPACING="0" CELLPADDING="0" BORDER="1">
<TBODY>

<TR STYLE="mso-yfti-irow: 0; mso-yfti-firstrow: yes">
<TD STYLE=
"BORDER-RIGHT: windowtext .5px solid; PADDING-RIGHT: 1px; BORDER-TOP: windowtext .5px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 0cm; BORDER-LEFT: windowtext .5px solid; WIDTH: 20px; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext .5px solid; mso-border-alt: solid windowtext .5pt"
VALIGN="top" WIDTH="35">
<p align="center"><STRONG>No</STRONG></P>
</TD>
<TD STYLE=
"BORDER-RIGHT: windowtext .5px solid; PADDING-RIGHT: 1px; BORDER-TOP: windowtext .5px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 0cm; BORDER-LEFT: medium none; WIDTH: 160px; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext .5px solid; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt"
VALIGN="top" WIDTH="216">
<p align="center"><STRONG>URAIAN</STRONG></P>
</TD>
<TD STYLE=
"BORDER-RIGHT: windowtext .5px solid; PADDING-RIGHT: 1px; BORDER-TOP: windowtext .5px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 0cm; BORDER-LEFT: medium none; WIDTH: 140px; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext .5px solid; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt"
VALIGN="top" WIDTH="168">
<p align="center"><STRONG>JUMLAH</STRONG></P>
</TD>
<TD STYLE=
"BORDER-RIGHT: windowtext .5px solid; PADDING-RIGHT: 1px; BORDER-TOP: windowtext .5px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 0cm; BORDER-LEFT: medium none; WIDTH: 60px; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext .5px solid; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt"
VALIGN="top" WIDTH="108">
<p align="center"><STRONG>KET.</STRONG></P>
</TD>
</TR>

<TR STYLE="mso-yfti-irow: 1">
<TD STYLE=
"BORDER-RIGHT: windowtext .5px solid; PADDING-RIGHT: 1px; BORDER-TOP: medium none; PADDING-LEFT: 1px; PADDING-BOTTOM: 0cm; BORDER-LEFT: windowtext .5px solid; WIDTH: 20px; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext .5px solid; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt"
VALIGN="top" WIDTH="35">
<P>1</P>
</TD>
<TD STYLE=
"BORDER-RIGHT: windowtext .5px solid; PADDING-RIGHT: 1px; BORDER-TOP: medium none; PADDING-LEFT: 1px; PADDING-BOTTOM: 0cm; BORDER-LEFT: medium none; WIDTH: 160px; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext .5px solid; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt"
VALIGN="top" WIDTH="216">
<P>Uraian 1</P>
</TD>
<TD STYLE=
"BORDER-RIGHT: windowtext .5px solid; PADDING-RIGHT: 1px; BORDER-TOP: medium none; PADDING-LEFT: 1px; PADDING-BOTTOM: 0cm; BORDER-LEFT: medium none; WIDTH: 140px; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext .5px solid; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt"
VALIGN="top" WIDTH="168">
<P>Rp 1.000.000</P>
</TD>
<TD STYLE=
"BORDER-RIGHT: windowtext .5px solid; PADDING-RIGHT: 1px; BORDER-TOP: medium none; PADDING-LEFT: 1px; PADDING-BOTTOM: 0cm; BORDER-LEFT: medium none; WIDTH: 60px; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext .5px solid; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt"
VALIGN="top" WIDTH="108">
<p align="center"> - </P>
</TD>
</TR>
<TR STYLE="mso-yfti-irow: 2">
<TD STYLE=
"BORDER-RIGHT: windowtext .5px solid; PADDING-RIGHT: 1px; BORDER-TOP: medium none; PADDING-LEFT: 1px; PADDING-BOTTOM: 0cm; BORDER-LEFT: windowtext .5px solid; WIDTH: 20px; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext .5px solid; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt"
VALIGN="top" WIDTH="35">
<P>2</P>
</TD>
<TD STYLE=
"BORDER-RIGHT: windowtext .5px solid; PADDING-RIGHT: 1px; BORDER-TOP: medium none; PADDING-LEFT: 1px; PADDING-BOTTOM: 0cm; BORDER-LEFT: medium none; WIDTH: 160px; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext .5px solid; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt"
VALIGN="top" WIDTH="216">
<P>Uraian 2</P>
</TD>
<TD STYLE=
"BORDER-RIGHT: windowtext .5px solid; PADDING-RIGHT: 1px; BORDER-TOP: medium none; PADDING-LEFT: 1px; PADDING-BOTTOM: 0cm; BORDER-LEFT: medium none; WIDTH: 140px; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext .5px solid; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt"
VALIGN="top" WIDTH="168">
<P>Rp 500.000</P>
</TD>
<TD STYLE=
"BORDER-RIGHT: windowtext .5px solid; PADDING-RIGHT: 1px; BORDER-TOP: medium none; PADDING-LEFT: 1px; PADDING-BOTTOM: 0cm; BORDER-LEFT: medium none; WIDTH: 60px; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext .5px solid; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt"
VALIGN="top" WIDTH="108">
<p align="center"> - </P>
</TD>
</TR>
<TR STYLE="mso-yfti-irow: 3; mso-yfti-lastrow: yes">
<TD STYLE=
"BORDER-RIGHT: windowtext .5px solid; PADDING-RIGHT: 1px; BORDER-TOP: medium none; PADDING-LEFT: 1px; PADDING-BOTTOM: 0cm; BORDER-LEFT: windowtext .5px solid; WIDTH: 20px; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext .5px solid; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt"
VALIGN="top" WIDTH="35">
<P>3</P>
</TD>
<TD STYLE=
"BORDER-RIGHT: windowtext .5px solid; PADDING-RIGHT: 1px; BORDER-TOP: medium none; PADDING-LEFT: 1px; PADDING-BOTTOM: 0cm; BORDER-LEFT: medium none; WIDTH: 160px; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext .5px solid; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt"
VALIGN="top" WIDTH="216">
<P><STRONG>TOTAL</STRONG></P>
</TD>
<TD STYLE=
"BORDER-RIGHT: windowtext .5px solid; PADDING-RIGHT: 1px; BORDER-TOP: medium none; PADDING-LEFT: 1px; PADDING-BOTTOM: 0cm; BORDER-LEFT: medium none; WIDTH: 140px; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext .5px solid; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt"
VALIGN="top" WIDTH="168">
<P><STRONG>Rp 1.500.000</STRONG></P>
</TD>
<TD STYLE=
"BORDER-RIGHT: windowtext .5px solid; PADDING-RIGHT: 1px; BORDER-TOP: medium none; PADDING-LEFT: 1px; PADDING-BOTTOM: 0cm; BORDER-LEFT: medium none; WIDTH: 60px; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext .5px solid; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt"
VALIGN="top" WIDTH="108">
<p align="center"> - </P>
</TD>
</TR>
</TBODY>
</TABLE>
Keterangan kode diatas:
  • Kode berwarna hitam jangan anda ubah biarkan saja seperti apa adanya.
  • Kode berwarna merah, biru, oranye, dan hijau adalah adalah kode untuk baris pertama, kedua ketiga dan keempat yaitu diantara tag <TR></TR>, jika ingin menambahkan baris tabel copy paste semua kode <TR></TR>, dan letakkan tepat diatas kode </TBODY>.
  • Kode untuk masing=masing kolom berada pada tag <TD></TD>. Jika ingin menambahkan kolom tabel copy kode di tag <TD></TD>. Kemudian paste tepat diatas semua tag </TR>.
  • Kode yang berwarna hitam tebal diatas adalah kata/kalimat atau angka didalam kolom.
Semoga cara diatas bisa membantu dalam membuat tabel di dalam artikel blog anda.


Download Template Gratis :
Buat rekan-rekan yang suka nyoba template gratisan atau sekedar menambah koleksi template blogspot buat dishare lewat Ziddu anda boleh ngetes template hasil iseng-iseng saya di Ziddu.com yaitu:

2 komentar:

Anonim mengatakan...

mas terima kasih atas bantuang mas saya mulai belajar apa yang mas posting.

mas senior saya mohon bisakah mas ajari saya step by step tentang paypal kebaikan dan keburukannya...di tunggu e-mailnya di baguscrz@yahoo.co.id

terima kasih

bunga raya mengatakan...

wah makasih neh pelajarannya berharga bngt

Posting Komentar

Label

Blog support

Entri Populer