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:

Oentoe_09 – Orange | View Demo
Oentoe_09 – Blue  | View Demo