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

---

Table background color : ตารางและสีพื้นหลัง

เราสามารถใช้สีเป็นพื้นหลังของตารางได้ ด้วยการกำหนดเพิ่มคุณสมบัติ BGCOLOR="color name" ภายในคำสั่ง <TABLE> ซึ่งจะมีผลกับทุกช่องในตารางนั้น

รูปแบบคำสั่ง	การแสดงผล
<TABLE WIDTH="250" BGCOLOR="#FF0000" HEIGHT="100">     <TR>         <TD WIDTH="50%">A</TD>         <TD WIDTH="50%">B</TD>     </TR>     <TR>         <TD>C</TD>         <TD>D</TD>     </TR> </TABLE>	A B C D

ในตัวอย่างข้างบนเป็นการกำหนดสีของตารางทั้งหมด เราสามารถกำหนดสีให้แต่ละแถวมีความแตกต่างกันได้ด้วยการเพิ่มคุณสมบัติ BGCOLOR="color name" ให้กับคำสั่ง <TR> ดังตัวอย่าง

รูปแบบคำสั่ง	การแสดงผล
<TABLE WIDTH="250" BGCOLOR="#ffff00" HEIGHT="100">     <TR BGCOLOR="#66ff00">         <TD WIDTH="50%">A</TD>         <TD WIDTH="50%">B</TD>     </TR>     <TR BGCOLOR="#ff99ff">         <TD>C</TD>         <TD>D</TD>     </TR> </TABLE>	A B C D

ในทำนองเดียวกัน หากเราต้องการเปลี่ยนสีเฉพาะช่องใดช่องหนึ่งก็สามารถทำได้ ด้วยการนำคุณสมบัติ BGCOLOR= "color name" ไปเพิ่มให้กับคำสั่ง <TD> ก็จะเกิดผลตามที่เราต้องการได้ เช่นเราต้องการให้ช่อง B เป็นสีขาว และช่อง C เป็นสีเทาก็สามารถเปลี่ยนได้ดังตัวอย่าง

รูปแบบคำสั่ง	การแสดงผล
<TABLE WIDTH="250" BGCOLOR="#ffff00" HEIGHT="100">     <TR BGCOLOR="#66ff00">         <TD WIDTH="50%">A</TD>         <TD WIDTH="50%" BGCOLOR="white">B</TD>     </TR>     <TR BGCOLOR="#ff99ff">         <TD BGCOLOR="#808080">C</TD>         <TD>D</TD>     </TR> </TABLE>	A B C D

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

• เมื่อนำไปขยาย <TABLE> จะมีผลทำให้ตารางนั้นทั้งตารางเปลี่ยนสีไปตามค่าสีที่กำหนดไว้
• เมื่อนำไปขยาย <TR> จะมีผลทำให้เฉพาะแถวนั้นมีค่าสีเปลี่ยนไปตามที่กำหนดไว้
• เมื่อนำไปขยาย <TD> จะมีผลทำให้เฉพาะช่อง (หรือเซล) นั้นมีค่าสีเปลี่ยนไปตามที่กำหนดไว้

Column Span : การผนวกช่องเซล (คอลัมน์)

ในบางครั้งเรามีความจำเป็นที่จะต้องรวมเซลภายในแถวเข้าด้วยกัน อย่างตัวอย่างนี้ เรามีตารางชนิด 2*3 จำนวน 6 ช่อง ถ้าเราต้องการผนวกช่อง A และ B เข้าด้วยกัน ในการสร้างตารางก็จะเหลือแถวบนเพียง 2 ช่อง แถวล่างมี 3 ช่อง ดังภาพ

รูปแบบคำสั่ง	การแสดงผล
<TABLE WIDTH="250" BORDER="1" BGCOLOR="#ffff00">     <TR>         <TD>AB</TD>         <TD>C</TD>     </TR>     <TR>         <TD>D</TD>         <TD>E</TD>         <TD>F</TD>     </TR> </TABLE>	AB C D E F

จากตัวอย่างโคีดคำสั่งด้านบนจะเห็นว่า การแสดงผลของแถวแรกผิดพลาด เพราะช่อง AB ไม่ขยายออกไป และช่อง C ก็ไม่ได้อยู่ที่ตำแหน่งริมขอบตาราง (เหนือช่อง F) วิธีการแก้ไขเราจะต้องมีการสั่งให้มีการขยายช่อง AB ออกไปเพื่อให้ผนวกเซลทั้งสองเข้าด้วยกัน โดยใช้คำสั่ง COLSPAN="x" ขยายในคำสั่ง <TD> เมื่อ x คือจำนวนช่องที่ผนวกเข้าด้วยกันดังตัวอย่างข้างล่างนี้

รูปแบบคำสั่ง	การแสดงผล
<TABLE WIDTH="250" BORDER="1" BGCOLOR="#ffff00">     <TR>         <TD COLSPAN="2">AB</TD>         <TD>C</TD>     </TR>     <TR>         <TD>D</TD>         <TD>E</TD>         <TD>F</TD>     </TR> </TABLE>	AB C D E F

Row Span : การผนวกแถวในตาราง

เช่นเดียวกับหัวข้อที่ผ่านมา ในบางครั้งเราก็มีความจำเป็นในการรวมเซลข้ามแถวเข้าด้วยกัน อย่างตัวอย่างนี้ เรามีตารางชนิด 2*3 จำนวน 6 ช่อง ถ้าเราต้องการผนวกช่อง A และ D ซึ่งอยู่คนละแถวเข้าด้วยกัน ในการสร้างตารางก็จะเหลือแถวบน 3 ช่อง โดยช่องแรกจะต้องขยายไปคลุมพื้นที่ในแถวที่สองด้วย ดังนั้นแถวที่สองจึงมีเพียง 2 ช่อง ดังภาพ การขยายแถวลงไปต้องใช้คำสั่ง ROWSPAN="x" ขยายช่องเซล A ในคำสั่ง <TD> เช่นเดียวกัน

รูปแบบคำสั่ง	การแสดงผล
<TABLE WIDTH="250" BORDER="1" BGCOLOR="#ff00ff">     <TR>         <TD ROWSPAN="2">AD</TD>         <TD>B</TD>         <TD>C</TD>     </TR>     <TR>         <TD>E</TD>         <TD>F</TD>     </TR> </TABLE>	AD B C E F

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

Nested Tables : ตารางซ้อนในตาราง

ในบางครั้งการออกแบบหน้าเว็บเพจ เราอาจจะมีความประสงค์ในการควบคุมการแสดงผลที่สลับซับซ้อนลงไป เช่น เราต้องการสร้างเนื้อหาที่มีเส้นกรอบรอบตารางแสดงขอบเขต ในขณะเดียวกัน เราก็ต้องการแทรกรูปภาพและข้อความลงไปภายในเซลของตาราง และต้องการจะตรึงภาพและข้อความนั้นไว้ แต่ไม่ต้องการแสดงเส้นตารางให้ผู้ชมเห็น ดังในภาพข้างล่างนี้นำมาจากเว็บไซต์ www.cnn.com

จากภาพด้านบนจะเห็นว่ามีการแบ่งตารางบรรจุรูปภาพและข้อความเป็น 3 คอลัมน์ และมีหลายแถวเรียงลำดับลงไป (ตัดมาให้เห็น 2 แถว) ถ้าพิจารณาเฉพาะแถวบนจะมี 3 ช่องตาราง คือ OFFBEAT NEWS, BUSINESS NEWS, MORE REPORTS

ถ้าเราพิจารณาเฉพาะส่วน OFFBEAT NEWS ที่วาดเส้นสีเขียวนั้นคือตารางย่อย 1 ตารางมี 2 แถว 3 ช่อง แถวบนมีเพียงหนึ่งช่องใหญ่ จะมีตารางบรรจุเส้นสีแดงและข้อความ TOP DOG และรูปภาพหัวข้อ OFFBEAT NEWS ในแถวที่สองจะมี 2 ช่อง ช่องด้านซ้ายมือจะมีข้อความ และช่องขวามือจะบรรจุภาพสุนัขไว้

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

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

TAGS รายละเอียด BGCOLOR="color name" คุณสมบัติของการกำหนดสีพื้นหลังของตารางที่ให้ผลแตกต่างกันเมื่ออยู่หลังคำสั่งต่างกัน อยู่ในคำสั่ง TABLE สีที่กำหนดจะมีผลกับทั้งตาราง อยู่ในคำสั่ง TR สีที่กำหนดจะมีผลกับแถวนั้นแถวเดียว อยู่ในคำสั่ง TD สีที่กำหนดจะมีผลกับช่องเซลนั้นช่องเดียว COLSPAN="x" คำสั่งผนวกเซลเข้าด้วยกัน (ในแถวเดียวกัน) ค่า x คือจำนวนเซลที่รวมกันตามแนวนอน ROWSPAN="x" คำสั่งผนวกแถวเข้าด้วยกัน ค่า x คือจำนวนแถวที่ผนวกรวมกันตามแนวตั้ง