Setelah mempelajari Tutorial HTML terusan 14 sekarang kita akanlanjutkan ke Tutorial HTML terusan 15.
Jika sebelumnya anda telah mempelajari pembahasan tentang atribut border untuk tabel, maka jika diperhatikan, web browser sebenarnya tidak hanya menampilkan border, namun juga garis pembatas di antara sel tersebut, seperti tampilan dibawah ini:
HTML menyediakan sebuah atribut yang dapat digunakan untuk mengontrol garis pembatas antara baris dan kolom ini, yakni atribut rules. Penulisan atribut rules di letakkan pada tag table. Atribut rules dapat berisi 1 diantara 4 nilai: rows, cols, all, atau none.
Sesuai dengan arti dari masing-masing nilai tersebut, jika kita menambahkan atribut rules=”cols” pada tabel, maka untuk setiap sel akan ditampilkan garis pembatas hanya diantara kolom. Sedangkan atribut rules=”rows” akan menampilkan garis pembatas hanya diantara baris.
Jika menginginkan garis tampil baik untuk kolom maupun untuk baris tabel, kita dapat menggunakan atribut rules=”all”. Sebaliknya jika tidak ingin menampilkan garis apapun diantara sel, bisa menggunakan atribut rules=”none”.
Berikut adalah contoh dari kode HTML yang menggunakan atribut rules, savelah sebagai tabelrules.html
Dari hasil kode HTML diatas, terlihat perbedaan untuk masing-masing nilai rules. Anda bisa menggabungkan berbagai atribut lainnya seperti border, cellspacing, dan lain-lain untuk menghasilkan tabel sesuai dengan keinginan.
Secara default bawaan HTML, setiap tabel akan diatur lebarnya secara otomatis dari besar data yang ada didalam tabel tersebut, namun jika kita ingin ‘memaksakan’ web browser untuk menampilkan tabel dengan lebar tertentu, kita bisa menambahkan sebuah atribut width untuk mengatur lebar tabel.
Sama seperti penjelasan pada tutorial tentang rules, jika anda telah memahami CSS, disarankan menggunakan CSS untuk memanipulasi tampilan dari tabel dibandingkan menggunakan atribut width secara langsung didalam tag HTML.
Berikut adalah contoh tabel yang memiliki perbedaan panjang untuk baris:
Dapat dilihat bahwa web browser menampilkan tabel sesuai dengan panjang
data yang terdapat pada baris terpanjang, dan jika anda mencoba
mengecilkan jendela web browser, tampilan tabel akan bergeser
menyesuaikan dengan lebar web browser. Inilah tampilan default dari
tabel HTML.
Untuk “memaksa” web browser menampilkan lebar tabel sesuai dengan yang diinginkan, kita dapat menambahkan atribut width pada tag table, seperti contoh berikut:
Contoh penggunaan atribut width tabel HTML, tabelwidth.html
Jika anda mencoba mengubah kembali ukuran web browser, tampilan tabel akan tetap, sesuai dengan nilai dari atribut width.
Atribut width dapat berisi nilai fixed (tetap), yakni dalam satuan pixel (misalnya: 400px, 600px), maupun nilai relatif dalam bentuk persen (misalnya: 30%, 60%).
Jika kita menggunakan nilai relatif seperti 50%, maka lebar tabel akan ditampilkan sebesar 50% dari tag induk (tag parent) dari tab tabel. Sepanjang contoh kita disini, tag parent dari tag table adalah tag body. Namun untuk tag body ini, kita tidak merubah nilai widthnya, dan secara default mencakup seluruh lebar web browser. Sehingga jika sebuah tabel memiliki lebar 50%, maka ukurannya adalah 50% dari layar web browser.
Namun syarat agar kita bisa mengatur lebar masing-masing kolom, lebar tabel juga telah ditentukan terlebih dahulu melalui atribut width pada tag table.
Berikut adalah contoh tabel yang menggunakan atribut width pada tag th.
Seperti yang terlihat, bahwa lebar dari masing-masing kolom diset melalui nilai atribut width.
Sebagai catatan, seandainya total lebar dari seluruh kolom (atribut width pada tag th) melebihi lebar tabel (atribut width pada tag table), maka lebar masing-masing kolom akan ‘disesuaikan’ agar tidak melebihi lebar tabel. Sehingga untuk menghindari tampilan yang tidak diinginkan, pastikan agar total lebar kolom tidak melebihi nilai width tabel.
Untuk keperluan yang lebih khusus, tinggi default tabel HTML dirasa tidak mencukupi, untuk hal ini HTML menyediakan atribut height untuk mengatur tinggi tabel, dan juga mengatur tinggi masing-masing baris.
Jika digunakan di dalam tag table, maka nilai dari width akan dibagi secara merata kedalam seluruh baris. Namun jika kita menginginkan merubah tinggi baris tabel secara individu, tag width harus diletakkan pada setiap tag tr.
Berikut contoh penggunaan atribut height pada tag table:
Pada contoh kode HTML diatas saya menambahkan atribut height=”200px” pada tag table, sehingga web browser membagi tinggi 200px itu kepada seluruh baris yang ada.
Untuk pengaturan tinggi kolom yang lebih spesifik, kita dapat mengatur tinggi masing-masing baris dengan cara menempatkan atribut height pada setiap tag tr. Berikut contoh penggunaan atribut height pada tag tr:
Seperti yang terlihat, bahwa ketiga baris pada tabel diatas memiliki tinggi yang berbeda-beda, karena kita menambahkan atribut height=”20px” pada baris pertama, height=”40px” pada baris kedua, dan “height=60px” pada baris ketiga.
Sebagai catatan, seandainya total tinggi dari seluruh baris (atribut height pada tag tr) melebihi tinggi tabel (atribut height pada tag table), maka atribut height pada tag tabel akan diabaikan, dan tabel ditampilkan dengan ukuran height pada tag tr. Namun jika ukuran height pada tag tabel melebihi total height dari tag tr, maka ukuran tabel akan ditampilkan “proporsional” mengikuti height dari tabel.
Sehingga untuk menghindari tampilan yang tidak diinginkan, pastikan agar total tinggi baris tidak melebihi nilai height tabel.
Sekian dulu penjelasan dari saya,semoga jelas,kita lanjut lagi Dalam tutorial selanjutnya di Tutorial HTML terusan 16.
Jika sebelumnya anda telah mempelajari pembahasan tentang atribut border untuk tabel, maka jika diperhatikan, web browser sebenarnya tidak hanya menampilkan border, namun juga garis pembatas di antara sel tersebut, seperti tampilan dibawah ini:
HTML menyediakan sebuah atribut yang dapat digunakan untuk mengontrol garis pembatas antara baris dan kolom ini, yakni atribut rules. Penulisan atribut rules di letakkan pada tag table. Atribut rules dapat berisi 1 diantara 4 nilai: rows, cols, all, atau none.
Sesuai dengan arti dari masing-masing nilai tersebut, jika kita menambahkan atribut rules=”cols” pada tabel, maka untuk setiap sel akan ditampilkan garis pembatas hanya diantara kolom. Sedangkan atribut rules=”rows” akan menampilkan garis pembatas hanya diantara baris.
Jika menginginkan garis tampil baik untuk kolom maupun untuk baris tabel, kita dapat menggunakan atribut rules=”all”. Sebaliknya jika tidak ingin menampilkan garis apapun diantara sel, bisa menggunakan atribut rules=”none”.
Berikut adalah contoh dari kode HTML yang menggunakan atribut rules, savelah sebagai tabelrules.html
<!DOCTYPE html><html> <head> <title>Contoh pemakaian attribut rules dalam Tabel HTML</title> </head><body><h2>Belajar atribut rules dalam Tabel HTML</h2><h4>rules = "rows"</h4><table rules="rows"> <tr> <th>Judul 1</th> <th>Judul 2</th> <th>Judul 3</th> </tr> <tr> <td>Baris 1, Kolom 1</td> <td>Baris 1, Kolom 2</td> <td>Baris 1, Kolom 3</td> </tr> <tr> <td>Baris 2, Kolom 1</td> <td>Baris 2, Kolom 2</td> <td>Baris 2, Kolom 3</td> </tr> <tr> <td>Baris 3, Kolom 1</td> <td>Baris 3, Kolom 2</td> <td>Baris 3, Kolom 3</td> </tr></table><h4>rules = "cols"</h4><table rules="cols"> <tr> <th>Judul 1</th> <th>Judul 2</th> <th>Judul 3</th> </tr> <tr> <td>Baris 1, Kolom 1</td> <td>Baris 1, Kolom 2</td> <td>Baris 1, Kolom 3</td> </tr> <tr> <td>Baris 2, Kolom 1</td> <td>Baris 2, Kolom 2</td> <td>Baris 2, Kolom 3</td> </tr> <tr> <td>Baris 3, Kolom 1</td> <td>Baris 3, Kolom 2</td> <td>Baris 3, Kolom 3</td> </tr></table><h4>rules = "all"</h4><table rules="all"> <tr> <th>Judul 1</th> <th>Judul 2</th> <th>Judul 3</th> </tr> <tr> <td>Baris 1, Kolom 1</td> <td>Baris 1, Kolom 2</td> <td>Baris 1, Kolom 3</td> </tr> <tr> <td>Baris 2, Kolom 1</td> <td>Baris 2, Kolom 2</td> <td>Baris 2, Kolom 3</td> </tr> <tr> <td>Baris 3, Kolom 1</td> <td>Baris 3, Kolom 2</td> <td>Baris 3, Kolom 3</td> </tr></table><h4>rules="none", border="1"</h4><table rules="none" border="1" > <tr> <th>Judul 1</th> <th>Judul 2</th> <th>Judul 3</th> </tr> <tr> <td>Baris 1, Kolom 1</td> <td>Baris 1, Kolom 2</td> <td>Baris 1, Kolom 3</td> </tr> <tr> <td>Baris 2, Kolom 1</td> <td>Baris 2, Kolom 2</td> <td>Baris 2, Kolom 3</td> </tr> <tr> <td>Baris 3, Kolom 1</td> <td>Baris 3, Kolom 2</td> <td>Baris 3, Kolom 3</td> </tr></table></body></html>
Secara default bawaan HTML, setiap tabel akan diatur lebarnya secara otomatis dari besar data yang ada didalam tabel tersebut, namun jika kita ingin ‘memaksakan’ web browser untuk menampilkan tabel dengan lebar tertentu, kita bisa menambahkan sebuah atribut width untuk mengatur lebar tabel.
Sama seperti penjelasan pada tutorial tentang rules, jika anda telah memahami CSS, disarankan menggunakan CSS untuk memanipulasi tampilan dari tabel dibandingkan menggunakan atribut width secara langsung didalam tag HTML.
Berikut adalah contoh tabel yang memiliki perbedaan panjang untuk baris:
<!DOCTYPE html><html> <head> <title>Contoh pemakaian attribut width dalam Tabel HTML</title> </head><body><h2>Belajar atribut width dalam Tabel HTML</h2><table border="1"><caption>------------Tabel Tanpa Atribut Width--------------</caption> <tr> <th>Judul 1</th> <th>Judul 2</th> <th>Judul 3</th> </tr> <tr> <td>Baris 1, Kolom 1</td> <td>Baris 1, Kolom 2</td> <td>Baris 1, Kolom 3</td> </tr> <tr> <td>Data yang sangat panjang, sehingga merusak tampilan dari tabel</td> <td>Baris 2, Kolom 2</td> <td>Baris 2, Kolom 3</td> </tr> <tr> <td>Baris 3, Kolom 1</td> <td>Baris 3, Kolom 2</td> <td>Baris 3, Kolom 3</td> </tr></table></body></html>
Mengatur Lebar Tabel Dengan Atribut Width
Atribut width dapat digunakan untuk tag tabel (tag table) maupun untuk tag kolom (tag th, tag td, maupun tag col). Jika diletakkan pada tag table, atribut ini berfungsi untuk mengatur lebar tabel secara keseluruhan. Namun jika diletakkan pada tag th atau td, atribut ini akan berfungsi untuk mengatur lebar kolom.Untuk “memaksa” web browser menampilkan lebar tabel sesuai dengan yang diinginkan, kita dapat menambahkan atribut width pada tag table, seperti contoh berikut:
Contoh penggunaan atribut width tabel HTML, tabelwidth.html
<!DOCTYPE html><html> <head> <title>Contoh pemakaian attribut width dalam Tabel HTML</title> </head><body><h2>Belajar atribut width dalam Tabel HTML</h2><table border="1" width="600px"><caption>------------Lebar Tabel 600px--------------</caption> <tr> <th>Judul 1</th> <th>Judul 2</th> <th>Judul 3</th> </tr> <tr> <td>Baris 1, Kolom 1</td> <td>Baris 1, Kolom 2</td> <td>Baris 1, Kolom 3</td> </tr> <tr> <td>Data yang sangat panjang, sehingga merusak tampilan dari tabel</td> <td>Baris 2, Kolom 2</td> <td>Baris 2, Kolom 3</td> </tr> <tr> <td>Baris 3, Kolom 1</td> <td>Baris 3, Kolom 2</td> <td>Baris 3, Kolom 3</td> </tr></table></body></html>
Atribut width dapat berisi nilai fixed (tetap), yakni dalam satuan pixel (misalnya: 400px, 600px), maupun nilai relatif dalam bentuk persen (misalnya: 30%, 60%).
Jika kita menggunakan nilai relatif seperti 50%, maka lebar tabel akan ditampilkan sebesar 50% dari tag induk (tag parent) dari tab tabel. Sepanjang contoh kita disini, tag parent dari tag table adalah tag body. Namun untuk tag body ini, kita tidak merubah nilai widthnya, dan secara default mencakup seluruh lebar web browser. Sehingga jika sebuah tabel memiliki lebar 50%, maka ukurannya adalah 50% dari layar web browser.
Mengatur Lebar Kolom Dengan Atribut Width
Pada contoh tabelwidth.html diatas, walaupun kita telah mengatur lebar dari tabel, namun lebar masing-masing kolom akan ‘dibagi’ secara proporsional oleh web browser. Untuk mengatur lebar kolom tabel secara individu, maka atribut width harus diletakkan pada tag kolom (tag th, td, maupun tag col).Namun syarat agar kita bisa mengatur lebar masing-masing kolom, lebar tabel juga telah ditentukan terlebih dahulu melalui atribut width pada tag table.
Berikut adalah contoh tabel yang menggunakan atribut width pada tag th.
<!DOCTYPE html><html> <head> <title>Contoh pemakaian attribut width dalam Tabel HTML</title> </head><body><h2>Belajar atribut width dalam Tabel HTML</h2><table border="1" width="600px"><caption>------------Lebar Tabel 600px--------------</caption> <tr> <th width="300px">Judul 1 (width=300px)</th> <th width="200px">Judul 2 (width=200px)</th> <th width="100px">Judul 3 (width=100px)</th> </tr> <tr> <td>Baris 1, Kolom 1</td> <td>Baris 1, Kolom 2</td> <td>Baris 1, Kolom 3</td> </tr> <tr> <td>Data yang sangat panjang, sehingga merusak tampilan dari tabel</td> <td>Baris 2, Kolom 2</td> <td>Baris 2, Kolom 3</td> </tr> <tr> <td>Baris 3, Kolom 1</td> <td>Baris 3, Kolom 2</td> <td>Baris 3, Kolom 3</td> </tr></table></body></html>
Sebagai catatan, seandainya total lebar dari seluruh kolom (atribut width pada tag th) melebihi lebar tabel (atribut width pada tag table), maka lebar masing-masing kolom akan ‘disesuaikan’ agar tidak melebihi lebar tabel. Sehingga untuk menghindari tampilan yang tidak diinginkan, pastikan agar total lebar kolom tidak melebihi nilai width tabel.
Untuk keperluan yang lebih khusus, tinggi default tabel HTML dirasa tidak mencukupi, untuk hal ini HTML menyediakan atribut height untuk mengatur tinggi tabel, dan juga mengatur tinggi masing-masing baris.
Fungsi atribut height
Sama seperti atribut width, atribut height dapat digunakan di dalam tag table atau tag tr.Jika digunakan di dalam tag table, maka nilai dari width akan dibagi secara merata kedalam seluruh baris. Namun jika kita menginginkan merubah tinggi baris tabel secara individu, tag width harus diletakkan pada setiap tag tr.
Berikut contoh penggunaan atribut height pada tag table:
<!DOCTYPE html><html> <head> <title>Contoh pemakaian attribut height dalam Tabel HTML</title> </head><body><h2>Belajar atribut height dalam Tabel HTML</h2><h3>Atribut height pada tag table</h3><table height="200px" border="1"> <caption>------------Tinggi Tabel 200px--------------</caption> <tr> <th>Judul 1</th> <th>Judul 2</th> <th>Judul 3</th> </tr> <tr> <td>Baris 1, Kolom 1</td> <td>Baris 1, Kolom 2</td> <td>Baris 1, Kolom 3</td> </tr> <tr> <td>Baris 2, Kolom 1</td> <td>Baris 2, Kolom 2</td> <td>Baris 2, Kolom 3</td> </tr> <tr> <td>Baris 3, Kolom 1</td> <td>Baris 3, Kolom 2</td> <td>Baris 3, Kolom 3</td> </tr> </table></body></html>
Untuk pengaturan tinggi kolom yang lebih spesifik, kita dapat mengatur tinggi masing-masing baris dengan cara menempatkan atribut height pada setiap tag tr. Berikut contoh penggunaan atribut height pada tag tr:
<!DOCTYPE html><html> <head> <title>Contoh pemakaian attribut height dalam Tabel HTML</title> </head><body><h2>Belajar atribut height dalam Tabel HTML</h2><h3>Atribut height pada tag tr</h3><table border="1" > <caption>---Baris 1 = 20px, Baris 2 = 40px, Baris 3 = 60px--</caption> <tr height="20px"> <th>Judul 1</th> <th>Judul 2</th> <th>Judul 3</th> </tr> <tr height="40px"> <td>Baris 1, Kolom 1</td> <td>Baris 1, Kolom 2</td> <td>Baris 1, Kolom 3</td> </tr> <tr height="60px"> <td>Baris 2, Kolom 1</td> <td>Baris 2, Kolom 2</td> <td>Baris 2, Kolom 3</td> </tr> <tr height="80px"> <td>Baris 3, Kolom 1</td> <td>Baris 3, Kolom 2</td> <td>Baris 3, Kolom 3</td> </tr> </table> </body> </html>
Sebagai catatan, seandainya total tinggi dari seluruh baris (atribut height pada tag tr) melebihi tinggi tabel (atribut height pada tag table), maka atribut height pada tag tabel akan diabaikan, dan tabel ditampilkan dengan ukuran height pada tag tr. Namun jika ukuran height pada tag tabel melebihi total height dari tag tr, maka ukuran tabel akan ditampilkan “proporsional” mengikuti height dari tabel.
Sehingga untuk menghindari tampilan yang tidak diinginkan, pastikan agar total tinggi baris tidak melebihi nilai height tabel.
Sekian dulu penjelasan dari saya,semoga jelas,kita lanjut lagi Dalam tutorial selanjutnya di Tutorial HTML terusan 16.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
silahkan berkomentar bila ada yang ingin di tanyakan . ConversionConversion EmoticonEmoticon