Assalamu’alaikum Wr. Wb
Pengantar
Hai bagaimana kabarnya? Semoga baik-baik saja ya teman-teman. Melanjutkan artikel yang sebelumnya membahas tentang TableElement menggunakan Atribut Bgcolor. Dan pada kesempatan masih melanjutkan table cuman akan membahas Atribut width dan height pada HTML.
Secara default web browser akan mengatur ukuran lebar dan tinggi tergantung banyak teksnya. Atribut width dan height bisa mengatur ukuran dengan satuan pixel atau satuan persen (% ).
Harapan saya teman-teman dapat mempraktekan dan lebih baik lagi memahami materi kali ini dengan catatan di ulang pelajaran yang sudah dipraktekan agar tidak lupa. Teman-teman mulai dari sini harus membaca dengan teliti agar tidak salah memahami materinya. Semoga sukses dan berhasil, Amin.
Praktik HTML
Pada praktik kali kita akan membahas Atribut width dan height:
Pada atribut width dan height sudah dinyatakan deprecated dan sangat disarankan beralih ke CSS.
Contoh kode HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alami Computer</title>
</head>
<body>
<h3>Atribut border= 2, width = 300</h3>
<table border="2" width="300">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Accusantium delectus tenetur eos officiis possimus cum explicabo,
ducimus optio doloribus illo inventore architecto a,
porro eveniet asperiores est exercitationem sint natus!
</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
</body>
</html>
 |
| Gambar 1 kode table width |
 |
| Gambar 2 hasil kode table width |
Kode html table width menggunakan persen (%):
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alami Computer</title>
</head>
<body>
<h3>Atribut border= 2, width = 50%</h3>
<table border="2" width="50%">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Accusantium delectus tenetur eos officiis possimus cum explicabo,
ducimus optio doloribus illo inventore architecto a,
porro eveniet asperiores est exercitationem sint natus!
</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
</body>
</html>
 |
| Gambar 3 kode table width menggunakan persen |
 |
| Gambar 4 hasil kode table width menggunakan persen |
Sekarang table menggunakan height pada HTML
Kode HTML:<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alami Computer</title>
</head>
<body>
<h3>Atribut border = 2 height = 400</h3>
<table border="2" height="400">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Accusantium delectus tenetur eos officiis possimus cum explicabo,
ducimus optio doloribus illo inventore architecto a,
porro eveniet asperiores est exercitationem sint natus!
</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
</body>
</html>
 |
| Gambar 5 kode table height |
 |
| Gambar 6 hasil kode table height |
Kode html table height menggunakan persen (%):
Kode HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alami Computer</title>
</head>
<body>
<h3>Atribut border = 2 height = 50%</h3>
<table border="2" height="50%">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Accusantium delectus tenetur eos officiis possimus cum explicabo,
ducimus optio doloribus illo inventore architecto a,
porro eveniet asperiores est exercitationem sint natus!
</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
</body>
</html>
 |
| Gambar 7 kode-table-height-persen |
 |
| Gambar 8 kode-table-height-persen |
Disini alternatif tabel width dan heigt menggunakan CSS:
Kode HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alami Computer</title>
<style>
table {
border: 2px solid blue;
width: 200px;
height: 300px;
}
tr {
height: 200px;
}
td {
padding: 4px;
border: 2px solid blue;
}
</style>
</head>
<body>
<h3>CSS, border: 2px solid blue, width: 200px, height: 300px</h3>
<table>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Accusantium delectus tenetur eos officiis possimus cum explicabo,
ducimus optio doloribus illo inventore architecto a,
porro eveniet asperiores est exercitationem sint natus!
</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
</body>
</html>
 |
| Gambar 9 kode-table-width_height-css.png |
 |
| Gabar 10 hasil-kode-table-width_height-css |
Disini masih menggunakan css untuk table width dan height yang dirubah nilainya memakai persen (%).
Contoh kode HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alami Computer</title>
<style>
table {
border: 2px solid blue;
width: 50%;
height: 50%;
}
tr {
height: 30%;
}
td {
padding: 5px;
border: 2px solid blue;
}
</style>
</head>
<body>
<h3>CSS, border: 2px solid blue, width: 50%, height: 10%</h3>
<table>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Accusantium delectus tenetur eos officiis possimus cum explicabo,
ducimus optio doloribus illo inventore architecto a,
porro eveniet asperiores est exercitationem sint natus!
</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
</body>
</html>
 |
| Gambar 11 kode-table-width_height-persen-css |
 |
| Gambar 12 hasil-kode-table-width_height-persen-css |
Catatan:
Pada HTML5 atribut width dan height sudah dinyatakan deprecated. Jadi disarankan untuk menggunakan CSS.
Kesimpulan
Pembahasan tentang atribut width dan height pada table yang digunakan untuk keperluan menyajikan data secara menarik. Tujuan teman-teman yang membuat file html atau pemograman bisa menggunakan dengan baik dan sesuai dengan fungsi dan kelayakan pada sebuah kode-kode program yang akan dijalankan.
Terimakasih sudah berkunjung sampai ketemu di artikel selanjutnya, jangan lupa ikuti chanel kami yaitu :
YouTube: Alami Computer
Website: www.alamicomputer.id
Instagram: chaerullah.fadli
Daftar Pustaka: Tim Riset Alami Computer
artikelnya bagus min
BalasHapus8-) 8-)
BalasHapus