Tutorial HTML : Mengatur Lebar Kolom Tabel - Hallo sahabat Kodenyekrip, Pada Artikel yang anda baca kali ini dengan judul Tutorial HTML : Mengatur Lebar Kolom Tabel, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel HTML,
Artikel Pemrograman Web, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Tutorial HTML : Mengatur Lebar Kolom Tabel
link : Tutorial HTML : Mengatur Lebar Kolom Tabel
Tutorial HTML : Mengatur Lebar Kolom Tabel
Ketika kita membuat tabel dan mengisi data pada masing-masing kolom, maka secara default lebar tabel akan menyesuaikan berapa lebar yang dibutuhkan oleh data tersebut. Dengan demikian ukuran lebar akan secara otomatis mengikuti data yang diinputkan.
Nah sekarang, bagaimana seandainya kita ingin menentukan sendiri lebar tabel ?. Kita dapat menentukannya dengan menggunakan attribute width yang dapat dipasangkan pada :
- Tag <table>, sehingga menjadi <table width="400 px">. Model seperti ini akan membuat tabel dengan ukuran 400px. Untuk ukuran lebar kolom akan menyesuaikan dengan data.
- Tag<th>, sehingga menjadi <th width="250px">. Model seperti ini akan membuat ukuran kolom dengan ukuran 250px. Nantinya setiap lebar kolom akan memiliki ukuran yang berbeda-beda.
Pengaturan lebar tabel HTML satu layar penuh
Untuk membuat sebuah tabel HTML yang memiliki ukuran lebar satu layar penuh dapat menggunakan width yang diset 100% seperti Gambar.1 dibawah ini : |
| Gambar.1 |
Source code untuk Gambar.1 diatas :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1" width="100%">
<tr>
<th>No</th>
<th>Nama</th>
<th>NIM</th>
<th>Jenis Kelamin</th>
</tr>
<tr>
<td>1</td>
<td>Andi Fraseria</td>
<td>220120102001</td>
<td>Pria</td>
</tr>
<tr>
<td>2</td>
<td>Rudi Hariadi</td>
<td>220120102002</td>
<td>Pria</td>
</tr>
<tr>
<td>3</td>
<td>Doni Mikarel</td>
<td>220120102003</td>
<td>Pria</td>
</tr>
</table>
</body>
</html>Pengaturan lebar kolom tabel HTML
Disini kita akan membuat tabel dengan ukuran kolom yang berbeda-beda antara satu kolom dengan kolom lainnya seperti yang ditunjukkan oleh Gambar.2 dibawah ini : |
| Gambar.2 |
Jika kita perhatikan dengan seksama, maka akan tampak kolom untuk "No", "Nama", "NIM" dan kolom "Jenis Kelamin" memiliki ukuran lebar yang berbeda. Untuk membuat ukuran kolom yang berbeda pada sebuah tabel HTML seperti Gambar.2 diatas, maka dapat dilakukan seperti script HTML dibawah ini :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th width="30px">No</th>
<th width="200px">Nama</th>
<th width="150px">NIM</th>
<th width="100px">Jenis Kelamin</th>
</tr>
<tr>
<td>1</td>
<td>Andi Fraseria</td>
<td>220120102001</td>
<td>Pria</td>
</tr>
<tr>
<td>2</td>
<td>Rudi Hariadi</td>
<td>220120102002</td>
<td>Pria</td>
</tr>
<tr>
<td>3</td>
<td>Doni Mikarel</td>
<td>220120102003</td>
<td>Pria</td>
</tr>
</table>
</body>
</html>Tutorial Tabel HTML lainnya :
- Tutorial HTML tentang pengaturan tinggi tabel
- Tutorial HTML tentang pengaturan lebar tabel dan kolom tabel
- Tutorial HTML tentang cara menambahkan judul pada tabel
- Tutorial HTML tentang atribut colspan dan rowspan pada tabel
- Tutorial HTML tentang cara memberi warna pada tabel
Demikianlah Artikel Tutorial HTML : Mengatur Lebar Kolom Tabel
Sekianlah artikel Tutorial HTML : Mengatur Lebar Kolom Tabel kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Tutorial HTML : Mengatur Lebar Kolom Tabel dengan alamat link https://kodenyekrip.blogspot.com/2016/10/tutorial-html-mengatur-lebar-kolom-tabel.html
