Dari beberapa postingan sebelumnya, saya telah membagikan berbagai contoh mengenai HTML. Mulai dari Contoh script HTML, CSS, XHTML, HTML5, hingga contoh JavaScript. Namun ada satu hal yang mungkin telah saya lewatkan dalam proses belajar HTML. Ketika saya memulai belajar HTML, setelah mengetahui unsur-unsur HTML, pelajaran selanjutnya adalah membuat tabel. Membuat tabel dengan HTML sebenarnya cukup sederhana, hanya mengandalkan logika saja. (memang dalam proses coding-coding hal yang di utamakan adalah logika, #katanya sih gituuu...). OK. Kembali ke TKP, dalam membuat tabel dengan HTML ini ada beberapa hal yang perlu diperhatikan. Yaitu proses penggabungan kolom(colspan ) dan proses penggabungan garis(rowspan). dalam scriptnya. selain itu ada juga height untuk menentukan tinggi tabel/kolom dalam ukuran piksel, serta width untuk menentukan ukuran lebar tabel/kolom. untuk lebih jelasnya, lihat scriptnya dibawah ini
<!DOCTYPE html>
<html>
<head>
<title>table</title>
</head>
<body>
<table border="1" height="500" width="700" align="center">
<tr align="center">
<td rowspan="2" height="30" width="200"> logo </td>
<td colspan="4" height="50"> header </td>
<tr align="center">
<td height="30"> menu1 </td>
<td height="30"> menu2 </td>
<td height="30"> menu3 </td>
<td height="30"> menu4 </td>
</tr>
<tr align="center">
<td height="30" width="200"> sidebar1</td>
<td colspan="4" rowspan="5" height="500" > artikel </td>
</tr>
<tr align="center">
<td height="30" width="200"> sidebar2 </td>
</tr>
<tr align="center">
<td height="30" width="200"> sidebar3 </td>
</tr>
<tr align="center">
<td height="30" width="200"> sidebar4 </td>
</tr>
<tr align="center">
<td width="200"> sidebar5 </td>
</tr>
<tr align="center">
<td colspan="5" height="50" width="600"> footer </td>
</tr>
</table>
</body>
</html>
dibawah ini hasil pembuatan tabel dengan HTML tadi:
ingin melihat tutorial membuat web(HTML,CSS,JAVASCRIPT,PHP)? lihat situs-situs dibawah ini (recomended)
-http://www.sitepoint.com/
-http://www.quackit.com/
-http://w3schools.com/
0 commen:
Post a Comment