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

---

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

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

รูปแบบคำสั่ง	คำอธิบาย
<TABLE>...............................</TABLE> <CAPTION>..........................</CAPTION> <TR>........................................</TR> <TH>........................................</TH> <TD>........................................</TD>	คำสั่งที่กำหนดให้บราวเซอร์สร้างตาราง คำสั่งที่ใช้ตั้งชื่อหรือหัวข้อเรื่องให้กับตาราง คำสั่งสำหรับสร้างแถวในตาราง (ROW) คำสั่งสำหรับกำหนดข้อมูลส่วนหัวของตาราง คำสั่งสำหรับสร้างแถวในตาราง (ROW)

ตัวอย่างเป็นการสร้างตาราง 2 แถว 2 คอลัมน์

รูปแบบคำสั่ง	การแสดงผล
<TABLE>     <CAPTION>ชื่อตาราง</CAPTION>     <TR>                <TH> ข้อมูลส่วนหัว1</TH>                <TH> ข้อมูลส่วนหัว2</TH>     <TR>         <TD>ช่องที่ 1</TD><TD>ช่องที่ 2</TD>     </TR>     <TR>         <TD>ช่องที่ 3</TD><TD>ช่องที่ 4</TD>     </TR> </TABLE>	ชื่อตาราง ข้อมูลส่วนหัว1 ข้อมูลส่วนหัว2 ช่องที่ 1 ช่องที่ 2 ช่องที่ 3 ช่องที่ 4

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

รูปแบบคำสั่ง	การแสดงผล
<TABLE BORDER="1" >     <CAPTION>ชื่อตาราง</CAPTION>     <TR>                <TH> ข้อมูลส่วนหัว1</TH>                <TH> ข้อมูลส่วนหัว2</TH>     <TR>         <TD>ช่องที่ 1</TD><TD>ช่องที่ 2</TD>     </TR>     <TR>         <TD>ช่องที่ 3</TD><TD>ช่องที่ 4</TD>     </TR> </TABLE>	ชื่อตาราง ข้อมูลส่วนหัว1 ข้อมูลส่วนหัว2 ช่องที่ 1 ช่องที่ 2 ช่องที่ 3 ช่องที่ 4

หมายเหตุ  คำสั่ง <CAPTION>............</CAPTION> และ <TH>..............</TH>  อาจไม่จำเป็นต้องใส่ก็ได้

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

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

รูปแบบคำสั่ง	การแสดงผล
<TABLE BORDER="1" WIDTH="90%">     <TR>         <TD>ช่องที่ 1</TD><TD>ช่องที่ 2</TD>     </TR>     <TR>         <TD>ช่องที่ 3</TD><TD>ช่องที่ 4</TD>     </TR> </TABLE>	ช่องที่ 1 ช่องที่ 2 ช่องที่ 3 ช่องที่ 4
<TABLE BORDER="1" WIDTH="260" HEIGHT="100">     <TR>         <TD>ช่องที่ 1</TD><TD>ช่องที่ 2</TD>     </TR>     <TR>         <TD>ช่องที่ 3</TD><TD>ช่องที่ 4</TD>     </TR> </TABLE>	ช่องที่ 1 ช่องที่ 2 ช่องที่ 3 ช่องที่ 4

เราสามารถกำหนดความสูงของตารางได้เช่นเดียวกัน ด้วยการระบุส่วนขยายเป็น 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">

รูปแบบคำสั่ง
<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>
การแสดงผล
ซ้ายบน ขวากลาง กลางล่าง ขวาบน

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

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

รูปแบบคำสั่ง
<HTML>     <HEAD>         <TITLE>Images in Table : แทรกรูปภาพในตาราง</TITLE>     </HEAD>     <BODY>         <TABLE BORDER="1">             <TR>                 <TD>                     <IMG SRC="mages/chickenlittle01.gif">                 </TD>                 <TD>                     รูปด้านข้างนี้คือ chickenlittle                 </TD>             </TR>         </TABLE>     </BODY> </HTML>
การแสดงผล
รูปด้านข้างนี้คือ chickenlittle

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

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

TAGS รายละเอียด <TABLE> ... </TABLE> คำสั่งกำหนดการสร้างตาราง ซึ่งในคำสั่งนี้สามารถเพิ่มเติมส่วนขยายให้กับตารางได้อีกมาก เช่น เส้นขอบ สีพื้นตาราง การจัดข้อความทั้งในแนวตั้งและแนวนอน <TR> ... </TR> คำสั่งกำหนดการสร้างแถว (Table Row) <TD> ... </TD> คำสั่งกำหนดช่องตารางหรือเซล หรือคอลัมน์ (Table Data) สำหรับบรรจุข้อมูล ตัวอักษร ภาพ <TH> ... </TH> คำสั่งกำหนดช่องตารางหรือเซล หรือคอลัมน์ที่เป็นหัวตาราง (Table Heading) เหมือนกับ <TD> แต่ข้อความที่บรรจุระหว่างคำสั่งนี้จะเป็นตัวหนาและจัดกึ่งกลางเสมอ