Belajar Table Tingkat 3

BELAJAR TABLE TINGKAT 3

Pada Tutorial Belajar Table Tingkat 3, kita akan mencoba memodifikasi table dari coding Belajar Table tingkat 2, yaitu memberi warna pada table, memberikan foto didalam table dan dilengkapi dengan ukuran foto / size foto.

Tidak perlu membuat ulang coding, cukup kamu lanjutkan saja dari coding Belajar Table 2 kemudian kamu tambah - tambahkan coding yang kurang. Jika menginginkan coding lengkapnya bisa Copas Coding dibawah ini.

 <html>
<head>
<title>Table Tingkat 3</title>
</head>
<body>
<body>
<center>
<table border="1" cellpadding="0" cellspacing="0" width="50%">
<tr align="center" bgcolor="green">
 <td rowspan="2">No</td>
 <td rowspan="2">Foto</td>
 <td width="40%">
  Nama
 </td>
 <td rowspan="2">Alamat</td>
</tr>
<tr align="center">
 <td bgcolor="yellow">Lengkap</td>
</tr>
<tr bgcolor="#E2E4FF">
 <td>1</td>
 <td><img src="images.jpg" width="180" height="180"></td>
 <td>Ahmad</td>
 <td>Desa Panusupan Cilongok Banyumas Jawa Tengah</td>
</tr>
<tr>
 <td>2</td>
 <td><img src="images2.jpg" width="250" height="180"></td>
 <td>Zaenal</td>
 <td>Jakarta Pusat Kemayoran</td>
</tr>
<tr bgcolor="#E2E4FF">
 <td>2</td>
 <td><img src="images3.jpg" width="250" height="180"></td>
 <td>Abidin</td>
 <td>Panusupan</td>
</tr>
<tr>
 <td colspan="3" align="center">Data Pribadi Santri</td>
</tr>
</table>
</center>
</body>
</html>
 

Keterangan :
Bgcolor : Berfungsi untuk memberikan warna background
<img src> : Berfungsi untuk menampilkan gambar (images2.jpg nama file gambar, harus disesuaikan dengan file gambar yang ingin kamu tampilkan Dan disesuaikan juga alamat gambar), didalam tag img scr terdapat width dan height berfungsi untuk menentukan ukuran gambar.

Coding diatas akan menampilkan Output pada gambar ini
Sekian Tutorial Belajar Tingkat 3, Sampai Bertemu ditutorial - tutorial selanjutnya Belajar Table Tingkat 4, apabila ingin bertanya lebih lanjut mengenai pelajaran table bisa ditulis dikomentar bawah.semoga bermanfaat tutorial ini dan terima kasih

Subscribe to receive free email updates:

0 Response to "Belajar Table Tingkat 3"

Post a Comment