Ada anggapan bahwa halaman blogspot tidak bisa menampilkan tabel agar rata di atas halaman, tetapi tabel yang dibuat akan selalu turun hingga ke bawah. Bagi banyak orang yang belum tahu trik membuat tabel agar rata di atas mensiasatinya dengan terlebih dulu membuat tabel di windows, yakni microsoft word dan microsoft excel, lalu kemudian memprint kedalam bentuk foto, dan menghosting foto kembali ke halaman blog. Jadi tabel akhirnya menjadi foto tabel. Cara ini dalam beberapa hal memang lebih praktis. Masalahnya adalah: kita tidak bisa mengedit kolom-kolom tabel itu lagi di kemudian hari jika ada perkembangan data yang mengharuskan data tabel untuk di edit lagi. Jika data mesti di edit, cukup menyita waktu untuk membuat tabel yang baru dan melakukan proses dari awalnya lagi.
Untuk mengatasi hal ini dan membuat tampilan tabel sesuai dengan tempat yang diinginkan paling tidak ada dua hal.
Pertama.
Untuk tabel yang berukuran kecil, tutorial WIDYA SCHOOL'S sudah cukup baik. Thanks Widya School..
Perhatikan contoh di bawah ini :
Misalkan ini batas Tulisan Anda
Kodenya:
<center><table></table><table width="190" border="2"><tbody><tr>
<td style="text-align: center; font-weight: bold; color: rgb(51, 102, 255);">Column 1</td> <td style="text-align: center; color: rgb(51, 102, 255); font-weight: bold;">Column 2</td>
</tr><tr>
<td style="text-align: center; color: rgb(255, 0, 0); font-weight: bold;">Row 1</td> <td style="text-align: center; font-weight: bold; color: rgb(255, 0, 0);">Row 2</td>
</tr></tbody></table></center>
Jarak postingan dengan tabel akan tampak jarak yang cukup jauh meski sudah diantisipasi dengan cara merapatkan tulisan. Berikut ini caranya.
Batas Tulisan Anda:
Kodenya:
<center><table></table><table width="190" border="2"><tbody>&<tr><td style="text-align: center; font-weight: bold; color: rgb(51, 102, 255);">Column </td><td style="text-align: center; color: rgb(51, 102, 255); font-weight: bold;">Column </td></tr>>tr><td style="text-align: center; color: rgb(255, 0, 0); font-weight: bold;">Row 1</td> <td style="text-align: center; font-weight: bold; color: rgb(255, 0, 0);">Row 2</td></tr></tbody></table></center>
Keterangan:
<center><table></table><table width="190" border="2"><tbody><tr> ( Tidak boleh ada jarak)
<td style="text-align: center; font-weight: bold; color: rgb(51, 102, 255);">Column </td> <td style="text-align: center; color: rgb(51, 102, 255); font-weight: bold;">Column </td>( Tidak boleh ada jarak)
</tr><tr>( Tidak boleh ada jarak)
<td style="text-align: center; color: rgb(255, 0, 0); font-weight: bold;">Row 1</td> <td style="text-align: center; font-weight: bold; color: rgb(255, 0, 0);">Row 2</td>
</tr></tbody></table></center>
Cara ini cukup ampuh untuk tabel berukuran kecil, tapi tidak untuk tabel yang berukuran besar seperti contoh tabel warna berikut ini:Tabel Warna Hexadecimal. Cara di atas tidak berlaku untuk membuat tabel agar naik keposisi yang diinginkan. Cara ini tidak mampu membuat tabel naik.
Yang menyebabkan tabel selalu turun adalah karena halaman blogspot secara default selalu membaca kode [enter] dan spasi menjadi <br/>. Jika seseorang mengklik [enter] dua kali, maka blogspot akan membacanya <br/><br/>. Kode <br/> memang tidak akan tampak dalam halaman entri post, dan halaman edit post, tetapi akan tampak jelas sekali dalam browser. Lebih jelasnya bisa dicoba dengan mengirimkan tulisan blog ke email, dan temukan kode sourcenya mesti banyak kode <br/>. Jika tabel anda tidak bisa naik, artinya banyak kode <br/> didalam tabel anda!
Untuk itu diperlukan cara berikut ini.
Cara Kedua: Mematikan format <br/> pada halaman blog.
Sesudah Login ke Blogspot secara biasa masuk >> Elemen halaman blog anda:
Sesudah itu klik Pengaturan, seperti yang dicoret warna merah gambar diatas.
Sesudah itu akan ditemukan tampilan Pengaturan lalu >> pilih >> Format.
Lalu turun ke bawah dan ganti Konversi Ganti Baris dari ya ke tidak.
Selesai.
Jika format halaman blog sudah tidak menggunakan <br/> maka akibatnya blogspot tidak membaca spasi dan [enter] menjadi <br/>, jadi untuk menulis paragraf baru atau alinea baru kita harus menggunakan cara yang umum yaitu <p> diawal paragraf dan <p> di akhir alinea. Atau menggunakan <br/> untuk garis baru, dan <br/><br/> untuk alinea baru.
Untuk mempercantik blog, lihat juga cara membuat Navbar Drop Down Menu Di sini
Untuk mengatasi hal ini dan membuat tampilan tabel sesuai dengan tempat yang diinginkan paling tidak ada dua hal.
Pertama.
Untuk tabel yang berukuran kecil, tutorial WIDYA SCHOOL'S sudah cukup baik. Thanks Widya School..
Perhatikan contoh di bawah ini :
Misalkan ini batas Tulisan Anda
| Column 1 | Column 2 |
| Row 1 | Row 2 |
Kodenya:
<center><table></table><table width="190" border="2"><tbody><tr>
<td style="text-align: center; font-weight: bold; color: rgb(51, 102, 255);">Column 1</td> <td style="text-align: center; color: rgb(51, 102, 255); font-weight: bold;">Column 2</td>
</tr><tr>
<td style="text-align: center; color: rgb(255, 0, 0); font-weight: bold;">Row 1</td> <td style="text-align: center; font-weight: bold; color: rgb(255, 0, 0);">Row 2</td>
</tr></tbody></table></center>
Jarak postingan dengan tabel akan tampak jarak yang cukup jauh meski sudah diantisipasi dengan cara merapatkan tulisan. Berikut ini caranya.
Batas Tulisan Anda:
| Column 1 | Column 2 |
| Row 1 | Row 2 |
Kodenya:
<center><table></table><table width="190" border="2"><tbody>&<tr><td style="text-align: center; font-weight: bold; color: rgb(51, 102, 255);">Column </td><td style="text-align: center; color: rgb(51, 102, 255); font-weight: bold;">Column </td></tr>>tr><td style="text-align: center; color: rgb(255, 0, 0); font-weight: bold;">Row 1</td> <td style="text-align: center; font-weight: bold; color: rgb(255, 0, 0);">Row 2</td></tr></tbody></table></center>
Keterangan:
<center><table></table><table width="190" border="2"><tbody><tr> ( Tidak boleh ada jarak)
<td style="text-align: center; font-weight: bold; color: rgb(51, 102, 255);">Column </td> <td style="text-align: center; color: rgb(51, 102, 255); font-weight: bold;">Column </td>( Tidak boleh ada jarak)
</tr><tr>( Tidak boleh ada jarak)
<td style="text-align: center; color: rgb(255, 0, 0); font-weight: bold;">Row 1</td> <td style="text-align: center; font-weight: bold; color: rgb(255, 0, 0);">Row 2</td>
</tr></tbody></table></center>
Cara ini cukup ampuh untuk tabel berukuran kecil, tapi tidak untuk tabel yang berukuran besar seperti contoh tabel warna berikut ini:Tabel Warna Hexadecimal. Cara di atas tidak berlaku untuk membuat tabel agar naik keposisi yang diinginkan. Cara ini tidak mampu membuat tabel naik.
Yang menyebabkan tabel selalu turun adalah karena halaman blogspot secara default selalu membaca kode [enter] dan spasi menjadi <br/>. Jika seseorang mengklik [enter] dua kali, maka blogspot akan membacanya <br/><br/>. Kode <br/> memang tidak akan tampak dalam halaman entri post, dan halaman edit post, tetapi akan tampak jelas sekali dalam browser. Lebih jelasnya bisa dicoba dengan mengirimkan tulisan blog ke email, dan temukan kode sourcenya mesti banyak kode <br/>. Jika tabel anda tidak bisa naik, artinya banyak kode <br/> didalam tabel anda!
Untuk itu diperlukan cara berikut ini.
Cara Kedua: Mematikan format <br/> pada halaman blog.
Sesudah Login ke Blogspot secara biasa masuk >> Elemen halaman blog anda:
Sesudah itu klik Pengaturan, seperti yang dicoret warna merah gambar diatas.
Sesudah itu akan ditemukan tampilan Pengaturan lalu >> pilih >> Format.
Lalu turun ke bawah dan ganti Konversi Ganti Baris dari ya ke tidak.
Selesai.
Jika format halaman blog sudah tidak menggunakan <br/> maka akibatnya blogspot tidak membaca spasi dan [enter] menjadi <br/>, jadi untuk menulis paragraf baru atau alinea baru kita harus menggunakan cara yang umum yaitu <p> diawal paragraf dan <p> di akhir alinea. Atau menggunakan <br/> untuk garis baru, dan <br/><br/> untuk alinea baru.
Untuk mempercantik blog, lihat juga cara membuat Navbar Drop Down Menu Di sini
