ยินดีต้อนรับเข้าสู่เว็บการเรียนรู้ เรื่อง การเขียนเว็บเพจด้วยภาษา HTML
 
 
ytการสร้างตาราง


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

ytTable 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> จะมีผลทำให้เฉพาะช่อง (หรือเซล) นั้นมีค่าสีเปลี่ยนไปตามที่กำหนดไว้

Click to TOP
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>
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

Click to TOP
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>
AD B C
E F

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

Click to TOP
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 ช่อง ช่องด้านซ้ายมือจะมีข้อความ และช่องขวามือจะบรรจุภาพสุนัขไว้

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

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


ก่อนหน้านี้
หน้าถัดไป
 
 
เว็บไซต์นี้ แสดงผลได้ดี บน Internet Explorer ความละเอียดที่ 1024 x 760 Text Size Medium
จัดทำเพื่อใช้ประกอบการเรียนการสอนผ่านระบบเครือข่ายอินเทอร์เน็ต
รายวิชา การพัฒนาเว็บเพจด้วยโปรแกรมสำเร็จรูป
โรงเรียนคูซอดประชาสรรค์ อำเภอเมือง จังหวัดศรีสะเกษ
 
SITEMAP