บทที่ 15 HTML Layout
HTML Layout คือการจัดรูปแบบหน้าเว็บเพจ ในการจัดหน้าเว็บเพจมีแท็กที่ใช้กันมากอยู่ 2 แท็ก คือ แท็ก <div> และ แท็ก <table> โดยจะใช้ในการสร้างพื้นหลัง
1. การสร้าง Layout แบบใช้แท็ก <div>
ตัวอย่าง
<html>
<body>
<div = id" style="width:500px">
<div = id" style="background-color:yellow;">
<h1 style="margin-bottom:0;">ภาษาคอมพิวเตอร์</h1></div>
<div id="menu" style="background-color:purple;height:200px;width:100px;float:left;">
<b>เมนู</b><br>
Html<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:pink;height:200px;width:400px;float:left;">
รายละเอียดเพิ่มเติม</div>
</div>
</body>
</html>ผลลัพธ์ที่ได้คือ
2. การสร้าง Layout แบบใช้แท็ก <table>
<html>
<body>
<table width="500" border="15">
<tr>
<td colspan="2" style="background-color:yellow">
<h1>ภาษาคอมพิวเตอร์</h1>
</td>
</tr>
<tr>
<td style="background-color:purple;width:100px;text-align:top;">
<b>เมนู</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:pink;height:200px;width:400px;text-align:top;">
รายละเอียดเพิ่มเติม</td>
</tr>
</body>
</html>ผลลัพธ์ที่ได้คือ
