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 :
- 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 - 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 - 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 disini isi tabel disini - 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 disini isi tabel disini - 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 Biru.<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 disini isi tabel disini isi tabel disini isi tabel disini - Untuk menambah kolom anda tinggal menambahkan kode ini :
<td>isi tabel</td>pada kode yang sama disebelah kanan atau kiri
Contoh ( perhatikan berwarna Biru )<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 disini isi tabel disini isi tabel disini isi tabel disini isi tabel disini isi tabel disini - 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.
0 komentar:
Posting Komentar