CARA MEMBUAT TABEL PADA POSTINGAN BLOG

Unknown

Selasa, 01 Maret 2016

Bagikan :

Tweet

Ass WrWb

Apa khabar sobat semua, tentunya sehat semua khan?

kali ini saya akan memberikan sedikit tutorial mengenai bagaimana caranya  membuat tabel pada postingan blog. Pada case-case tertentu sobat semua akan membutuhkan tabel, sebagai contoh nya sobat akan membuat tampilan gambar dengan tulisan disebelah kiri dan kanan pada gambar tersebut. sebagai contohnya adalah sebagaimana postingan yang sudah saya terapkan pada blog saya yang lain. perhatikan contoh tabel dibawah ini dimulai dari tabel dengan 1 row.

Langkahnya adalah seperti dibawah ini

1. Loggin ke Account blog sobat

2. Lihat ke halaman Entry

3. Klick Entry Baru.

4. Pilih HTML bukan Compose

Langkah selanjutnya kita akan membuat tabel dengan 1 Row dan 1 Coloumb caranya sebagai berikut: Silahkan Sobat Copy Code dibawah ini dan Paste pada HTML postingan sobat.

<table width="500" border="1">
<tr>
<td>Tabel 1 </td>
</tr>
</table>

Maka Hasilnya adalah Seperti dibawah ini.

Tabel 1

Selanjutnya  kita akan membuat Tabel Dengan 2 Coloumb 1 Row , caranya adalah sobat tinggal menambahkan <td> Tabel 2 </td> Persis dibawah <td> Tabel 1 </td> Code lengkapnya adalah sebagai berikut ;

<table width="500" border="1">
<tr>
<td>Tabel 1 </td>
<td>Tabel 2 </td>
</tr>
</table>

Dan Sobat akan mendapatkan hasil Tabel Sebagai berikut:

Tabel 1

Tabel 2

Untuk Coloumb Ke 3, ke 4, ke 5 dan seterusnya sobat tinggal menambahkan item tersebut dibawah nya.

Setelah sobat tahu bagaimana cara membuat Tabel dengan 1 Coloumb dan 1 Row, 2 Coloumb dan 1 Row


Sekarang kita akan membuat tabel dengan 1 Coloumb  dan 2 Row kemudian kita tambahkan lagi 3 Row, 4 Row dst.
langkahnya adalah sebagai berikut

Copy code dibawah ini dan pastekan pada HTML Sobat

<table width="500" border="1">
<tr>
<td>Tabel 1 A </td>
</tr>
<tr>
<td>Tabel 2 A </td>
</tr>
</table>

Code tersebut diatas akan menghasilkan Tabel dengan 2 Row

Tabel 1 A

Tabel 2 A

Untuk membuat tabel dengan 2 Coloumb dan 2 Row

Untuk menambahkan 2 coloumb sobat tinggal menambahkan  Code <td> diikuti dengan tulisan sobat dan ditutup dengan </td>, Code lengkapnya <td> Tabel 1 B </td> letakkan dibawah Code <td> Tabel 1 A </td>

Untuk menambahkan 2 Row sobat tinggal menambahkan  Code <td> diikuti dengan tulisan sobat dan ditutup dengan </td>, Code lengkapnya <td> Tabel 2 B </td> letakkan dibawah Code <td> Tabel 2 A </td> Sehingga sobat akan menghasilkan Code dengan 2 Row dan 2 Coloumb, lengkapnya sebagai berikut :

<table width="500" border="1">
<tr>
<td>Tabel 1 A </td>
<td>Tabel 1 B </td>
</tr>
<tr>
<td>Tabel 2 A </td>
<td>Tabel 2 B </td>
</tr>
</table>

Dari Code diatas sobat akan menghasilkan tabel sebagai berikut :

Tabel 1 A	Tabel 1 B
Tabel 2 A	Tabel 2 B

Nah sekarang sobat sudah punya tabel dengan 1 Coloumb, 1 Row ; 2 Coloumb 1 Row; 2 Row dan 1 Coloumb; 2 Coloumb 2 Row. 
Untuk menambahkan banyak coloumb dan row, sobat tinggal ikutin  langkah-langkah diatas

Untuk mengatur lebar tabel Sobat tinggal merubah angka pada code<table width="500" border="1">

Sesuai dengan  lebar template  blog sobat, misalnya sobat rubah menjadi  700Px, 600Px, 400Px, dan sebagainya.

Pada kasus-kasus tertentu code tabel diatas tidak sesuai dengan yang sobat inginkan, ini dikarenakan masing-masing blog mempunyai template yang berbeda. Dari kasus diatas sebagaimana yang sudah penah terjadi pada blog saya, solusinya adalah terdapat pada CSS nya aja. 

Silahkan Sobat Copas Code dibawah ini pada CSS sobat, dan Sobat bisa mengganti sesuai dengan selera,  misal Untuk Tulisan ditengah tabel, sobat gunakan Center, untuk sebelah kiri, sobat gunakan left, dan kanan right. Silahkan sobat Modifikasi sendiri untuk Margin, Border dll

th, td {margin:0;padding: 6px; border:1px solid #fff; text-align:center;}

  

Untuk menambahkan CSS tersebut diatas Caranya adalah :

Masuk ke Blog Sobat >>Click Template>>Sesuaikan>>Tingkat Lanjut>>Tambahkan  CSS.

Lihat Gambar dibawah ini:

Cara membuat tabel dengan Menggunakan Merge Cell 

Diatas adalah tabel dengan tampilan yang  sederhana, setelah sobat paham dengan pembuatan tabel tersebut maka dibawah ini saya akan jelaskan bagaimana membuat tampilan tabel dengan Merge Cell. Yang perlu diperhatikan dalam membuat tabel adalah hanya dengan menggunakan code HTML tag <table>; <tr> dan <td>

Selanjutnya langsung saja kita akan membuat Merge Cell, disini code yang akan kita gunakan adalah Colspan dan Rowspan.  Perhatikan contoh tabel dibawah ini,  dengan  4Coloumb dan 4Row, dan sobat akan menempatkan JUDUL diatas tabel tersebut, Caranya adalah sbb:

Silahkan Sobat buat Tabel terlebih dahulu dengan 4Coloumb dan 4 Row, atau jika sobat masih kurang jelas silahkan Copas code dibawah ini

<table width="200" border="1">
<tr>
<td>Tabel 1 A </td>
<td>Tabel 1 B </td>
<td>Tabel 1 C </td>
<td>Tabel 1 D </td>
</tr>
<tr>
<td>Tabel 2 A </td>
<td>Tabel 2 B </td>
<td>Tabel 2 C </td>
<td>Tabel 2 D </td>
</tr>
<tr>
<td>Tabel 3 A </td>
<td>Tabel 3 B </td>
<td>Tabel 3 C </td>
<td>Tabel 3 D </td>
</tr>
<tr>
<td>Tabel 4 A </td>
<td>Tabel 4 B </td>
<td>Tabel 4 C </td>
<td>Tabel 4 D </td>
</tr>
<T/table>

Code diatas akan menghasilkan tabel seperti dibawah ini:

Tabel 1 A	Tabel 1 B	Tabel 1 C	Tabel 1 D
Tabel 2 A	Tabel 2 B	Tabel 2 C	Tabel 2 D
Tabel 3 A	Tabel 3 B	Tabel 3 C	Tabel 3 D
Tabel 4 A	Tabel 4 B	Tabel 4 C	Tabel 4 D

Sekarang kita akan menempat kan Judul pada tabel  diatas pada Row paling atas (1A,1B,1C,1D),  maka sobat tinggal mengganti <td>Tabel 1A</td>; <td>Tabel 1B</td>; <td>Tabel 1C</td>; <td>Tabel 1D> dengan <td colspan="4"> JUDUL </td> sobat akan mendapatkan code sbb:


<table width="200" border="1">
<tr>
<td colspan="4">JUDUL </td>
</tr>
<tr>
<td>Tabel 2 A </td>
<td>Tabel 2 B </td>
<td>Tabel 2 C </td>
<td>Tabel 2 D </td>
</tr>
<tr>
<td>Tabel 3 A </td>
<td>Tabel 3 B </td>
<td>Tabel 3 C </td>
<td>Tabel 3 D </td>
</tr>
<tr>
<td>Tabel 4 A </td>
<td>Tabel 4 B </td>
<td>Tabel 4 C </td>
<td>Tabel 4 D </td>
</tr>
<T/table>

Code tersebut diatas akan menghasilkan tabel sbb:

JUDUL
Tabel 2 A	Tabel 2 B	Tabel 2 C	Tabel 2 D
Tabel 3 A	Tabel 3 B	Tabel 3 C	Tabel 3 D
Tabel 4 A	Tabel 4 B	Tabel 4 C	Tabel 4 D

Demikian Artikel dari saya, semoga bisa bermanfaat buat kalian semua, salam succes selalu WSSWRWB

Tag : Tutorial