Cara Membuat Tabel dalam Postingan Blog

Cara Membuat Tabel dalam Postingan Blogger - Dulu saya pernah posting Cara Membuat Tabel di Blog Menggunakan Google Dokumen atau Google Docs, sekarang saya mau share cara membuat tabel di dalam postingan blog menggunakan kode html.

Berikut adalah beberapa kode html intinya yang nantinya digunakan untuk membuat tabel dalam postingan blog:

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

Berikut prakteknya:
1. Membuat Tabel 2 Kolom kesamping dan 1 kolom kebawah, maka kita cukup menuliskan kode html sebagai berikut:

<table width="460" border="1">
<tr>
<td>Kolom 1 </td> <td>Kolom 2 </td>
</tr>
</table>

Hasilnya seperti ini:

Kolom 1

Kolom 2

Jika anda ingin merubahnya menjadi 3 kolom kesamping dan 1 kolom kebawah, anda cukup menambahkan kode Kolom Tambahan atau Kolom 3 saja sebelum kode dan hasilnya akan terlihat seperti ini:

Kolom 1

Kolom 2

Kolom 3

2. Membuat Tabel 2 kolom kesamping dan 2 kolom kebawah, maka kita cukup menuliskan kode html sebagai berikut:

<table width="460" border="1">
<tr>
<td>Kolom 1 A </td> <td>Kolom 1 B </td>
</tr>
<tr>
<td>Kolom 2 A </td> <td>Kolom 2 B </td>
</tr>
</table>

Hasilnya seperti ini:

Kolom 1 A	Kolom 1 B
Kolom 2 A	Kolom 2 B

Jika anda ingin merubahnya menjadi 3 kolom kesamping dan 2 kolom kebawah anda cukup menambahkan kode Kolom Tambahan 1 atau 2 di antara
dan

pertama dan kedua. Seperti dibawah ini:

<table width="460" border="1">
<tr>
<td>Kolom 1 A</td> <td>Kolom 2 A</td> <td>Kolom Tambahan 1</td>
</tr>
<tr>
<td>Kolom 1 B</td> <td>Kolom 2 B</td> <td>Kolom Tambahan 2</td>
</tr>
</table>

Hasilnya seperti ini:

Kolom 1 A	Kolom 2 A	Kolom Tambahan 1
Kolom 1 B	Kolom 2 B	Kolom Tambahan 2

3. Membuat Tabel 3 kolom kesamping dan 3 kolom kebawah. Anda cukup menambahkan kode dibawah ini sebelum kode

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

Contoh:

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

Hasilnya seperti ini:

Kolom 1 A	Kolom 1 B	Kolom 1 C
Kolom 2 A	Kolom 2 B	Kolom 2 C
Kolom 3 A	Kolom 3 B	Kolom 3 C

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

2. Sedangkan untuk kode ini:
<table width="460" border="1">

Angka "460" adalah lebar tabel tersebut, anda bisa merubahnya menjadi berapa saja tergantungkeinginan anda misalnya 700px, 400px, dsb. Jika anda ingin membuat tabel selebar 700px maka anda cukup menulisnya 700 saja.

3. Jika setelah kode tersebut anda pasang dan hasilnya tidak sama dengan contoh tabel seperti di blog ini, itu permasalahannya cuma di CSS nya saja, karena setiap template beda dan tidak semua template blogger ada CSS untuk tabel.

Solusinya yaitu dengan menambahkan kode CSS sendiri di template blog anda, anda bisa memakai kode CSS ini:

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

Sumber: http://blogtutorials-01.blogspot.com/

5

Anda baru saja selesai membaca artikel di EpulJapanese Blog yang berjudul: Cara Membuat Tabel dalam Postingan Blog

dengan URL: http://epuljapaneseblog.blogspot.com/2013/04/cara-membuat-tabel-dalam-postingan-blog.html

Apabila anda menyukai artikel ini atau merasa bermanfaat silahkan bagikan artikel ini di Facebook, Google+ dan Twitter anda dengan meng-klik tombol-tombol Share yang ada diatas postingan ini.

Dapatkan artikel EpulJapanese Blog terbaru langsung ke email anda. Silahkan masukkan alamat email anda:

Related Post