Cari Artikel Blog Ini

Total Tayangan Laman

CARA PENGATURAN TABEL

Postingan ini merupakan kelanjutan dari Postingan Cara Membuat Tabel. Sengaja dipisahkan, agar anda belajar secara bertahap sehingga hasil yang anda peroleh, diharapkan dapat memuaskan anda. Mungkin perlu juga anda ketahui, bahwa kode tabel dapat anda terapkan pada postingan atau bagian blog linnya.
Fokus pengaturan tabel terletak pada bagian <table border="1" align="left"> serta pada bagian ini <tr> dan <td>.
Dari kode diatas dapat kita lihat bahwa tabel tersebut memiliki border/ketebalan garis 1px dan tabel itu diletakan pada bagian kiri dari postingan. Sedangkan pada bagian baris dan kolom belum ada pengaturan.
Beberapa pengaturan tambahan dapat kita masukkan kedalam tabel, diantaranya :
  1. Width : untuk pengaturan lebar dari tabel . Anda dapat mengisi width tersebut disesuaikan dengan keinginan anda. Jika width tidak dicantumkan, lebar tabel akan mengikuti dari banyaknya kata dalam tabel tersebut secara otomatis.
    Contoh kode tabel yang tidak memakai width :


    <table border="1" align="left"><tbody><tr><td>isi tabel disini</td></tr></table>


    Tabel akan terlihat seperti ini :

    isi tabel disini


    Contoh kode tabel yang memakai width :

    <table width="200" border="1" align="left"><tbody><tr><td>isi tabel disini</td></tr></table>

    Tabel akan terlihat seperti ini :

    isi tabel disini



  2. Border : untuk mengatur penampilan garis tabel. Anda dapat menggunakan border sesuai keperluan anda. Border tersebut juga bisa dihilangkan dengan mencantumkan border="0" atau menebalkan border misalnya border="4"

    Contoh kode tabel tanpa pengaturan width dan dipasang border pada ukuran 4px
    <table border="4" align="left"><tbody><tr><td>isi tabel disini</td></tr></table>

    Tabel terlihat seperti ini :

    isi tabel disini


  3. Align : merupakan pengaturan letak tabel jika ditambahkan pada bagian <> dan jika diletakan pada kode <td>maka fungsinya sebagai pengatur letak tulisan pada sel. Align dapat kita isi dengan left, right, center dan justify.

    Contoh kode yang ditambahkan kode align :

    <table width="200" border="1" align="center"><tbody><tr><td align="center">isi tabel disini</td><td align="left">isi tabel disini</td></tr></table>


    Tabel akan kelihatan seperti ini :

    isi tabel disiniisi tabel disini



  4. Bgcolor : merupakan pengaturan warna tabel. Anda dapat memvarisiasikan warna tersebut pada tabel yang anda buat.

    Contoh kode tabel yang telah ditambah kode warna :

    <table width="400" border="1" bgcolor="black" align="center"><tbody><tr bgcolor="yellow"><td align="center">isi tabel disini</td><td align="left">isi tabel disini</td></tr></table>

    Pengaturan diatas : Tabel terdiri dari satu baris dua kolom dengan lebar 400 px(masing-masing kolom 200px), border 1px dengan warna garis hitam, letak tabel ditengah, Warna baris kuning, sel pertama letak huruf ditengah dan sel kedua letak huruf dikiri

    Tabel akan terlihat seperti ini :

    isi tabel disiniisi tabel disini


  5. Untuk menambah baris (row), anda tinggal menambahkan kode dibawah seperti ini :

    </tr><tr bgcolor="green"><td align="center">isi tabel disini</td><td align="left">isi tabel disini</td></tr> yang diletakkan setelah kode ini :</td></tr>

    Contoh : perhatikan yang berwarna kuning.

    <table width="400" border="1" align="center"><tbody><tr bgcolor="yellow"><td align="center">isi tabel disini</td><td align="left">isi tabel disini</td></tr><tr bgcolor="green"><td align="center">isi tabel disini</td><td align="left">isi tabel disini</td></tr></table>

    Jadinya akan seperti ini:

    isi tabel disiniisi tabel disini
    isi tabel disiniisi tabel disini


  6. Untuk menambah kolom anda tinggal menambahkan kode ini;<td>isi tabel</td> pada kode yang sama disebelah kanan atau kiri
    Contoh(perhatikan berwarna kuning)

    <table width="400" border="1" bgcolor="black" align="center"><tbody><tr bgcolor="yellow"><td align="center">isi tabel disini</td><td align="left">isi tabel disini</td><td align="left">isi tabel disini</td></tr><tr bgcolor="green"><td align="center">isi tabel disini</td><td align="left">isi tabel disini</td><td align="left">isi tabel disini</td></tr></table>

    Jadinya akan seperti ini :

    isi tabel disiniisi tabel disiniisi tabel disini
    isi tabel disiniisi tabel disiniisi tabel disini


  7. Selamat mencoba...!!!
    Jika anda belum memahami uraian diatas coba anda copy contoh-contoh dari postingan ini dan paste pada postingan anda. Baru anda lakukan pengeditan sesuai keperluan anda.



Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
3 Comments

3 komentar :

www.katobengke.com mengatakan...

trus nyara simpan kepostinggannya gimana apakah langsung atau mengedit HTML juga

Seti@wan Dirgant@Ra mengatakan...

Aku coba dulu yah,... makasih.

FmA7x mengatakan...

Thanx.......Berguna banget nih.

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!