HTML : Table Cases on HTML Template

Pernah diperlihatkan 2 blog dengan template yang sama secara hampir berbarengan dengan kondisi yang berantakan? belum? wah edittag jelas lebih beruntung bila begitu :D. Pagi ini jelas pemandangan yang di luar kebiasaan. Dua blog dengan dua pemilik yang berbeda. Kebetulankah? anggap saja begitu. Namun pertanyaan lebih meruncing ke kondisi blognya yang berantakan.

Salah satu blog memunculkan shoutbox milik Oggix yang merangsak begitu saja posisinya hingga bertengger bukan di kolom sidebar maupun di kolom utama. Yang lainnya hampit serupa, namun nasibnya jauh lebih baik dari yang pertama. Hanya saja setiap kali pemiliknya memindahkan fitur online-albumnya di tengah-tengah kolom sidebar yang muncul justru berada di kolom teratas di bagian sidebar.

Untuk mendapatkan kejelasan mengenai kondisi ini, edittag mendapatkan salinan dari masing-masing blog yang bermasalah tadi. Lalu ketahuanlah biang penyebab semua ini. Yakni penggunaan table yang masih kental oleh salah satu penyedia template blogger terkemuka. Penggunaan tabel di saat-saat sekarang mungkin lebih pantas untuk ditanya dengan realita saat ini. Mestinya penggunaan CSS jauh lebih moderat dan menguntungkan dari sisi pemeliharaan. Tak perlu direpotkan dengan penulisan kode-kode seperti tr dan td berulang kali. Boros baris (kesan umum yang ditangkap para tukang HTML). Penggunaan table juga membutuhkan ketelitian yang lebih, apalagi bagi mereka yang masih minim pengetahuan dasar HTML. Biasanya mereka yang tak kuat dengan HTML dasar menyerahkan urusan edit table dengan editor HTML untuk membantu pekerjaanya. Tentu harus ada program yang harus diinstal terlebih dulu. Masih terhitung merepotkan.

Bagaimana bila yang sudah terlanjur menggunakan pemakaian table di templatenya. Sarannya tetap dan akan selalu : berhati-hati dan selalu siapkan cadangan sebelum mengedit file templatenya. Masih terlalu umum? ok, ada baiknya praktek salah satu kesalahan yang sering ditemukan. Menyoal ke permasalan di atas dimana penempatan online-albumnya tak tunduk pada keinginan pemiliknya.

Padahal menurut pengakuan pengeditnya, kode yang dipasang sudah mengikuti urutan sesuai yang diinginkan. Namun ada hal yang terlupa dan berimbas sangat jelas. Yakni kealpaanya menulis kode <td> dan penutupnya </td>. Untuk itu ada tips untuk memasukan kode HTML dalam tabel.

1. Bila memasukan kode di bagian yang sudah mengusung tabel didalamnya (misalnya kode dari penyedia shoutbox), selalu ketikan tag pembuka(<>) dan penutupnya (</>) diawal, lalu selipkan kode yang ingin kita masukan. Ini untuk menghindari kealpaan menutup tag.
2. Ikuti alur pemasangan tag <tr> dan <td> pada kolom yang akan kita edit. Bila templatenya menggunakan dua kolom pada satu baris, salin kedua kolom pada baris tersebut lalu kita masukan kodenya mengikuti alur yang digunakan sebelumnya.
3. Pastikan tak ada kode yang masih dibiarkan terbuka. Misalnya </a> hanya ditulis </a.
4. Gunakan spasi untuk mengurutkan baris <tr> dengan baris </tr> dibawahnya. Hingga nantinya akan lebih mudah mengontrol tag <td> diantaranya.
5. Pastikan jumlah <tr> sama denan jumlah </tr>,dan <td> dengan </td>.

Selamat mencoba.

Hasil penangkapan Google :
– Berada di urutan ke3 dengan kata kunci “table template HTML” di Google Israel pada 10 Juli 2007.
Add to Technorati Favorites

6 pemikiran pada “HTML : Table Cases on HTML Template

  1. pro iko…sebelumnya sudah diniatkan menampilkan gambar tangkapan layar, hanya karena pertimbangan teknis yakni ukuran gambar sidebar yang terlalu memanjang, akhirnya gambar ditiadakan ..:D

    pro ati…pindah ke bagian mana? di tengahnya maish di sidebar atau di kolom utama? bisa lebih diperjelas?

    Suka

  2. h1 dan h2 akan berimbas pada ukuran teks yang diapit oleh kodenya.Semakin besar angka dibelakang huruf H akan semakin kecil ukurannya.

    Suka

  3. beberapa hari lalu, saya nyoba ngotak-ngatik new-blogger layout dan sempet nyoba pake table, ternyata script berikut malah bikin error…

    <td>
    // xml script di sini…
    </td>

    XML jadi nggak valid, karena ternyata tag penutupnya dianggap tidak ada, padahal hal tersebut tidak kejadian ketika pake div. Sebuah cara untuk ‘menghilang’kan penggunaan table kah? 😀

    Suka

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s