Cara Membuat Tabel Dalam Blog. Sebenarnya sudah banyak rekan blogger yang membahas tema tersebut atau bahkan boleh katakan tema seperti ini sudah basi, namun perkenankan Tips dan Trik Blog untuk tetap “nekad” mempostingnya, siapa tahu masih bermanfaat terutama bagi rekan-rekan blogger pendatang baru.. Yang membutuhkan, silakan untuk membaca tipsnya berikut ini.

Tabel dapat untuk menampilkan data berupa teks, angka-angka, gambar, atau link menjadi tersusun dan tertata rapi sehingga akan memudahkan para pembaca untuk memahaminya. Tabel ini dapat ditempatkan di mana saja dalam blog, di side bar, di footer, atau di dalam postingan.

TABEL DASAR

Format dasar table adalah seperti ini.

<table border=”1″>
1. Agus

2. Imam

3. Iwan

4. Dinda

Keterangan

  • Setiap pembuatan table harus dimulai dengan tag
    dan diakhiri dengan tag
  • Border digunakan untuk menentukan ketebalan border (garis) yang dapat diubah sesuai kebutuhan, semakin besar nilainya maka bordernya akan semakin tebal, jika mengisikan dengan angka nol maka akan menjadi tabel yang tidak bergaris (berborder).
  • Setiap baris harus diawali dengan tag
  • dan diakhiri dengan tag
  • Tag
  • Dari contoh di atas hasilnya akan menjadi seperti di bawah ini.

    (table data) digunakan untuk mengisikan data pada setiap cell dan harus ditutup dengan tag
    1. Agus
    2. Imam
    3. Iwan
    4. Dinda

    ATRIBUT CELLPADDING DAN CELLSPACING

    Cellpadding digunakan untuk menentukan jarak (spasi kosong) antara data (contents) dengan garis (border) yang mengelilinya dinyatakan dengan satuan pixel, semakin besar nilainya maka jaraknya semakin lebar.

    Cellspacing digunakan untuk pengaturan jarak antara masing-masing cell, semakin besar nilainya maka semakin lebar jaraknya.

    Contoh aplikasi cellpadding, seperti di bawah ini.

    <table border="1" cellpadding=”10″>
    1. Agus

    2. Imam

    3. Iwan

    4. Dinda

    Hasilnya akan menjadi seperti di bawah ini, di mana jarak (spasi) antara content (data) dengan border lebih lebar.

    1. Agus
    2. Imam
    3. Iwan
    4. Dinda

    Contoh aplikasi Cellspacing, seperti di bawah ini.

    <table border="1" cellspacing=”5″>
    1. Agus

    2. Imam

    3. Iwan

    4. Dinda

    Hasilnya seperti di bawah ini, di mana jarak masing-masing cell lebih lebar dibandingkan dengan table standar.

    1. Agus
    2. Imam
    3. Iwan
    4. Dinda

    TABEL DENGAN HEADER

    Untuk membuat table dengan header (judul baris), kita harus menggunakan tag dan diakhiri dengan . Dengan tag tersebut teksnya ditampilkan dengan cetakan tebal (bold) sehingga akan membedakan dengan teks data yang lainnya.

    Contoh aplikasi Tabel Dengan Header seperti di bawah ini.

    No. Nama Teman
    1. Agus
    2. Imam
    3. Iwan
    4. Dinda

    Hasilnya seperti di bawah ini.

    No. Nama Teman
    1. Agus
    2. Imam
    3. Iwan
    4. Dinda

    PENGATURAN LEBAR & TINGGI TABEL

    Untuk melakukan pengaturan lebar table digunakan atribut width yang memiliki nilai dengan satuan pixel atau presentase dari lebar browser/induk tabelnya. Selain untuk melakukan pengaturan lebar table, witdh juga dapat digunakan dengan menentukan lebar tiap-tiap kolom.
    Untuk melakukan pengaturan tinggi table digunakan atribut height yang memiliki nilai dengan satuan pixel atau presentase dari induk tabelnya. Selain untuk melakukan pengaturan tinggi table, height juga dapat digunakan dengan menentukan tinggi baris.

    Contoh aplikasi untuk menentukan lebar dan tinggi table adalah seperti di bawah ini.

    <table border="1" cellpadding="5" cellspacing="1" width=”200″ height=”150″>
    No. Nama Teman

    1. Agus

    2. Imam

    3. Iwan

    4. Dinda

    Hasilnya seperti di bawah ini.

    No. Nama Teman
    1. Agus
    2. Imam
    3. Iwan
    4. Dinda

    Contoh aplikasi untuk pengaturan lebar dan tinggi baris kolom adalah seperti di bawah ini.

    <tr height=”10”><th witdh=”45″>No.

    <th width=”155″> Nama Teman

    1. Agus
    2. Imam
    3. Iwan
    4. Dinda

    Hasilnya seperti di bawah ini.

    No. Nama Teman
    1. Agus
    2. Imam
    3. Iwan
    4. Dinda

    DATA CELL KOSONG

    Ada beberapa browser yang tidak dapat menampilkan table dengan baik dengan beberapa data kosong. Untuk itu, kita gunakan   untuk menggantikan cell dengan data yang kosong.

    Aplikasinya seperti di bawah ini.

    1. Agus
    2.  
    3. Iwan
    4. Dinda

    Hasilnya seperti di bawah ini.

    1. Agus
    2.
    3. Iwan
    4. Dinda

    MENGHILANGKAN SPASI

    Mungkin kita akan mendapati table dengan tampilan ada spasi sehingga table terlihat tidak rapi dan acak-acakan, contohnya seperti screenshot di bawah ini.


    Solusinya adalah menghilangkan line break antar baris sehingga menjadi seperti di bawah ini. Caranya, klik mode “Edit HTML” kemudian rapatkan semua kode html tersebut sehingga seperti di bawah ini.

    No. Nama Teman
    1. Agus
    2. Imam
    3. Iwan
    4. Dinda

    Sebenarnya postingan tentang pembuatan table ini masih banyak yang harus kita bahas namun karena sudah capek mengetiknya, maka kita akan lanjutkan di postingan selanjutnya.

    Terima kasih!!

    Bersambung,…ke Pembuatan Tabel Bagian Kedua

    Baca juga yang ini.

    Pembuatan Tabel Bagian Pertama

    Pembuatan Tabel Bagian Kedua
    Pembuatan Tabel Bagian Ketiga
    Pembuatan Tabel Bagian Keempat