การสร้างตารางพื้นฐาน | การจัดการข้อความและรูปภาพ | การจัดการตารางที่ซับซ้อน

ในบทนี้ เป็นเทคนิคขั้นสูงที่มีความสำคัญมากในการควบคุม และออกแบบหน้าเว็บเพจให้ดูดี เป็นกลุ่ม หมวดหมู่ ซึ่งผู้จัดทำเว็บเพจระดับแนวหน้า ทั้งไทยและต่างประเทศ นิยมนำมาใช้ในการควบคุมการแสดงผลให้สวยดูดี เช่น เว็บไซต์ CNN.com, Sanook.com และเว็บอื่นๆ อีกมาก

Tables : การสร้างตาราง

ตารางจะควบคุมการแสดงผลของข้อความ รูปภาพ ปุ่มเมนู ต่างๆ ให้รวมเป็นกลุ่ม ในเว็บเพจที่ใช้เทคนิคนี้ แม้ว่าเราจะมองไม่เห็นเส้นขอบตาราง (เพราะกำหนดให้ซ่อนเส้นขอบไว้) แต่เราสามารถมองเห็นขอบเขตของตารางช่องต่างๆ ได้ ซึ่งเราจะได้ศึกษาเทคนิควิธีการในบทนี้และบทต่อๆ ไป

การสร้างตารางจะเริ่มต้นด้วยคำสั่ง <TABLE> ... </TABLE> ภายในจะบรรจุคำสั่งกำหนดการสร้างแถว (table rows) คือ <TR> ... </TR> และคำสั่งกำหนดช่องเก็บข้อมูล (table data) คือ <TD> ... </TD> ตัวอย่างเป็นการสร้างตาราง 2 แถว 2 คอลัมน์
 

ถ้าดูจากการแสดงผลฝั่งขวาแล้วจะเห็นว่า ไม่เห็นมีตารางอะไรเลย เห็นเพียงข้อความ 4 ชุดในสองแถวเท่านั้นเอง แต่ในความเป็นจริงมีตารางอยู่ แต่ไม่แสดงเส้นขอบ ซึ่งในคำสั่ง <TABLE> เองเราสามารถเพิ่มคุณสมบัติการแสดงเส้นขอบด้วยการเพิ่ม border="x" เมื่อ x เป็นตัวเลขขนาดพิกเซล (ปกติถ้าไม่กำหนดจะมีค่าเป็น 0)
 

Specifying table sizes : การกำหนดความกว้างของตาราง

เราสามารถกำหนดความกว้างของตาราง ด้วยการกำหนดค่าในหน่วยเปอร์เซนต์ของหน้าจอ (ความกว้างจะขยายตามขนาดหน้าต่างบราวเซอร์) และในหน่วยพิกเซล (ความกว้างจะคงที่ไม่ขยายตามบราวเซอร์) ด้วยการเพิ่มส่วนขยาย WIDTH="x" เข้าไปภายในคำสั่ง <TABLE> เช่นเดียวกับการแสดงเส้นขอบ

เราสามารถกำหนดความสูงของตารางได้เช่นเดียวกัน ด้วยการระบุส่วนขยายเป็น HEIGHT="x" แต่ค่า x ต้องเป็นหน่วยพิกเซลเท่านั้น จากตัวอย่างด้านบนจะเห็นว่า ในตารางแต่ละแถวและแต่ละคอลัมน์จะแบ่งออกเป็นสองส่วน เท่ากันโดยอัตโนมัติ

แต่อย่างไรก็ตาม ความกว้างและความสูงของตาราง อาจจะขยายออกไปให้พอดีกับจำนวนตัวอักษร หรือขนาดของรูปที่ใหญ่เกินกว่าขนาดของตารางได้ (ควรระวังในการกำหนดขนาด)

Text alignment in table cells : การกำหนดการจัดวางข้อความ

โดยปกติเมื่อป้อนข้อความในตาราง เราจะเห็นข้อความปรากฏทางด้านซ้ายของตาราง เราสามารถกำหนดให้ข้อความอยู่ในตารางตามแนวนอน โดยใช้ส่วนขยาย ALIGN="LEFT/CENTER/RIGHT" (เลือกตำแหน่งตามที่ต้องการจากคำทั้ง 3) ถ้าไม่กำหนดตำแหน่ง ค่าปกติจะเป็นซ้าย (left)
            <TD ALIGN="LEFT"> หรือ <TD ALIGN="CENTER"> หรือ <TD ALIGN="RIGHT">

นอกจากการกำหนดตำแหน่งข้อความในแนวนอนแล้ว ยังสามารถกำหนดตำแหน่งตามแนวตั้งได้เช่นกัน โดยใช้ส่วนขยาย VALIGN="TOP/MIDDLE/BOTTOM" (เลือกตำแหน่งตามที่ต้องการจากคำทั้ง 3) ถ้าไม่กำหนดตำแหน่ง ค่าปกติจะเป็นซ้าย (middle)
            <TD VALIGN="TOP"> หรือ <TD VALIGN="MIDDLE"> หรือ <TD ALIGN="BOTTOM">

Images in table cells : การแทรกภาพในตาราง

อย่างที่บอกไว้แล้วว่า ตาราง สามารถที่จะควบคุมตำแหน่งของรูปภาพ และข้อความให้อยู่ในที่ที่เราต้องการได้ การแทรกรูปภาพเราจะแทรกเข้าไปในเซลใดๆ ก็ได้ตามต้องการ โดยยังใช้คำสั่ง <IMG> แทรกระหว่าง <TD> ... </TD>

เนื้อหาในหน้านี้เป็นการเริ่มต้นสร้างตารางแบบง่ายๆ ไม่ซับซ้อน ในหน้าต่อๆ ไปเราจะเพิ่มรายละเอียดเพื่อการตกแต่ง จัดการแสดงผลของตารางให้ดูดี เพื่อให้การศึกษาในหน้าต่อไปทำได้ง่ายขึ้น คุณควรทบทวนการสร้างตารางจากคำสั่งต่างๆ ที่ผ่านมาอีกสักรอบ ลุยกันได้เลย

END : สรุปคำสั่งที่ใช้ในบทนี้

Next