Membuat Tabel Di Blogspot

Cara Membuat Tabel Di Blog Blogger

Untuk membuat tabel di blogger kita hanya perlu beberapa kode html saja, yang nantinya akan kita gunakan dalam pembuatan tabel, berikut kode-kode html tersebut:

<table> dan </table>
<tr> dan </tr>
<td> dan </td>  

Beneran cuma itu saja kode yang di perlukan untuk membuat tabel?...

YA... cukup dengan 3 atau 6 kode tersebut saja kita bisa membuat tabel. tapi ada sedikit kode tambahan sih...

Mari kita mulai praktek. Silahkan sambil di fahami ya, soalnya kalau terlalu detail nanti artikelnya kepanjangan.

·                     Membuat Tabel 2 Coloum kesamping dan 1 coloum kebawah, maka kita cukup menuliskan kode html berikut:

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

Dan Hasilnya akan terlihat seperti ini:

Coloum 1

Coloum 2

Jika ingin merubahnya menjadi 3 coloum kesamping dan 1 coloum kebawah anda cukup menambahkan kode <td>Coloum Tambahan atau Coloum 3</td> saja sebelum kode </table> dan hasilnya akan terlihat seperti ini :

Coloum 1

Coloum 2

Coloum 3

·                     Membuat Tabel 2 Coloum kesamping dan 2 coloum kebawah, maka kita cukup menuliskan kode html berikut:

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

Hasilnya Seperti ini:

Coloum 1 A	Coloum 1 B
Coloum 2 A	Coloum 2 B

Jika ingin merubahnya menjadi 3 coloum kesamping dan 2 coloum kebawah anda cukup menambahkan kode <td>Coloum Tambahan 1 atau 2 </td> di antara <tr> dan </tr> pertama dan kedua

Contoh:

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

Maka hasilya seperti ini :

Coloum 1 A	Coloum 2 A	Coloum Tambahan 1
Coloum 1 B	Coloum 2 B	Coloum Tambahan 2

·                     Membuat Tabel 3 Coloum kesamping dan 3 coloum kebawah. jika ingin membuat tabel 3 coloum kesamping dan kebawah maka anda cukup menambahkan kode ini sebelum kode </table>

<tr>
<td>Coloum 3 A </td>
<td>Coloum 3 B </td>
<td>Coloum 3 C </td>
</tr>

Hasil kode htmlnya akan seperti ini :

<table width="500" border="1">
<tr>
<td>Coloum 1 A </td>
<td>Coloum 1 B </td>
<td>Coloum 1 C </td>
</tr>
<tr>
<td>Coloum 2 A </td>
<td>Coloum 2 B </td>
<td>Coloum 2 C </td>
</tr>
<tr>
<td>Coloum 3 A </td>
<td>Coloum 3 B </td>
<td>Coloum 3 C </td>
</tr>
</table>

Dan hasil tabelnya akan terlihat seperti ini :

Coloum 1 A	Coloum 1 B	Coloum 1 C
Coloum 2 A	Coloum 2 B	Coloum 2 C
Coloum 3 A	Coloum 3 B	Coloum 3 C

Keterangan :

·                     Pada tulisan yang saya tulis coloum 1, coloum 1A, coloum 2, dst adalah tempat untuk memasukkan tulisan, link, atau gambar anda. Silahkan ganti sesuai keperluan. 

·                     Sedangkan kode ini.

<table width="500" border="1">

·                     Kode yang saya beri warna biru "500" adalah lebar tabel tersebut, anda bisa merubahnya menjadi 700px, 400px, dsb. Jika anda ingin membuat tabel selebar 700px maka anda cukup menulisnya 700 saja.