Cara Mengatur Dan Mengubah Lebar Tabel Html Dengan Atribut Width
Sunday, February 7, 2016
Add Comment
Jika Anda sudah membaca materi mencar ilmu HTML sebelumnya, maka Anda sudah tidak abnormal lagi dengan atribut
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 browser maka tabel akan menyesuaikan dengan lebar jendela web browser, menyerupai gambar dibawah ini :
Atribut
Berikut ini penulisan atribut
Jika Anda mengecilkan jendela web browser maka ukuran tabel akan tetap sesuai dengan nilai dari atribut
Tentu ini akan menjadi duduk perkara bila ada yang mengunjungi blog kita memakai handphone dengan ukuran layar kecil, maka pengunjung harus men-scroll ke samping untuk melihat data tabel secara lengkap. Maka untuk mengatasi hal ini kita sanggup mengisi nilai dari atribut
Berikut ini penulisan atribut
Berikut ini tampian tabel ketika jendela web browser belum dikecilkan :
Berikut ini tampian tabel ketika jendela web browser dikecilkan :
Pada pola instruksi HTML diatas kita mengisi nilai relatif di atribut
Mengatur Lebar Kolom Tabel HTML Dengan Atribut
Pada pola instruksi HTML diatas, kita telah mengatur lebar tabel dengan memakai atribut
Berikut ini penulisan atribut
Pada artikel selanjutnya kita akan mempelajari Cara Mengatur Tinggi Tabel HTML.
width. Penggunaan atribut width tidak hanya dipakai untuk mengatur lebar gambar saja tapi juga sanggup dipakai untuk 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 untuk menciptakan tabel tanpa memakai atributwidthdidalam tag HTML secara langsung, sudah tidak disarankan lagi dipakai di HTML5, bila 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 browser maka tabel akan menyesuaikan dengan lebar jendela web browser, menyerupai 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 secara keseluruhan, namun bila 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 browser maka ukuran tabel akan tetap sesuai dengan nilai dari atribut
width.
Tentu ini akan menjadi duduk perkara bila ada yang mengunjungi blog kita memakai handphone dengan ukuran layar kecil, maka pengunjung harus men-scroll ke samping untuk melihat data tabel secara lengkap. Maka untuk 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 yaitu 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 ketika jendela web browser belum dikecilkan :
Berikut ini tampian tabel ketika jendela web browser 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 yaitu tag <body>, alasannya yaitu tag <body> tidak ada atribut width maka secara default akan meliputi seluruh layar web browser, sehingga tabel akan berukuran 70% dari layar web browser. 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 meliputi keseluruhan tabel, namun lebar dari kolom tabel akan dibagi secara proporsional oleh web browser. Untuk mengatur lebar kolom tabel secara 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 artikel selanjutnya kita akan mempelajari Cara Mengatur Tinggi Tabel HTML.
0 Response to "Cara Mengatur Dan Mengubah Lebar Tabel Html Dengan Atribut Width"
Post a Comment