ให้เรตสมาชิก: 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>

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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Microsoft Edge ver.Chromium ออกรุ่น Beta มาให้ทดลองใช้แล้ว
โดย chatee supasand พ 21 ส.ค. 2019 6:45 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
2
พ 21 ส.ค. 2019 6:45 pm โดย chatee supasand
google go แอพ Search ที่ใช้ทรัพยากรมือถือของเราน้อยลง(สามารถโหลดในสโตร์ไทยได้แล้ว)
โดย jamepiyawat พ 21 ส.ค. 2019 6:43 pm บอร์ด Share Knowledge
0
3
พ 21 ส.ค. 2019 6:43 pm โดย jamepiyawat
วิธีการทำ Module: Menu แสดงเมนูเป็นแนวยาว
โดย jamepiyawat พ 21 ส.ค. 2019 6:34 pm บอร์ด Joomla Developing Knowledge
0
4
พ 21 ส.ค. 2019 6:34 pm โดย jamepiyawat
วิธีการดาวน์โหลดไฟล์จากลิ้ง share ของ googledrive
โดย jirawoot พ 21 ส.ค. 2019 4:20 pm บอร์ด Python Knowledge
0
6
พ 21 ส.ค. 2019 4:20 pm โดย jirawoot
ถามคำถาม google site สามารถบันทึกเเล้วมาทำทีหลังได้มัย
โดย Anonymous พ 21 ส.ค. 2019 10:59 am บอร์ด Programming - PHP
1
10
พ 21 ส.ค. 2019 12:08 pm โดย mindphp
สอบถามการอัพโหลดวีดีโอโดยใช้ ลิ้ง url
โดย jirawoot พ 21 ส.ค. 2019 10:10 am บอร์ด Programming - C/C++ & java & Python
2
13
พ 21 ส.ค. 2019 6:33 pm โดย jirawoot
งานประจำวันที่ 21 กรกฎาคม 2562
โดย jamepiyawat พ 21 ส.ค. 2019 10:07 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
0
7
พ 21 ส.ค. 2019 10:07 am โดย jamepiyawat
งานประจำวันที่ 21 สิงหาคม 2562
โดย jirawoot พ 21 ส.ค. 2019 10:02 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
1
5
พ 21 ส.ค. 2019 7:25 pm โดย jirawoot
งานประจำวันที่ 21 สิงหาคม 2562
โดย chatee supasand พ 21 ส.ค. 2019 9:57 am บอร์ด MT33 - นายชาตรี สุภาแสน
1
2
พ 21 ส.ค. 2019 7:32 pm โดย chatee supasand
Google เปิดตัว CallJoy ผู้ช่วย AI สำหรับธุรกิจขนาดกลางและขนาดเล็ก
โดย jamepiyawat อ 20 ส.ค. 2019 6:26 pm บอร์ด Share Knowledge
0
30
อ 20 ส.ค. 2019 6:26 pm โดย jamepiyawat
รายละเอียดการขอหนังสือรับรองผลงานจากลูกค้า
โดย EyePornnipa อ 20 ส.ค. 2019 6:11 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
10
อ 20 ส.ค. 2019 6:11 pm โดย EyePornnipa
สอบถามการหมุนไฟล์ PDF ถาวรหน่อยค่ะ
โดย EyePornnipa อ 20 ส.ค. 2019 5:38 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
3
28
อ 20 ส.ค. 2019 5:59 pm โดย chatee supasand
Microsoft จอนำ Notepad ขึ้น store อัพเดตไม่ต้องร Windows อีกต่อไป
โดย chatee supasand อ 20 ส.ค. 2019 5:30 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
13
อ 20 ส.ค. 2019 5:30 pm โดย chatee supasand
วิธีการปรับเปลี่ยนค่าเมื่อมีการ Quote โพสต์ ใน phpbb
โดย Ittichai_chupol อ 20 ส.ค. 2019 5:21 pm บอร์ด PHP Knowledge
0
5
อ 20 ส.ค. 2019 5:21 pm โดย Ittichai_chupol
วิธีการปรับเปลี่ยนค่า โฑสต์ เมื่อมีการ Quote ใน phpbb
โดย Ittichai_chupol อ 20 ส.ค. 2019 5:17 pm บอร์ด PHP Knowledge
0
3
อ 20 ส.ค. 2019 5:17 pm โดย Ittichai_chupol
งานประจำวันที่ 20 กรกฎาคม 2562
โดย jamepiyawat อ 20 ส.ค. 2019 10:09 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
2
11
อ 20 ส.ค. 2019 8:14 pm โดย jamepiyawat
งานประจำวันที่ 20 สิงหาคม 2562
โดย jirawoot อ 20 ส.ค. 2019 10:05 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
1
7
อ 20 ส.ค. 2019 8:01 pm โดย jirawoot
งานประจำวันที่ 20 สิงหาคม 2562
โดย chatee supasand อ 20 ส.ค. 2019 9:58 am บอร์ด MT33 - นายชาตรี สุภาแสน
1
8
อ 20 ส.ค. 2019 7:09 pm โดย chatee supasand
งานประจำวันที่ 20 สิงหาคม 2562
โดย EyePornnipa อ 20 ส.ค. 2019 9:57 am บอร์ด M089 - นางสาวพรนิภา ราชธานี
1
14
อ 20 ส.ค. 2019 7:29 pm โดย EyePornnipa
ชีวิตนักเรียนออสเตรเลีย!!!
โดย aittit จ 19 ส.ค. 2019 9:07 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
13
จ 19 ส.ค. 2019 9:07 pm โดย aittit