Monday 2 December 2013

MEMBUAT TABEL MENGGUNAKAN HTML...!!!

Assalamu’alaikum......

Selamat pagi  sahabat blogersss... Kali ini saya mau men-share kepada sahabat-sahabat tentang “Bagaimana Cara Membuat Tabel Menggunakan HTML”. :)
Untuk membuat tabel menggunakan HTML, kita bisa menggunakan notepad sebagai sarana untuk menuliskan listing HTML-nya. Tanpa basa-basi, langsung aja yu kita k TKP..... :D

Ø  Langkah-langkah membuat tabel :
1.       Buka notepad melalui tombol start – All Program – ketikan “NotePad” pada kolom pencarian.
2.       Simpan dulu file tersebut dengan format *.html.
3.       Mulailah mengetikan listing html pada lembar kerja tadi.
Saya akan memberikan contoh membuat tabel sebanyak 3 baris & 3 kolom.
a.       Tuliskan listing seperti di bawah ini :
<html>
     <head>
                <title> Membuat Tabel </title>
     </head><body><table border="2" width="50%" cellpadding=7>
       <tr>
              <td></td>
              <td></td>
              <td></td>
       </tr>
       <tr>
              <td></td>
              <td></td>
              <td></td>
       </tr>
       <tr>
              <td></td>
              <td></td>
              <td></td>
       </tr>
</table>
</body>
</html>

b.      Save terlebih dahulu filenya.
c.       Buka file yang kita buat tadi menggunakan web browser anda. Maka tampilannya akan seperti gambar berikut :

Ø  Langkah-langkah memasukan Tulisan & Foto Pada Tabel :
1.       Buka notepad melalui tombol start – All Program – ketikan “NotePad” pada kolom pencarian.
2.       Simpan dulu file tersebut dengan format *.html.
3.      
Mulailah mengetikan listing html pada lembar kerja tadi.
<html>
<head>
<title> Profil Naruto Shippuden </title>
</head>
<body>
<Font size="6"><B><center>Profil Naruto Shippuden</center></font>
<center><table border="5" width="50%" cellpadding=5 cellspacing=2></center>
<tr>
<td><center><B> Nama Mahasiswa </B></center></td>
<td><center><B> Jurus </B></center></td>
<td><center><B> Foto </B></center></td>

</tr>
<tr>
<td><font size="5"><B> Naruto Uzumaki <B></font></td>
<td><B><center> Rasengan </center></B></td>
<td><center><img src="naruto1.png" width="100"></center></td>
</tr>
<tr>
<td><font size="5"><B> Sasuke Uchiha <B></font></td>
<td><B><center> Chidoori </center</B></td>
<td><center><img src="sasuke1.png" width="100"></center></td>
</tr>
</table>
</body>
</html>
Ket :
·         Tulisan berwarna merah              : Mengatur Ukuran tabel.
·         Tulisan berwarna orange             : Untuk memasukan tulisan di tangah & tebal
·         Tulisan berwarna biru                   : Untuk memasukan gambar (image)
Penting !!! : Untuk gambar yang ingin di masukan harus d simpan dalam 1 folder dengan file yang anda buat.

4.       Save dulu filenya. Setelah itu buka menggunakan Web Browser anda, maka hasilnya akan menjadi seperti ini :



Mungkin cukup sekian dulu postingannya ya kawan :) Semoga postingan ini bisa bermanfaat bagi pembaca :)

Wassalamu'alaikum....

0 comments:

Post a Comment

Mawardiansyah Mega Kurnia. Powered by Blogger.

Followers

Renungkanlah..!!