Buat Biodata dengan Tabel lewat HTML yukk


Pengen buat begituan??? ini pake HTML lohh.
Ok mari kita buat programnya, untuk aplikasi tetep Visual Studio Code yaa.
<!DOCTYPE html>
<html>
<head>
<title> Tag Gambar dan Buat Tabel
</title>
</head>

<body style=background-color:grey>
<h1><center> BIODATA MAHASISWA </h1>
<table align= center border="1" style=background-color:deepskyblue><font size=12>
<tr>
<th colspan="3" style=background-color:darkslategray><center>
<font size=5 font=calibri color=white> Data Diri </th>
</tr>
<tr>
<td> Nama </td>
<td> Alima Fahmi Rahmawati </td>
<td rowspan="10" colspan="3"> <img src="Alima.JPG" height=240 width=180 /> </td>
</tr>
<tr>
<td> NRP </td>
<td> 1103181048 </td>
</tr>
<tr>
<td> Kelas </td>
<td> 1 </td>
</tr>
<tr>
<td> Paralel </td>
<td> B </td>
</tr>
<tr>
<td> Dosen_Wali </td>
<td> Madyono </td>
</tr>
<tr>
<td> Tanggal Lahir </td>
<td> 19 Juli 1999 </td>
</tr>
<tr>
<td> Tempat Lahir </td>
<td> Bojonegoro </td>
</tr>
<tr>
<td> Tanggal Masuk </td>
<td> 22 Juni 2018 </td>
</tr>
<tr>
<td> Alamat Surabaya </td>
<td> Jln. Gebang Kidul No. 70 A Surabaya </td>
</tr>
<tr>
<td> Jalur Penerimaan </td>
<td> UMPN </td>
</tr>
</body>
</html>
Nah, kurang lebih programnya seperti gambar di atas. Untuk tag HTMLnya hampir sama dengan postingan aku yang sebelumnya yaa, namun ada beberapa tambahan berikut penjelasannya:

  1. <body style=background-color: grey> :Agar background dari tampilan berwarna.
  2. Tag <center> :Agar tampilan berada ditengah.
  3. Tag <table> :Tag yang harus ada ketika membuat tabel.
  4. <table align= center border="1" style=background-color: deepskyblue><font size=12> :Artinya, tabel yang dibuat berada di tengah-tengah, berwarna "deepskyblue", dengan border 1 (bisa diubah sesuai keinginan), dan ukuran huruf 12.
  5. Tag <tr> ditutup </tr> : (table row) untuk membuatbaris pada tabel.
  6. Tag <th> ditutup </th> : (table head) Merupakan informasi dari isi tabel yang kita buat.
  7. <th colspan="3" style=background-color: darkslategray> :Artinya, table head yang dibuat merupakan gabungan dari 3 kolom yang dijadikan satu, berwarna "darkslategray".  
  8. Tag <td> ditutp </td> :(table data) untuk membuat sel.
Untuk memunculkan gambar kita memerlukan program seperti ini
artinya, gambar akan muncul dengan menggabungkan 10 baris dan 3 kolom jadi satu. Tentukan juga nama dan jenis file foto yang ingin dimunculkan, tentukan pula height  (Tinggi) dan width (Lebar) yang akan mengatur seberapa besar ukuran foto yang akan ditampilkan.

Dari program di atas akan dihasilkan output seperti gambar yang pertama tadi yaa.

Bagaimana? mudah bukan. Jika ada yang ditanyakan atau ingin disampaikan silahkan kita sama sama belajar ok. Sampai disini dulu yaa, tunggu update selanjutnya 😇.

Komentar

Posting Komentar