Pencarian

Custom Search
» » Membuat Tabel Biodata sederhana di HTML

Membuat Tabel Biodata sederhana di HTML

Disini saya akan mencoba sedikit memaparkan bagaimana cara membuat sebuah tabel di HTML, disini saya contohkan dengan membuat sebuah biodata sederhana, biar tidak memakan banyak waktu kita coba langsung kerjakan untuk pembelajarn kita kali ini outputnya mungkin seperti ini :

Kemudian untuk untuk sintaknya kurang lebih seperti ini :

<html>
<head><title>Belajar Membuat Tabel di HTML</title></head>
<body>

<center>
<table border='1'>
<caption align='center' ><h4>Biodata Muhammad Hilmi Ahadiat</h4></caption>
<tr><td width='100'>Poto</td><td align='center'>:</td><td align='center'><img src='poto.jpg' width='200' ></tr>
<tr valign='middle' align='left'><td width='100'>Nama</td><td align='center' width='5'>:</td><td width='300'>Muhammad Hilmi Ahadiat</td></tr>
<tr valign='middle' align='left'><td>Alamat</td><td align='center'>:</td><td>Tasikmalaya</td></tr>
<tr valign='middle' align='left'><td>E-mail</td><td  align='center'>:</td><td>muhammadhilmiahadiat@gmail.com</td></tr>
<ul>
<tr valign='middle' align='left'><td rowspan='2'>Blog</td><td align='center' rowspan='2'>:</td><td><li type='square'>
<a href='http://tanyamuhammadhilmi.blogspot.com'>tanyamuhammadhilmi.blogspot.com</a></td></tr>
<tr valign='middle' align='left'><td><li type='square'><a href='http://seputardunialinux.blogspot.com'>seputardunialinux.blogspot.com</td></tr>
</ul>
<tr valign='middle' align='center' ><td colspan='3'><marquee><font color='red'>Belajar Membuat Tabel di HTML</font></marquee></td></tr>
</table>
</center>

</body>
</html>

  1. </html> adalah awal dari kita membuat program.
  2. <head> bagian kepala pada listing program
  3. <title>untuk pembuatan nama judul pada jendela laman browser
  4. <body> adalah bagian dimana kita akan menuliskan sintak-sintak program contohnya unutk pembuatan tabel dll.
  5. <center>berfungsi supaya pada saat di tampilkan di browser posisinya berada di tengah.
  6. <table border='1'> nama "table" adalah awal dimna kita akan membuat suatu tabel, kemudian "border='1' " ini berfungsi untuk memberikan garis jika nilai semakin tinggi maka garis akan semakin tebal dan jika border nya di isi 0 maka garis akan menghilang jadi batasannya sampai 1 untuk memunculkan garis.
  7. <caption align='center'></b> "caption" digunakan bilamana kita akan memberi judul pada sebuah tabel dan fungsi "align='center' " supaya judul yang kita buat berada di posisi tengah kita bisa merubahnya ke kanan,kiri,atas,bawah, kanan=right, kiri=left, bawah=buttom, atas=top silahkan bereksperimen sendiri. Dan untuk <h4> disini fungsinya untuk memberikan subjudul jadi tingkat ketebalannya kemudian besar kecilnya intinya jika kita angka 4 nya semakin kecil maka huruf/angka akan semakin besar dan jika sebaliknya maka akan semakin kecil.
  8. <tr> ini berfungsi untuk memberi garis ke bawah
  9. <td width='100'> ini berfungsi untuk memberi garis ke samping jadi kebalikannya, dan width fungsinya untuk mengatur ukuran suatu tabel ke samping
  10. <img src='poto.jpg' width='200' > skrip ini untuk menyisipkan poto, poto harus sesuai dengan namanya dan formatnya, width untuk mengatur ukuran potonya.
  11. <tr valign='middle' align='left'> </b>fungsinya sama untuk memberi garis cuman ada tambahanya "valign='middle' " fungsinya supaya tulisan yang kita tulis posisinya tidak tterlalu bawah dan tidak terlalu atas jadi di tengah-tengah, kemudian untuk "align='left' fungsinya supaya tulisan selalu berada di sebelah kiri.
  12. <td rowspan='2'></b> fungsi dari sintak ini adalah untuk menggabungkan 2 baris kebawah menjadi 1.
  13. <td colspan='2'></b>fungsinya hampir sama untuk menggabungkan cuman kalo yang ini untuk ke samping (bila baris yang akan kita gabungkan lebih dari 2 maka kita tinggal mengganti nilainya saja bisa di sesuaikan berapa banya kita akan menggabungkanya.
  14. <li type='square'></b><<b>/ul> </b>fungsinya untuk memberi point pada tiap tulisan untuk type nya kita bisa merubahnya sesuai yang kita inginkan (circle,disc,square).
  15. <a href='http://tanyamuhammadhilmi.blogspot.com'>tanyamuhammadhilmi.blogspot.com</a> fungsinya bilamana kita akan membuat link ke file html/php/asp lainya atau bisa juga ke situs-situs yang sudah ada bila kita ingin merubahnya kita cukup mencantumkan alamatnya di teks "href='http://situs.yang.dituju.com ' "
  16. <marquee>berfungsi bila mana kita ingin membuat tulisan berjalan.
  17. <font color='red'>untuk memberi warna pada tulisan.
  18. </table></center></body></html> adalah untuk menutup/akhiran bila kita telah membuat sebuah listing program bila kita telah mebuat suatu listing pasti selalu di akhiri dengan " </ "

mukin di cukupkan sekian dulu mudah-mudahan dapat bermanfaat.



Tempat berbagi Informasi
Muhammad Hilmi Ahadiat
by : Muhammad Hilmi Ahadiat

0 Response to " Membuat Tabel Biodata sederhana di HTML "

Post a Comment

Silahkan untuk berkomentar apabila ada yang tidak dimengerti!!
Tapi tetap jaga kesopanan.

Subscribe to: Post Comments ( Atom )