Tableless Layout คืออะไรกันแน่ มาเรียนทำ Web แบบนี้กัน

Tableless Layout คือ การสร้างเว็บไซน์ โดยใช้ table ให้น้อยที่สุดหรือไม่ใช้เลย สำหรับเทคนิค Tableless นี้ บางคนก็เรียกว่า Tableless layout หรือไม่ก็ CSS Layout เพราะเราจะใช้ CSS เข้ามาแสดงบทบาทแทนที่ตารางในการจัดการโครงสร้างเว็บไซต์ โดย CSS นั้นจะทำการควบคุมแท็กต่างๆ เช่น <div> หรือ <span> ว่าควรจะมีขนาดเท่าใด ตำแหน่งอยู่ตรงไหน ใช้รูปแบบอักษรอะไร ขนาดเท่าไร ใช้สีอย่างไร ฯลฯ ดังนั้นการใช้เทคนิค Tableless ในการพัฒนาเว็บไซต์นี้จะได้ผลลัพธ์ที่สำคัญมากประการหนึ่งคือ การแยกแยะส่วนข้อมูล และส่วนที่ใช้ควบคุมการแสดงผลออกจากกัน เมื่อต้องการแก้ไขส่วนของการแสดงผลเราก็เพียงเข้าไปแก้ในส่วนที่ใช้ควบคุม ซึ่งในที่นี้ก็คือ CSS ที่เป็นตัว mock up layout ในทุกๆหน้าเท่านั้นนั้นเอง

แล้วอย่างนี้ควรใช้ Table เมื่อไหรดี

เราจะให้ table ก็ต่อเมื่อ เนื้อหาในเว็บไซน์มีการแสดงผลแบบเป็นแถว เป็นคอลัมน์ แบบเป็นตารางข้อมูล สถิติ คล้ายๆ เอกสารแบบ Excel การใช้ table ก็ยังสะดวกกว่าการใช้ div อย่างมาก

ตัวอย่างการเปรียบเทียบการการเขียนโครงสร้างแบบ Table Layout และ Tableless Layout

การเขียนโครงสร้างแบบ Table

<table width=”100%” >
<tr><td height=”86″>Banner + Logo</td></tr>
<tr><td height=”71″>Menu</td></tr>
<tr>
<td><table width=”100%”>
<tr>
<td height=”152″>Sidebar</td>
<td>Content</td>
</tr>
</table></td>
</tr>
</table>

การเขียนโครงสร้างแบบ Tableless

<div>
<div>Banner + logo</div>
<div>Menu</div>
<div>Sidebar</div>
<div>Content</div>
</div>

Tags: CSS, tableless-layout, web design