รับทำเว็บไซต์ครบวงจร
เลือกภาษา Thai English     facebook
รายการหลัก



บทความ


Page Ranking Tool

Layout


สอน CSS
> Layout



ในหน้าเว็บเพจหนึ่งประกอบไปด้วยส่วนหัวเว็บ (Page Header), ส่วนเนื้อหา และการเชื่อมโยง (Page Body),  และส่วนท้าย (Page Footer)   การจัดสรรพื้นที่ของหน้าเว็บเพจเพื่อแสดงส่วนประกอบเหล่านี้ ทำได้หลายรูปแบบ เช่น แบ่งแบบอิสระ แบ่งแบบ 2 คอลัมน์ และ 3 คอลัมน์   ตามที่ได้พูดถึงในเรื่องการออกแบบเว็บไซต์ (ถ้าจำไม่ได้คลิกที่นี่เพื่ออ่าน) 

ในการลงมือเขียนเว็บเพจจริง   การจัดรูปหน้าเว็บ (Layout) สามารถใช้ Table หรือ ใช้ Div  ในการจัดวางส่วนประกอบของหน้าเว็บ

แต่การใช้ <table> ในการวาง Layout หน้าเว็บเพจ ออกจะผิดวัตถุประสงค์ในการใช้งานของ <table> อยู่บ้าง เนื่องจากที่จริง <table> นั้นใช้ในการแสดงข้อมูลในรูปตาราง 

ปัจจุบันเว็บไซต์ต่างๆ เปลี่ยนจากการใช้ Table จัดวาง Layout ให้หน้าเ็ว็บเพจ มาเป็นแบบ Tableless โดยใช้ <div> และใช้ CSS ในการจัดตำแหน่ง ขนาด และสี ให้กับ tag <div> แทน เพราะมีข้อดีกว่าการใช้ Table 

การใช้ Table จะต้องรอให้โหลดข้อมูลภายใน Table ทั้งหมดก่อน แล้วจึงแสดงผลข้อมูลทั้งหมดออกมาในคราวเดียว ทำให้ต้องรอนาน ไม่เหมือนกับการใช้ Div ที่เมื่อโหลดเสร็จส่วนไหนก่อน ก็แสดงผลส่วนนั้นออกมาเลย 

การใช้ Div ยัง ทำให้สามารถเปลี่ยนแปลง CSS ได้ง่ายกว่า และไม่เยิ่นเย้อเหมือน Table

นอกจากนี้ยังเพิ่มความสามารถในการเข้าถึงข้อมูลให้กับคนพิการทางสายตา ซึ่งจะอาศัยโปรแกรม Screen Readers อ่านเนื้อหาในเว็บให้ฟัง การใช้ Table ซ้อน Table อาจทำให้ Screen Readers อ่านข้อความผิดพลาดได้ แต่หากใช้ CSS เป็นตัวกำหนดรูปแบบ และ กำหนดเนื้อหาตัวหนังสือใน HTML เมื่อถอดตัว CSS ออกจาก HTML เอกสารก็จะแสดงผลไม่ต่างกับ Microsoft Word ที่อ่านง่ายขึ้น และถูกต้องยิ่งขึ้น

Exampleการจัด Layout Page ด้วย Table แบบแบ่งเป็น 2 คอลัมน์
<table style="width:100%">

<tr>
<td colspan="2" style="background-color:#09f; color:#fff">
<h1>Web builder Tutorials</h1>
</td>
</tr>

<tr valign="top">
<td style="background-color:#93C9FF; width:20%;text-align:top; ">
<b>Main Menu</b><br />
HTML<br />
CSS<br />
XHTML<br />
JavaScript
</td>
<td style="height:200px; text-align:top;">
แนะนำการสร้างเว็บไซต์ ตั้งแต่พื้นฐาน สอนเขียนเว็บเพจด้วย HTML, จัดตกแต่งรูปแบบการแสดงผลด้วย CSS และก้าวสู่การสร้างเว็บไซต์แบบมาตรฐานด้วย XHTML สุดท้ายเพิ่มลูกเล่นให้เว็บไซต์ของเราด้วย JavaScript
</td>
</tr>

<tr>
<td colspan="2" style="background-color:#09f; text-align:center; color:#fff">
Copyright © 2009 enjoyday.net
</td>
</tr> 

</table>
Output

Web builder Tutorials

Main Menu
HTML
CSS
XHTML 
JavaScript
แนะนำการสร้างเว็บไซต์ ตั้งแต่พื้นฐาน สอนเขียนเว็บเพจด้วย HTML, จัดตกแต่งรูปแบบการแสดงผลด้วย CSS และก้าวสู่การสร้างเว็บไซต์แบบมาตรฐานด้วย XHTML สุดท้ายเพิ่มลูกเล่นให้เว็บไซต์ของเราด้วย JavaScript
Copyright © 2009 enjoyday.net
Exampleการจัด Layout Page ด้วย Table แบบแบ่งเป็น 3 คอลัมน์
<table style="width:100%">

<tr>
<td colspan="3" style="background-color:#09f; color:#fff">
<h1>Web builder Tutorials</h1>
</td>
</tr>

<tr valign="top">
<td style="background-color:#93C9FF; width:20%;text-align:top; ">
<b>Main Menu</b><br />
HTML<br />
CSS<br />
XHTML<br />
JavaScript
</td>
<td style="height:200px; text-align:top;">แนะนำการสร้างเว็บไซต์ ตั้งแต่พื้นฐาน สอนเขียนเว็บเพจด้วย HTML, จัดตกแต่งรูปแบบการแสดงผลด้วย CSS และก้าวสู่การสร้างเว็บไซต์แบบมาตรฐานด้วย XHTML สุดท้ายเพิ่มลูกเล่นให้เว็บไซต์ของเราด้วย JavaScript
</td>
<td style="background-color:#ffc; width:20%;text-align:top; ">
<b>Advertisment</b>
</td> 
</tr>

<tr>
<td colspan="3" style="background-color:#09f; text-align:center; color:#fff">
Copyright © 2009 enjoyday.net
</td>
</tr>

</table>
Output

Web builder Tutorials

Main Menu
HTML
CSS
XHTML 
JavaScript
แนะนำการสร้างเว็บไซต์ ตั้งแต่พื้นฐาน สอนเขียนเว็บเพจด้วย HTML, จัดตกแต่งรูปแบบการแสดงผลด้วย CSS และก้าวสู่การสร้างเว็บไซต์แบบมาตรฐานด้วย XHTML สุดท้ายเพิ่มลูกเล่นให้เว็บไซต์ของเราด้วย JavaScriptAdvertisment



Short URL click!
<< กลับคืน : เข้าชม 8,328 ครั้ง : ขึ้นไปด้านบน

รับทำเว็บไซต์ รับสร้างเว็บไซต์ รับออกแบบเว็บ รับเขียนเว็บ รับสอนทำเว็บ รับเช่า hosting รับเช่าพื้นที่เว็บไซต์ จดชื่อเว็บ รับโปรโมทเว็บไซต์ รับดูแลเว็บ SiteMap
สปริงเกอร์http://www.xn--22c2c4blb9n.xn--o3cw4h/