width. Penggunaan atribut width tidak hnya dipakai untk mengatur lebar gambar saja tapi juga sanggup dipakai untk mengatur lebar tabel. Jika kita tidak memakai atribut width didalam tabel, maka lebar setiap kolom tabel akan diatur lebarnya dari panjang data yang ada didalam tabel tersebut.Penulisan atributBerikut ini pola instruksi HTML untk menciptakan tabel tanpa memakai atributwidthdidalam tag HTML setips langsung, sudah tidak disarankan lagi dipakai di HTML5, jikalau Anda ingin mengatur lebar tabel HTML maka disarankan memakai CSS. Namun sebagai materi pembelajaran Saya akan tetap membahas penggunaan dan penulisan atributwidthdidalam tabel HTML
width :<!DOCTYPE html> <html> <head> <title>Belajar HTML</title> </head> <body> <table border="1"> <tr> <th>No</th> <th>Nama</th> <th>Kelamin</th> </tr> <tr> <td>1</td> <td>Bagas Saputra</td> <td>Laki-laki</td> </tr> <tr> <td>2</td> <td>Sutisna</td> <td>Laki-laki</td> </tr> <tr> <td>3</td> <td>Reza Rahardiansyah Pratama</td> <td>Laki-laki</td> </td> </table> </body> </html>
Terlihat pada gambar diatas lebar pada kolom tabel kedua yaitu "Nama" mengikut panjang dari data tabel "Reza Rahardiansyah Pratama", begitupun juga pada kolom tabel pertama dan ketiga yang lebarnya akan mengikuti data tabel yang terpanjang. Jika Anda mengecilkan jendela WEB broser maka tabel akan menyesuaikan dengan lebar jendela WEB broser, ibarat gambar dibawah ini :
Mengatur Lebar Tabel HTML Dengan Atribut width
Atribut width sanggup dipakai pada tag <table>, <th>, <td> dan <col/>. Jika atribut width diletakkan didalam tag <table> maka atribut ini akan mengatur lebar tabel setips keseluruhan, namun jikalau diletakkan pada tag <th>, <td> dan <col/> maka atribut ini akan mengatur lebar kolom tabel.Berikut ini penulisan atribut
width didalam tag <table> :<!DOCTYPE html> <html> <head> <title>Belajar HTML</title> </head> <body> <table border="1" width="700px"> <tr> <th>No</th> <th>Nama</th> <th>Kelamin</th> </tr> <tr> <td>1</td> <td>Bagas Saputra</td> <td>Laki-laki</td> </tr> <tr> <td>2</td> <td>Sutisna</td> <td>Laki-laki</td> </tr> <tr> <td>3</td> <td>Reza Rahardiansyah Pratama</td> <td>Laki-laki</td> </td> </table> </body> </html>
Jika Anda mengecilkan jendela WEB broser maka ukuran tabel akan tetap sesuai dengan nilai dari atribut
width.
Tentu ini akan menjadi msumberah jikalau ada yang mengunjungi blog kita memakai handphone dengan ukuran screen kecil, maka pengunjung harus men-scroll ke samping untk melihat data tabel setips lengkap. Maka untk mengatasi hal ini kita sanggup mengisi nilai dari atribut
width dengan nilai relatif, contohnya 50% atau 70%. Nilai yang kita isi di atribut width pada pola instruksi HTML diatas adlah nilai tetap, contohnya 500px atau 700px.Berikut ini penulisan atribut
width dengan nilai relatif didalam tag <table> :<!DOCTYPE html> <html> <head> <title>Belajar HTML</title> </head> <body> <table border="1" width="70%"> <tr> <th>No</th> <th>Nama</th> <th>Kelamin</th> </tr> <tr> <td>1</td> <td>Bagas Saputra</td> <td>Laki-laki</td> </tr> <tr> <td>2</td> <td>Sutisna</td> <td>Laki-laki</td> </tr> <tr> <td>3</td> <td>Reza Rahardiansyah Pratama</td> <td>Laki-laki</td> </td> </table> </body> </html>Berikut ini tampian tabel dikala jendela WEB broser belum dikecilkan :
Berikut ini tampian tabel dikala jendela WEB broser dikecilkan :
Pada pola instruksi HTML diatas kita mengisi nilai relatif di atribut
width yaitu sebesar 70%, maka lebar tabel akan ditampilkan sebesar 70% dari tag induk (tag parent) dari tag <table>. Tag induk dari tag table adlah tag <body>, alasannya yakni tag <body> tidak ada atribut width maka setips default akan mencsayap seluruh screen WEB broser, sehingga tabel akan berukuran 70% dari screen WEB broser. Mengatur Lebar Kolom Tabel HTML Dengan Atribut width
Pada pola instruksi HTML diatas, kita telah mengatur lebar tabel dengan memakai atribut width didalam tag <table> yang akan mencsayap keseluruhan tabel, namun lebar dari kolom tabel akan dibagi setips proporsional oleh WEB broser. Untuk mengatur lebar kolom tabel setips individu, maka kita sanggup meletakkan atribut width didalam tag <th>, <td> dan <col/>.Berikut ini penulisan atribut
width didalam tag th :<!DOCTYPE html> <html> <head> <title>Belajar HTML</title> </head> <body> <table border="1"> <tr> <th width="30px">No</th> <th width="250px">Nama</th> <th width="100px">Kelamin</th> </tr> <tr> <td>1</td> <td>Bagas Saputra</td> <td>Laki-laki</td> </tr> <tr> <td>2</td> <td>Sutisna</td> <td>Laki-laki</td> </tr> <tr> <td>3</td> <td>Reza Rahardiansyah Pratama</td> <td>Laki-laki</td> </td> </table> </body> </html>
Pada article selanjutnya kita akan mempelajari Trik Mengatur Tinggi Tabel HTML. Sumber https://mas-abdi.blogspot.com/
No comments:
Post a Comment