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://subektimuhamad.blogspot.com/	Contoh Tabel
http://subektimuhamad.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

dua kolom

dua kolom

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/AVvXsEgNJLGHbfNENERReMBiXHf6teJYTWGe_4qb5w3GQqtK1G3Xz7POI52Vs66FbcWkc78RJAR3Z5pYg3CcWyudbFOpNzlWYRVOm0pkwKuuTSUUCHKxVxz5Jan__3bSLypPcHlbcFYnNCduMZJf/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