Image_01 Image_02 Image_03
Krumontree.com Krumontree.com Krumontree.com
Home
Internet and Browser
Create and Design
Basic HTML
Beautiful Images
Control with Table
Links to the others
More tips and Tricks
FTP to Web Hosting
left_bottom

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

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

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

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

ในตัวอย่างข้างบน เป็นการกำหนดสีของตารางทั้งหมด เราสามารถกำหนดสีให้แต่ละแถวมีความแตกต่างกันได้ ด้วยการเพิ่มคุณสมบัติ 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>
AB
CD

ในทำนองเดียวกัน หากเราต้องการเปลี่ยนสีเฉพาะช่องใดช่องหนึ่ง ก็สามารถทำได้ ด้วยการนำเอาคุณสมบัติของพื้นสี 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>
AB
CD

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

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

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

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

ตารางขนาด 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>
ABC
DEF

จากตัวอย่างโค๊ดคำสั่งด้านบนจะเห็นว่า การแสดงผลของแถวแรกผิดพลาด เพราะช่อง 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>
ABC
DEF

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

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

ตารางขนาด 2*3 การรวมแถวในตาราง

รูปแบบคำสั่งการแสดงผล
<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>
ADBC
EF

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

   

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

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

การใช้ตารางควบคุมในหน้าเว็บ CNN.com

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

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

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

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

Click to TOP

Your visitor no.
Create & Design Web Page with Basic HTML & Tools
Author : KruMontree Kotkanta     e-M@il : webmaster at krumontree.com