ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 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>

ผลลัพธ์ที่ได้คือ

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 21 พฤศจิกายน 2561
โดย pprn พ 21 พ.ย. 2018 10:15 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
1
พ 21 พ.ย. 2018 10:15 am โดย pprn
งานประจำวันที่ 21 พฤศจิกายน 2561
โดย tatiya พ 21 พ.ย. 2018 10:09 am บอร์ด M065 - ตติยะ นาชัย
0
3
พ 21 พ.ย. 2018 10:09 am โดย tatiya
งานประจำวันที่ 21 พฤศจิกายน 2561
โดย prakon พ 21 พ.ย. 2018 9:56 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
0
1
พ 21 พ.ย. 2018 9:56 am โดย prakon
งานประจำวันที่ 21 พฤศจิกายน 2561
โดย tai14 พ 21 พ.ย. 2018 9:53 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
0
1
พ 21 พ.ย. 2018 9:53 am โดย tai14
งานประจำวันที่ 21 พฤษจิกายน 2561
โดย Ittichai_chupol พ 21 พ.ย. 2018 9:49 am บอร์ด M070 - อิทธิชัย ชูผล
0
1
พ 21 พ.ย. 2018 9:49 am โดย Ittichai_chupol
งานประจำวันที่ 21 พฤศจิกายน 2561
โดย จันนุสรณ์ ดีแก่ พ 21 พ.ย. 2018 9:43 am บอร์ด MT28 - จันนุสรณ์ ดีแก่
0
3
พ 21 พ.ย. 2018 9:43 am โดย จันนุสรณ์ ดีแก่
งานประจำวันที่ 21 พฤศจิการยน 2561
โดย ธวัชชัย แสนหาญ พ 21 พ.ย. 2018 9:43 am บอร์ด MT27 - ธวัชชัย แสนหาญ
0
2
พ 21 พ.ย. 2018 9:43 am โดย ธวัชชัย แสนหาญ
งานประจำวันที่ 21 พฤศจิกายน 2561
โดย Aussadawut พ 21 พ.ย. 2018 9:42 am บอร์ด M072 - อัษฎาวุฒิ ยิ่งนคร
0
1
พ 21 พ.ย. 2018 9:42 am โดย Aussadawut
งานประจำวันที่ 21 พฤศจิกายน 2561
โดย nice_13 พ 21 พ.ย. 2018 9:40 am บอร์ด M071 - พิชญ์สินี คงจร
0
2
พ 21 พ.ย. 2018 9:40 am โดย nice_13
ภาษาซี (C/C++) กับ โจทย์ทางคณิตศาสตร์ (3) จงเขียนโปรแกรมรับค่าของมุม เพื่อแสดงค่าของ Sin Cos Tan
โดย Aussadawut อ 20 พ.ย. 2018 11:53 pm บอร์ด Share Knowledge
0
16
อ 20 พ.ย. 2018 11:53 pm โดย Aussadawut
R - mod_mzc_search ปรับ module ให้ใช้งานใน Mooziicart
โดย pprn อ 20 พ.ย. 2018 11:26 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
3
อ 20 พ.ย. 2018 11:26 pm โดย pprn
ภาษาซี (C/C++) กับ โจทย์ทั่วไป (1) รับค่าตัวเลขใดก็ได้ และเมื่อรับค่าเลข 0 ให้จบการทำงานของโปรแกรม...
โดย Aussadawut อ 20 พ.ย. 2018 10:43 pm บอร์ด Share Knowledge
0
15
อ 20 พ.ย. 2018 10:43 pm โดย Aussadawut
R - mod_mzc_latest_products ปรับ module ให้ใช้งานใน Mooziicart
โดย pprn อ 20 พ.ย. 2018 7:19 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
7
อ 20 พ.ย. 2018 7:19 pm โดย pprn
Built-in functions (4)ฟังก์ชัน Strpos
โดย จันนุสรณ์ ดีแก่ อ 20 พ.ย. 2018 6:40 pm บอร์ด PHP Knowledge
0
10
อ 20 พ.ย. 2018 6:40 pm โดย จันนุสรณ์ ดีแก่
Data Time Function เบื้องต้น
โดย จันนุสรณ์ ดีแก่ อ 20 พ.ย. 2018 6:26 pm บอร์ด PHP Knowledge
0
10
อ 20 พ.ย. 2018 6:26 pm โดย จันนุสรณ์ ดีแก่
การโหลด geckodriver
โดย ธวัชชัย แสนหาญ อ 20 พ.ย. 2018 5:32 pm บอร์ด Share Knowledge
0
17
อ 20 พ.ย. 2018 5:32 pm โดย ธวัชชัย แสนหาญ
การติดตั้ง selenium บน PyCharm
โดย ธวัชชัย แสนหาญ อ 20 พ.ย. 2018 4:54 pm บอร์ด Python Knowledge
0
17
อ 20 พ.ย. 2018 4:54 pm โดย ธวัชชัย แสนหาญ
Math Function พร้อมตัวอย่างเบื้องต้น
โดย จันนุสรณ์ ดีแก่ อ 20 พ.ย. 2018 4:50 pm บอร์ด PHP Knowledge
0
12
อ 20 พ.ย. 2018 4:50 pm โดย จันนุสรณ์ ดีแก่
VDO Training RTP
โดย tai14 อ 20 พ.ย. 2018 3:34 pm บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
0
7
อ 20 พ.ย. 2018 3:34 pm โดย tai14
วิธีเชื่อ App ที่เขี่ยนเข้ากับ data
โดย zinxinsin อ 20 พ.ย. 2018 3:11 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
6
อ 20 พ.ย. 2018 3:11 pm โดย zinxinsin