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

ในบทที่แล้วเราได้ทดลองสร้างตารางด้วยคำสั่งพื้นฐานกันไปแล้ว คงจะได้เห็นกันแล้วว่า ตารางมีส่วนสำคัญในการออกแบบหน้าตาเว็บเพจ ช่วยให้การจัดวางตำแหน่งของข้อความ รูปภาพต่างๆ อยู่ในตำแหน่งที่ต้องการได้ ทำให้ดูเป็นหมวดหมู่น่าสนใจ           เราสามารถกำหนดขนาดของตารางเพื่อควบคุมการแสดงผลของหน้าเว็บไซต์ให้คงที่ แม้ผู้ชมจะดูผ่านหน้าจอด้วยขนาดที่มีความละเอียดแตกต่างกัน (640, 800, 1024 หรือมากกว่า) การแสดงผลของเว็บเพจก็จะไม่ผิดเพี้ยนไปจากที่ออกแบบไว้           ในบทนี้เราจะเรียนรู้เพิ่มเติมในเรื่องการจัดวางข้อความและรูปภาพในตาราง ให้แสดงผลสวยงาม กำหนดระยะห่างจากเส้นขอบของตาราง ความกว้างและความสูงของตารางให้เหมาะสมกับรูปภาพ

Cell Width (Cilumn Width) : การกำหนดความกว้างของตาราง

จากบทเรียนที่ผ่านมาเราได้ทดลองสร้างตารางที่มี 2 แถวและ 2 คอลัมน์ กันมาแล้วดังตัวอย่าง

รูปแบบคำสั่ง
<TABLE BORDER="1" WIDTH="95%" HEIGHT="100">     <TR>         <TD align="left" valign="top">ซ้ายบน</TD>         <TD align="right" valign="middle">ขวากลาง</TD>     </TR>     <TR>         <TD align="center" valign="bottom">กลางล่าง</TD>         <TD align="right" valign="top">ขวาบน</TD>     </TR> </TABLE>

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

รูปแบบคำสั่ง
<TABLE BORDER="1" WIDTH="95%" HEIGHT="100">     <TR>         <TD align="left" valign="top" width="35%">ซ้ายบน</TD>         <TD align="right" valign="middle" width="65%">ขวากลาง</TD>     </TR>     <TR>         <TD align="center" valign="bottom">กลางล่าง</TD>         <TD align="right" valign="top">ขวาบน</TD>     </TR> </TABLE>

หมายเหตุ : การกำหนดความกว้างของตารางเราจะกำหนดเฉพาะแถวแรกเพียงแถวเดียว แถวถัดมาจะมีค่าเท่ากับแถวแรกโดยอัตโนมัติ ถ้าในเซลใดไม่มีข้อมูลบรรจุอยู่ เราจะต้องแทรกอักษรว่าง (&nbsp;) ลงไประหว่าง <TD> </TD> อย่างน้อย 1 ตัว เพื่อให้ตารางในช่องนั้นปรากฏเส้นขอบ และมองเห็นช่องว่าง

Cell padding : ระยะห่างจากเส้นขอบของตาราง

เราสามารถกำหนดระยะห่าง ทั้งแนวตั้งและแนวนอนของข้อความและรูปภาพจากเส้นขอบภายในช่องตารางได้ ด้วยการกำหนดค่า CELLPADDING="x" เมื่อ x มีหน่วยเป็นพิกเซล (ค่าปกติถ้าไม่ค่า padding จะมีค่าเป็น 1 เสมอ) ถ้าเราต้องการให้ไม่มีการเว้นระยะจากขอบสามารถกำหนดค่าให้เป็น 0 ได้

รูปแบบคำสั่ง
<TABLE BORDER="1" WIDTH="450" CELLPADDING="10">     <TR>         <TD>ข้อความภายในตารางที่กำหนดระยะห่างจากเส้นขอบ padding ไว้ในตาราง</TD>         <TD><IMG SRC="kerokero.gif" border="1"></TD>     </TR>     <TR>         <TD>ข้อความในตารางที่ระยะห่างเท่ากับ 10 พิกเซล</TD>         <TD>kero</TD>     </TR> </TABLE>

Cell spacing : ระยะห่างระหว่างช่องตาราง

ในการสร้างตารางขนาด 2 แถว 2 คอลัมน์ (4 ช่อง) นั้น ถ้าเราจินตนาการถึงรูปสี่เหลี่ยมใหญ่ที่มีรูปสี่เหลี่ยมเล็ก 4 รูปวางซ้อนกันอยู่จะทำให้เรามองเห็นว่า ในตารางจะมีเส้นขอบอยู่ 2 เส้นคือ เส้นขอบของสี่เหลี่ยมใหญ่ภายนอก และเส้นขอบของสี่เหลี่ยมเล็กที่อยู่ภายใน ระยะห่างระหว่างเส้นขอบทั้งสองนี้เราเรียกว่า Cell spacing ค่าปกติของระยะห่างของเส้นขอบตารางคือ 2 ถ้าเราต้องการเส้นขอบที่บางมากๆ สามารถกำหนดเป็นค่า 0 ได้

รูปแบบคำสั่ง
<TABLE BORDER="3" WIDTH="450" CELLSPACING="10">     <TR>         <TD>ข้อความภายในตารางที่กำหนดระยะห่างจากเส้นขอบ padding ไว้ในตาราง</TD>         <TD><IMG SRC="kerokero.gif" border="1"></TD>     </TR>     <TR>         <TD>ข้อความในตารางที่ระยะห่างเท่ากับ 10 พิกเซล</TD>         <TD>kero</TD>     </TR> </TABLE>

Tables and Images : ตารางและรูปภาพ

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

นอกจากนี้แล้ว ตารางยังใช้ประโยชน์ในการนำเสนอรูปภาพขนาดใหญ่บนหน้าเว็บเพจได้ เนื่องจากการนำภาพขนาดใหญ่ 1 ภาพมาแสดงในหน้าเว็บเพจนั้นจะใช้เวลาในการแสดงผลนาน (จากการโหลดไฟล์จากเครื่องแม่ข่ายมายังเครื่องผู้ชม) จึงต้องใช้เทคนิคในการตัดซอยรูปภาพออกเป็นส่วนๆ ด้วยโปรแกรมตกแต่งภาพ จากนั้นนำภาพขนาดเล็กมาบรรจุลงในช่องตาราง และเพื่อให้การแสดงผลเป็นภาพเพียงภาพเดียวต่อกันเราจะต้องกำหนดระยะห่างระหว่างภาพและขอบตาราง ดังตัวอย่าง

Working with graphic editing programs : การตกแต่งภาพกราฟิก

ในการออกแบบเว็บเพจให้ดูดี มีความสวยงามนั้น เราจำเป็นจะต้องใช้โปรแกรมตกแต่งรูปภาพซึ่งมีอยู่มากมายในท้องตลาด โปรแกรมที่เป็นที่นิยมและถือว่าเป็นสุดยอดของโปรแกรมตกแต่งภาพต้องยกให้ PhotoShop แต่ก็แพงมากเช่นเดียวกัน เราสามารถดาวน์โหลดโปรแกรมเวอร์ชั่นทดลองมาใช้งานได้ หรือจะไปใช้โปรแกรมอื่นๆ เช่น PaintShop Pro, Ulead PhotoImpact มาใช้งานก็ได้

คุณอาจจะไม่เชื่อว่า มีโปรแกรมตกแต่งภาพที่มีคุณสมบัติเทียบเท่ากับ PhotoShop แต่แจกให้ใช้กันฟรีๆ ก็มีเหมือนกันโปรแกรมนี้ชื่อ The Gimp คลิกลองไปดูที่เว็บไซต์นี้ แล้วดาวน์โหลดมาใช้งานกันดู โปรแกรมที่กล่าวถึงเหล่านี้จะช่วยคุณให้สามารถตกแต่ง เพิ่มเติมสีสัน ตัดแยกส่วนภาพ และสร้างภาพกราฟิกตกแต่ง ไตเติ้ล หัวเรื่องและปุ่มกดในส่วนต่างๆ ของเว็บไซต์

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

Next