Cara Membuat Table Untuk Halaman Posting Artikel


Tabel membuat tabel di halaman postingan blog terkadang menjadi hal yang membosankan ! Atau malah terkadang menjadi Hal yang meropotkan dan terasa rumit. Keperluan adanya table tidak mendominan terlalu penting dan tidaknya.

Kenapa mesti menggunakan tabel  ?. 
Ya tidak hanya di blogger saja di Ms Word pun untuk membuat suatau halaman yang tersusun rapi harus menggunakan tabel, dan itu juga tidak harus menampilkan body tabel.

Tabel berfungsi untuk membuat daftar-daftar, dan juga untuk memisahkan bagian dan keterangan atau bagian tulisan dengan gambar., yang jelas agar tampilan lebih rapi.

Bagi anda yang mungkin rada malas utak-utik tag atau script untuk membuat tabel secara Online, Memang sih kalu kita membuat tabel secara Offline di Ms Word atau Exel itu cenderung lebih cepat dan mudah, apalagi dengan di tambahan penghias, warna background atau huruf yang warna warni dan yang lainnya, semua sudah tersedia pada opsi toolbar word/exel sehingga kita tidak perlu melotot i  kode script html untuk membuat tabel.

Perlu kita kita ketahui juga hal tersebut memang mudah, tapi jika suatu saat kita akan menambahkan sisi artikel dalam tabel atau menambahkan jumlah colom atau baris tabel kita malah akan semakin rumit, kenapa ?

Karena, kode script hasil kopas dari Word dan Exel itu lebih rumit dan lebih banyak ketimbang kita bikin tabel dengan edit html. Masti kita lihat perbedaan nya :

1. Perbedaan kode script :


Tabel Edit HTML :

CONTOH TABEL DARI EDIT HTML
Isi tabel sisi kiri Isi tabel sisi kanan

Berikut adalah kode script utuk table diatas :
<table border="1" style="border-color: red; width: 100%;"> 
 <tbody> 
 <tr> 
 <th colspan="2" width="100%">
CONTOH TABEL DARI EDIT HTML</th>
</tr>
<tr>
<td width="50%">Isi tabel sisi kiri</td>
<td width="50%">Isi tabel sisi kanan</td></tr>
</tbody></table>.

Tabel Copas dari MS Word :

TABEL DI BUAT DARI WORD
Isi tabel sisi kiri
Isi tabel sisi kanan

Berikut adalah kode script utuk table diatas :
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid"
style="border-collapse: collapse; border: none; mso-border-alt: solid windowtext 1.0pt; mso-border-insideh: 1.0pt solid windowtext; mso-border-insidev: 1.0pt solid windowtext; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;"> <tbody><tr style="mso-yfti-firstrow: yes; mso-yfti-irow: 0;">
<td colspan="2" style="border: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; width: 467.5pt;" valign="top" width="623">
<p align="center" class="MsoNormal" style="line-height: normal; margin-bottom: 0in; text-align: center;">TABEL DI BUAT DARI WORD<o:p></o:p></p>
</td>
</tr>
<tr style="mso-yfti-irow: 1; mso-yfti-lastrow: yes;">
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; width: 233.75pt;" valign="top" width="312">
<p class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">Sisi Sebelah
Kiri<o:p></o:p></p>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-left-alt: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; width: 233.75pt;" valign="top" width="312">
<p class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">Sisi Sebelah Kanan<o:p></o:p></p>
</td>
</tr>
</tbody></table>

Perbedaan yang sangat menakjubkan bentuk scriptnya yah............


Sekrang udah Kita tau kan perbedaannya, Kode tersebut dalam kondisi tabel masih kosong dan polos, belum adanya muatan isi tabel, gambar artikel.
Posisi text berada, warna, backgound, jenis font, style nya itu juga akan menambah dari banyaknya kode script tabel akan semakin banyak dan rumit.

Dengan tabel masih kosong, jumlah baris dan kolomnya dua, sudah kaya begitu, bagaimna dengan jumlan klom dan row yang banyak dan bervariasi, iya kalou kita cukup sekli kopas pasang bentuk tabel tersebut, tapi bagai mana nanti kita kan updete untuk next kapan tau nanti.

Terus terang saja untuk msalah kode script HTML saya sendiri juga masih kurang paham, saya juga masih belajar pengenalan nama-nama kode script dan juga fungsi-fungsinya, Apabila !!! ada kalimat atau kata-kata saya yang kurang passss dalam menyebutkannya,.. ya saya ,ohon maaf.

Yang masih sama-sama belajar ngeblog ya silahkan buka halaman berikut di bawah, kalau yang sudah pinter ya.. mohon di maklumi aja,.. namanya juga baru belajar !

2. Kode Script Dasar Tabel.


Sebenarya kode  script  DASAR membuat tabel adalah :

KODE SCRIPT
KETERANGAN
<tbody><table>
</tbody></table>
Ini adalah kode script untuk membuat body Tabel
<tr>  isi text </tr> Kode untuk membuat baris
    <td> isi text </td> Kode untuk membuat kolom
<th> Judul </th> Kemudian ini adalah untuk membuat baris kolom paling atas atau kepala tabel

Script Tambahn dan pendukung :

KODE SCRIPT
KETERANGAN
border="1" Untuk membuat Boder, angka 1 menunjukan ketebalan boder
style="border-color: red; Untuk memberi warna boder tabel berwarna merah
span style="color: green;" Untuk mmberi warna text, hijau
style="background-color: #6fa8dc Untuk menentukan warna background, #6fa8dc bisa di ganti dengan, dengan nama warna, red, green, blue, black dll.
style="width: 100%;"
atau
width="100%;"
Tag untuk menentukan lebar dari body tabel,  dan juga kolom tabel, biasanya di isi denga satuan px, hanya saja lebih akurat dengan nilai %,
karena kalau dengan nilai px kita harus tau persis berapa px nilai lebar halaman pos kita.
height="30px" Nilai 30, untuk menentukan nilai tinggi baris
align="center" Untuk menentukan posisi text, center, right atau lift.
rowspan="2" Untuk menyatukan dua baris menjadi satu, nilai 2 dirubah sesuai kebutuhan kita.
colspan="2" Untuk menyatukan dua kolom menjadi satu, nilai 2 dirubah sesuai kebutuhan kita.
cellpadding="3" Untuk menentukan jarak text terhadap body text 
cellspacing="3" Untuk menentukan jarak body text terhadap body tabel


3. Contoh Menambahkan baris dan kolom tabel.


1. Menambahkan jumlah baris/row.
KEPALA TABEL
Tabel kiri baris 1 Tabel kanan baris 1
Tabel kiri baris 2 Tabel kanan baris 2
Tabel kiri baris 3 Tabel kanan baris 3

Kodenya Seperti di bawah :
<table border="1" style="width: 100%;">
<tbody>
<tr>
        <th colspan="2" width="100%">KEPALA TABEL</th></tr>
<tr>
        <td width="50%">Tabel kiri baris 1</td>
        <td width="50%">Tabel kanan baris 1</td></tr>
<tr>
        <td>Tabel kiri baris 2</td>
        <td>Tabel kanan baris 2</td></tr>
<tr>
        <td>Tabel kiri baris 3</td>
        <td>Tabel kanan baris 3</td></tr>
</tbody></table>

2. Menambahkan jumlah Kolom.
KEPALA TABEL
Kol. 1 Baris 1 Kol. 2 Baris 1 Kol. 3 Baris 1 Kol. 4 Baris 1
Kol. 1 Baris 2 Kol. 2 Baris 2 Kol. 3 Baris 2 Kol. 4 Baris 2
Kol. 1 Baris 3 Kol. 2 Baris 3 Kol. 3 Baris 3 Kol. 4 Baris 3

Kodenya Seperti di bawah :


<table border="1" style="width: 100%;">
<tbody>
<tr>
        <th colspan="4" width="100%">KEPALA TABEL</th></tr>
<tr>
        <td width="25%">Kol. 1 Baris 1</td>
        <td width="25%">Kol. 2 Baris 1</td>
        <td width="25%">Kol. 3 Baris 1</td>
        <td width="25%">Kol. 4 Baris 1</td></tr>
<tr>
        <td>Kol. 1 Baris 2</td>
        <td>Kol. 2 Baris 2</td>
        <td>Kol. 3 Baris 2</td>
        <td>Kol. 4 Baris 2</td></tr>
<tr>
        <td>Kol. 1 Baris 3</td>
        <td>Kol. 2 Baris 3</td>
        <td>Kol. 3 Baris 3</td>
        <td>Kol. 4 Baris 3</td></tr>
</tbody></table>

Keterangan:
  1. Tag <tr>  </tr>  menentukan jumlah nya kolom, sementara <td> </td> didalam  <tr> ......... </tr>  menentukan jumlahnya baris.
  2. <td width="50%">  atau <td width="25%"> menentukan lebarnya kolom dalam hitungan persentase dari lebar 100% halaman post.
  3. <th colspan="4" menggabukan 4 kolom jadi satu, <th colspan="2" menggabukan 2 kolom jadi satu untuk kepala tabel.
Kode script tabel tidak termasuk warna text pada tabel, warna hanya untuk menjelaskan kode script terhadap posisi kodenya pada tabel.

4. Membuat Variasi Tabel.

3. Contoh memberi warna dan menggabukan baris dan kolom
BELAJAR MEMBUAT TABEL UNTUK BLOG
No.
TABEL KIRI
TABEL KANAN
01. TABEL KIRI BARIS 1 TABEL KANAN BARIS 1 dan 2
02. TABEL KIRI BARIS 2
03. TABEL KIRI BARIS 3.a TABEL KANAN BARIS 3.1
TABEL KIRI BARIS 3.b TABEL KANAN BARIS 3.2
TABEL KIRI BARIS 3.c TABEL KANAN BARIS 3.3
04.
05. TABEL KIRI BARIS 5 & 6 TABEL KANAN BARIS 6
06. TABEL KIRI BARIS 6

Kode script nya :
<table border="1" cellpadding="5" style="border-color: red; width: 100%;">
<tbody>
<tr>
        <th colspan="3" height="30px" style="background-color: #6fa8dc;" width="100%"><div style="text-align: justify;">
<div style="text-align: center;">
<span style="color: lime;">BELAJAR MEMBUAT TABEL UNTUK BLOG</span></div>
</div>
</th></tr>
<tr>
        <th height="25px" width="10%"><div style="text-align: center;">
<span style="color: red;">No.</span></div>
</th>
        <th width="45%"><div style="text-align: center;">
<span style="color: magenta;">TABEL KIRI</span></div>
</th>
        <th width="45%"><div style="text-align: center;">
<div style="text-align: center;">
<span style="color: yellow;">TABEL KANAN</span></div>
</div></th></tr>
<tr>
        <td align="center" height="20px">01.</td>
        <td>TABEL KIRI BARIS 1</td>
        <td rowspan="2">TABEL KANAN BARIS 1dan 2</td></tr>
<tr>
        <td align="center">02.</td>
        <td>TABEL KIRI BARIS 2</td></tr>
<tr>
        <td align="center" height="20px" rowspan="3">03.</td>
        <td>TABEL KIRI BARIS 3.a</td>
        <td>TABEL KANAN BARIS 3.1</td></tr>
<tr>

        <td height="20px">TABEL KIRI BARIS 3.b</td>
        <td>TABEL KANAN BARIS 3.2</td></tr>
<tr>

        <td>TABEL KIRI BARIS 3.c</td>
        <td>TABEL KANAN BARIS 3.3</td></tr>
<tr>
        <td align="center" height="50px">04.</td>
        <td colspan="2"><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUFMxd8qFr2ueR6lgsms2QovWcT_u-P4FfCTDnar4OnlynfZDFeZQhcp9SCtClOSDHcDsZvm1y86B_gUurgpkJDiioNqIowfJ0rT96IP6jN7faA7QZYwUVUQhDRhJ-aXRMImaPirYILfo/s1600/GO.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="71" data-original-width="680" height="41" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUFMxd8qFr2ueR6lgsms2QovWcT_u-P4FfCTDnar4OnlynfZDFeZQhcp9SCtClOSDHcDsZvm1y86B_gUurgpkJDiioNqIowfJ0rT96IP6jN7faA7QZYwUVUQhDRhJ-aXRMImaPirYILfo/s400/GO.png" width="400" /></a></div></td></tr>
<tr>
        <td align="center" height="20px">05.</td>
        <td rowspan="2" style="background-color: #93c47d;"><span style="color: blue;">TABEL KIRI BARIS 5 &amp; 6</span></td>
        <td><i>TABEL KANAN BARIS 6</i></td></tr>
<tr>
        <td align="center" height="20px">06.</td>
        <td><i>TABEL KIRI BARIS 6</i></td></tr>
</tbody></table>

Keterangan : 
Untuk Kode script nya saya rasa saya engga perlu jelasin lagi yah, kita sama sama belajar.