Cara Membuat Tabel Dalam Postingan Blog

Cara membuat tabel dalam postingan blog lengkap dua tiga empat kolom gadget widget kotak table pada halaman post atau sidebar header maupun footer, baik menggunakan kode html maupun menggunakan aplikasi. Perhatikan caranya dibawah ini.

Bagi yang ingin menggunakan kode html atau Css 2 kolom atau 3 kolom, perhatikan langkah - langkah nya dibawah ini

1. Tabel 1 kolom

satu kolom

Kode untuk 1 kolom diatas dibawah ini

<table border="1" style="width:"auto">
<tr>
<td>satu kolom</td>
</tr>
</table>

Atau contoh tabel 1 kolom 2 baris liat dibawah ini:

satu baris kolom

satu baris kolom

Kode untuk tabel diatas:

<table border="1" style="width:"auto">
<tr>
<td>satu baris kolom</td>
</tr>
<tr>
<td>satu baris kolom</td>
</tr>
</table>

2. Tabel 3 kolom

Contoh tabel 3 kolom

Contoh 3 kolom pada halaman postingan
Kolom Satu	Kolom Dua	Kolom Tiga
Kolom Empat	Kolom Lima	Kolom Enam
Kolom Tujuh	kolom Delapan	Kolom Sembilan
Kolom Sepuluh	Kolom Sebelas	Kolom Dua Belas
Kolom Tiga Belas	Kolom Empat Belas	Kolom Lima Belas

Kode html untuk 3 kolom

<table border="1" bordercolor="#26D8C5" style="background-color:white" width="400" cellpadding="2" cellspacing="2" cellspacing="2">
<tr>
    <th colspan="3">Contoh 3 kolom pada halaman postingan</th>
    </tr>
<tr>
        <td>Kolom Satu</td>
        <td>Kolom Dua</td>
        <td>Kolom Tiga</td>
    </tr>
<tr>
        <td>Kolom Empat</td>
        <td>Kolom Lima</td>
        <td>Kolom Enam</td>
    </tr>
<tr>
        <td>Kolom Tujuh</td>
        <td>kolom Delapan</td>
        <td>Kolom Sembilan</td>
    </tr>
<tr>
        <td>Kolom Sepuluh</td>
        <td>Kolom Sebelas</td>
        <td>Kolom Dua Belas</td>
    </tr>
<tr>
        <td>Kolom Tiga Belas</td>
        <td>Kolom Empat Belas</td>
        <td>Kolom Lima Belas</td>
    </tr>
</table>

Keterangan:

• Width adalah kode untuk mengatur lebar seluruh tabel
• Tag penutup <th colspan="3"> dan tag penutup </th> yaitu kode untuk memergel atau menyatukan 3 (tiga) kolom dari contoh tabel diatas
• Tag pembuka <td> dan dan tag penutup </td> yakni kode untuk membuat baris tabel
• Tag pembuka <tr> dan tag penutup </tr> dalah pemisah baris tabel
• Cellspasing adalah jarak antara kolom
• Cellpadding adalah jarak didalam kolom
• Colspan adalah menyesuaikan jumlah kolom

3. Tabel 2 kolom

Contoh tabel 2 kolom

http://gustilubis.blogspot.com	Contoh Tabel
http://gustilubis.blogspot.com	Contoh Tabel

Kode untuk 2 kolom

<table width="400" border="1" bordercolor="#26D8C5" style="background-color:white">
<tr>
<td align="center">
http://gustilubis.blogspot.com
</td>
<td align="center">
Contoh Tabel
</td>
</tr>
<tr>
<td align="center">
http://gustilubis.blogspot.com
</td>
<td align="center">
Contoh Tabel
</td>
</tr>
</table>

Atau contoh yang lain

dua baris kolom	dua baris kolom
dua baris kolom	dua baris kolom

Kode untuk tabel diatas:

<table border="1" style="width:"auto">
<tr>
<td>dua baris kolom</td>
<td>dua baris kolom</td>
</tr>
<tr>
<td>dua baris kolom</td>
<td>dua baris kolom</td>
</tr>
</table>

Atau contoh yang lain untuk 2 kolom

http://gustilubis.blogspot.com

http://gustilubis.blogspot.com

Kode untuk 2 kolom diatas dibawah ini:

<table border="1" style="width:"auto">
<tr>
<td>dua kolom</td>
<td>dua kolom</td>
</tr>
</table>

Keterangan:

• Width adalah kode untuk mengatur lebar seluruh tabel
• Tag pembuka <td> dan dan tag penutup </td> yakni kode untuk membuat baris tabel
• Tag pembuka <tr> dan tag penutup </tr> dalah pemisah baris tabel

4. Tabel 5 kolom

contoh tabel 5 kolom

Table
cell colspan 1	cell colspan 2	cell colspan 3	cell colspan 4	cell colspan 5

Kode untuk tabel diatas:

<table border="1" bgcolor=""  cellpadding="5" cellspacing="5" style="width:"auto"gt;>
<tr>
<td align="center" colspan="5"> Table </td></tr>
<tr>
<td align="left" bgcolor=""> cell colspan 1 </td>
<td align="left" bgcolor=""> cell colspan 2 </td>
<td align="left" bgcolor=""> cell colspan 3 </td>
<td align="left" bgcolor=""> cell colspan 4 </td>
<td align="left" bgcolor=""> cell colspan 5 </td>
<tr/>
</table>

5. Contoh tabel untuk keperluan yang lain nya misal: galeri photo penjualan online atau yang lain, liat contohnya dibawah ini:

Nama Tim:	Julukan:
Stadion:	Pelatih:
keterangan:	Owner:

Kode untuk tabel diatas:

<table bgcolor="#00FF66" border="1" cellpadding="5" cellspacing="5" style="width: 400;">
<tr>
<td align="center" bgcolor="#FFCCFF" colspan="5"><img alt="Gallery" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKXTAXn0pB6IBjIOq_5n2CUXTMaL_ASP-3R68s22zboSn4ZyMALM_sG-McFFTd8CoL-xXiD61GdB64WQD0Q3wkgM7jUWCvJMEEYdlm5x4xOZjnOiCdbLy7PlGFjNM0zni0SA6Cu4sx-jsS/s1600/Chelsea_FC.svg.png" width="200" /></td></tr>
<tr>
<td align="left" bgcolor="">Nama Tim:</td>
<td align="left" bgcolor="">Julukan:</td>
</tr>
<tr>
<td align="left" bgcolor="">Stadion:</td>
<td align="left" bgcolor="">Pelatih:</td>
</tr>
<tr>
<td align="left" bgcolor="">keterangan:</td>
<td align="left" bgcolor="FFFF00">Owner:</td>
</tr>
<tr>
</tr>
</table>

Note: teks warna merah adalah alamat url gambar, silahkan ganti dengan alamat url yang ingin anda tampilkan

6. Buat kode html untuk membuat tabel melalui aplikasi atau software silahkan kunjungi alamat http://tableizer.journalistopia.com/ liat gambar dibawah , caranya sebagai berikut:

-Buat terlebih dahulu tabel artikel anda di ms.word atau excel

-Block / tandai tabel yang sudah selesai dan copy

-kemudian pergi ke alamat  http://tableizer.journalistopia.com/

-Paste kan tabel yang anda block tadi

-Edit ukuran font dan size sesuai selera anda

-Setelah selesai liat kode preview nya dan klik 'tableize it'

-Kemudian muncul kode html tabel tersebut, copy kodenya lalu paste kan ke halaman posting blog anda di menu Html

-Ingat paste kan di menu Html, Jika ingin membuat teks nya ke menu Compose di laman posting artikel anda

-Selesai

Terima kasih sudah berkunjung ke blog saya, mudah - mudahan anda tidak menemui kesulitan dalam memahami artikel tentang Cara Membuat Tabel Dalam Postingan Blog

Salam

gusti oi..oi

Admin