หน่วยที่ 5

การสร้างตาราง

ผลการเรียนรู้

สร้างตารางและแบ่งคอลัมน์บนเว็บเพจได้

จุดประสงค์

- อธิบายคำสั่งวิธีการสร้างตารางและการแบ่งคอลัมน์บนเว็บเพจได้

- สร้างตารางและแบ่งคอลัมน์บนเว็บเพจได้

การสร้างตารางบนเว็บเพจ

โครงสร้างตารางโดยทั่วไปจะประกอบด้วยแถว (Row) และคอลัมน์ (Column) โดยช่องข้อมูลที่อยู่ในแนวนอนเดียวกัน ก็คือ แถว และช่องข้อมูลที่อยู่ตรงกันในแนวตั้งก็คือ คอลัมน์ การสร้างตารางจะมีการกำหนดขอบเขตของตารางด้วยแท็ก <TABLE> และใช้แอตทริบิวต์ต่าง ๆ ในการกำหนดลักษณะของตารางให้แตกต่างกันออกไปจากปกติ เช่น ตารางที่ไม่มีขอบ ไม่มีสี มีการกำหนดขนาดของขอบ สีขอบ และภาพพื้นหลังตาราง เป็นต้น

1. การกำหนดขอบเขตของตาราง

ในการสร้างตารางจำเป็นต้องมีการกำหนดขอบเขตของตาราง เพื่อบอกตำแหน่ง หรือส่วนที่ปรากฏต่อไปนี้อยู่ในตาราง ซึ่งกำหนดได้โดยการใช้แท็ก TABLE ดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก TABLE

รูปแบบ <table>แท็กที่เกี่ยวข้องกับตารางและข้อมูลในตาราง</table>

ตัวอย่าง <table><tr><td>ช่องที่ 1 ของแถวที่ 1</td></tr></table>

2. จำนวนแถวในตาราง

วิธีการกำหนดแถวในตารางทำได้ด้วยการใช้แท็ก <tr> โดยมีหลักการคือ ต้องการแถวจำนวนกี่แถว ก็ให้ใช้ <tr>..........</tr> เท่ากับจำนวนแถวที่ต้องการ

รูปแบบการใช้งาน

ชื่อแท็ก TR

รูปแบบ <tr>แท็กที่เกี่ยวข้องกับตารางและข้อมูลในตาราง</tr>

ตัวอย่าง <tr><td>ช่องที่ 1 ของแถวที่ 1</td>…</tr>

<tr><td>ช่องที่ 1 ของแถวที่ 2</td>…</tr>

<tr><td>ช่องที่ 1 ของแถวที่ 3</td>…</tr>

3. จำนวนคอลัมน์ ในแต่ละแถว

การแบ่งแต่ละแถวออกเป็นคอลัมน์เราใช้หลักการเดียวกันกับการกำหนดจำนวนแถวในตาราง คือ ต้องการกี่คอลัมน์ให้ใช้แท็ก <td>..............</td> เท่ากับจำนวนที่ต้องการ

รูปแบบการใช้งาน

ชื่อแท็ก TD

รูปแบบ <td>ข้อมูลในตาราง</td>

ตัวอย่าง <td>ช่องที่ 1 ของแถวที่ 1</td>

<td>ช่องที่ 2 ของแถวที่ 1</td>

<td>ช่องที่ 3 ของแถวที่ 1</td>

การสร้างตารางที่มี 3 แถว ๆ ละ 3 คอลัมน์ สามารถทำได้ดังนี้

1. กำหนดขอบเขตของตารางด้วย <table> และปิดด้วย </table>

2. แบ่งตารางออกเป็น 3 แถวโดยใช้ <tr> จำนวน 3 แท็ก

3. แต่ละแถวให้แบ่งออกเป็น 3 คอลัมน์ด้วย <td> โดยให้อยู่ตรงกลางระหว่าง <tr>…<tr> ทั้งหมดจำนวนแถวละ 3 แท็ก

4. ข้อมูลที่ต้องการแสดงในแต่ละช่องของตารางให้เขียนไว้ตรงกลางระหว่าง <td>…</td>

5. ผลจากการสร้างตาราง

การนำไปใช้

<table>

<tr>

<td>ช่องที่ 1 แถวที่ 1</td>

<td>ช่องที่ 2 แถวที่ 1</td>

<td>ช่องที่ 3 แถวที่ 1</td>

</tr>

<tr>

<td>ช่องที่ 1 แถวที่ 2</td>

<td>ช่องที่ 2 แถวที่ 2</td>

<td>ช่องที่ 3 แถวที่ 2</td>

</tr>

<tr>

<td>ช่องที่ 1 แถวที่ 3</td>

<td>ช่องที่ 2 แถวที่ 3</td>

<td>ช่องที่ 3 แถวที่ 3</td>

</tr>

</table>

4. การกำหนดคำหรือข้อความอธิบายตาราง

หากต้องการเขียนข้อความอธิบายตาราง สามารถทำได้ด้วย แท็ก caption ดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก CAPTION

รูปแบบ <caption>ข้อมูลความอธิบายตาราง</caption>

ตัวอย่าง <caption>ตารางแสดงผลการเรียนนักเรียนชั้น ม.1</caption >

การนำไปใช้

การกำหนดคำหรือข้อความอธิบายตาราง สามารถทำได้ดังนี้

<body>

<table>

<caption>ตารางแสดงคะแนนสอบครั้งที่ 1 </caption>

<tr><td>ช่องที่ 1 แถวที่ 3</td>…</tr>

<tr><td>ช่องที่ 2 แถวที่ 3</td>…</tr>

<tr><td>ช่องที่ 3 แถวที่ 3</td>…</tr>

</table>

</body>

5. การแสดงเส้นขอบตาราง

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

รูปแบบการใช้งาน

ชื่อแอตทริบิวต์ BORDER

รูปแบบ <table border=ขนาดเป็นพิกเซล>….......</table>

ตัวอย่าง <table border=1> .........</table>

การนำไปใช้

การกำหนดให้เส้นขอบมีขนาด 1 พิกเซล สามารถทำได้ดังนี้

<body>

<tr><td>ช่องที่ 1 แถวที่ 3</td>…</tr>

<tr><td>ช่องที่ 2 แถวที่ 3</td>…</tr>

<tr><td>ช่องที่ 3 แถวที่ 3</td>…</tr>

</table>

</body>

6. การเปลี่ยนสีเส้นขอบของตาราง

เราสามารถเปลี่ยนสีของเส้นที่เป็นตารางจากสีดำเป็นสีอื่นได้ โดยใช้อินทริบิวต์ bordercolo ซึ่งมีรูปแบบการใช้งานเป็นดังนี้

รูปแบบการใช้งาน

ชื่อแอตทริบิวต์ BORDERCOLOR

รูปแบบ <table bordercolor=ชื่อสีหรือค่าสี>….....</table>

ตัวอย่าง <table bordercolor=green> .........</table>

การนำไปใช้

การกำหนดให้เส้นขอบของตารางมีสีเขียว สามารถทำได้ดังนี้

<body>

<tr><td>ช่องที่ 1 แถวที่ 3</td>…</tr>

<tr><td>ช่องที่ 2 แถวที่ 3</td>…</tr>

<tr><td>ช่องที่ 3 แถวที่ 3</td>…</tr>

</table>

</body>

7. การกำหนดขนาดของตาราง

ขนาดของตารางสามารถกำหนดได้ทั้งความกว้างและความสูง ลักษณะทั้งสองของ ตารางจะกำหนดได้ด้วยแอตทริบิวต์ width และ height ซึ่งมีรูปแบบการใช้งานเป็นดังนี้

รูปแบบการใช้งาน

ชื่อแอตทริบิวต์ WIDTH, HEIGHT

รูปแบบ <table width=ความกว้างเป็นเปอร์เซ็นต์หรือพิกเซล

height=ความสูงเป็นเปอร์เซ็นต์หรือพิกเซล>….........</table>

ตัวอย่าง <table width=45% height=150> .........</table>

การนำไปใช้

การกำหนดขนาดของตาราง สามารถทำได้ดังนี้

<body>

</table>

</body>

8. การกำหนดตำแหน่งแสดงตาราง

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

รูปแบบการใช้งาน

ชื่อแอตทริบิวต์ ALIGN

รูปแบบ <table align=left หรือ right หรือ center>.....…...</table>

ตัวอย่าง <table align=center> .........</table>

การนำไปใช้

การกำหนดตำแหน่งแสดงตารางให้แสดงผลกลางหน้าเว็บเพจ สามารถทำได้ดังนี้

<body>

</table>

</body>

9. การกำหนดสีพื้นให้ตาราง

การกำหนดรูปแบบพื้นหลังให้กับตารางนั้น คล้ายกับการกำหนดพื้นหลัง ของเว็บเพจมาก คือ สามารถกำหนดได้ ทั้งสีพื้นและรูปพื้น การกำหนดสีพื้นนั้นกำหนดได้ด้วย แอตทริบิวต์ bgcolor ดังนี้

รูปแบบการใช้งาน

ชื่อแอตทริบิวต์ BGCOLOR

รูปแบบ <table bgcolor=ชื่อสีหรือค่าสี >…</table>

ตัวอย่าง <table bgcolor=cyan> .........</table>

การนำไปใช้

การกำหนดสีพื้นให้ตาราง สามารถทำได้ดังนี้

<body>

</table>

</body>

10. การกำหนดพื้นหลังตารางเป็นรูปภาพ

นอกจากการกำหนดสีพื้นให้กับตารางได้แล้ว ยังสามารถเปลี่ยนพื้นหลังของตารางเป็นรูปภาพได้ด้วยการใช้งานแอตทริบิวต์ background ของ <table> ทำได้ดังนี้

รูปแบบการใช้งาน

ชื่อแอตทริบิวต์ BACKGROUND

รูปแบบ <table background=ชื่อไฟล์รูปภาพ> .....</table>

ตัวอย่าง <table background=bd125.jpg> ...........</table>

การนำไปใช้

การกำหนดรูปภาพให้เป็นพื้นหลังของตาราง สามารถทำได้ดังนี้

<body>

</table>

</body>

11. การตั้งระยะห่างระหว่างช่องในตาราง

ระยะห่างระหว่างช่องในตารางจะมีขนาดเท่ากับ ระยะจากเส้นขอบด้านนอกของตารางถึงเส้นขอบของช่องในตาราง โดยปกติถ้าไม่ได้กำหนด ระยะดังกล่าวจะมีค่าประมาณ 2 พิกเซล แต่ถ้าต้องการกำหนดระยะห่างให้กับตาราง เราจะกำหนดด้วยแอตทริบิวต์ cellspacing ดังนี้

รูปแบบการใช้งาน

ชื่อแอตทริบิวต์ CELLSPACING

รูปแบบ <table cellspacing=ระยะห่างเป็นพิกเซล> …</table>

ตัวอย่าง <table cellspacing =12> .........</table>

การนำไปใช้

การกำหนดให้ระยะห่างระหว่างช่องในตารางให้ห่างกันเท่ากับ 12 พิกเซล สามารถทำได้ดังนี้

<body>

</table>

</body>

12. การตั้งระยะห่างระหว่างขอบกับข้อมูลในช่องตาราง

หลังจากที่กำหนดให้ช่องของตารางห่างกันแล้ว เราสามารถเปลี่ยนแปลงระยะห่าง จากเส้นขอบของช่องในตารางถึงข้อมูลในช่องนั้น ๆ ได้ด้วยแอตทริบิวต์ cellpadding โดยปกติถ้าไม่มีการกำหนดระยะห่างจะเท่ากับ 1 พิกเซล ดังนี้

รูปแบบการใช้งาน

ชื่อแอตทริบิวต์ CELLPADDING

รูปแบบ <table cellpadding=ระยะห่างเป็นพิกเซล> .....</table>

ตัวอย่าง <table cellpadding =12> .........</table>

การนำไปใช้

การกำหนดให้ระยะห่างระหว่างขอบของตารางกับข้อมูลในตารางเท่ากับ 12 พิกเซล สามารถทำได้ดังนี้

<body>

</table>

</body>

13. การกำหนดรูปแบบการขีดเส้นขอบนอกของตาราง

ปกติเส้นขอบตารางจะไม่ปรากฏ แต่ถ้าต้องการให้ปรากฏเราต้องใช้แอตทริบิวต์ border เส้นขอบก็จะปรากฏทั้ง 4 ด้าน ในบางครั้งเราอาจต้องการให้เส้นขอบแสดงบางเส้นเท่านั้น ก็สามารถทำได้ด้วยแอตทริบิวต์ FRAME ดังนี้

รูปแบบการใช้งาน

ชื่อแอตทริบิวต์ FRAME

รูปแบบ <table frame=รูปแบบที่ต้องการ> .......</table>

ตัวอย่าง <table frame=rhs> .........</table>

ค่าที่สามารถกำหนดให้แอตทริบิวต์ frame เพื่อกำหนดรูปแบบที่ต้องการ มีดังนี้

void = เป็นค่าปกติไม่มีการขีดเส้นขอบ

above = เส้นขอบด้านนอกจะปรากฏเฉพาะด้านบนเท่านั้น

below = เส้นขอบจะปรากฏเฉพาะด้านล่างเท่านั้น

hsides = ใช้ขีดเส้นในแนวนอนเฉพาะด้านบนและด้านล่าง

vsides = ใช้ขีดเส้นเฉพาะด้านซ้ายและด้านขวา

lhs = เส้นขอบด้านนอกจะปรากฏเฉพาะด้านซ้าย

rhs = เส้นขอบด้านขวาจะปรากฏเพียงด้านเดียวเท่านั้น

border = เส้นขอบจะปรากฏทั้งสี่ด้าน คือ ซ้าย ขวา บน และด้านล่าง

box = ให้ผลเช่นเดียวกับ border

การนำไปใช้

การกำหนดเส้นขอบด้านนอกเฉพาะแนวนอน สามารถทำได้ดังนี้

<body>

</table>

</body>

14. การกำหนดตำแหน่งข้อมูลของแถวในตาราง

การกำหนดตำแหน่งข้อมูลของแถวในตาราง สามารถทำได้ด้วยแอตทริบิวต์ ALIGN ค่าที่สามารถกำหนดได้ คือ

align เป็นการกำหนดการจัดวางตำแหน่งของข้อมูล คือ

left วางข้อมูลให้ชิดซ้ายของตาราง

right วางข้อมูลให้ชิดขวาของตาราง

center วางข้อมูลให้อยู่กึ่งกลางของตาราง

รูปแบบการใช้งาน

ชื่อแอตทริบิวต์ ALIGN

รูปแบบ <tr align=ตำแหน่งที่ต้องการ> <td>…</td></tr>

ตัวอย่าง <tr align=center><td> ....</td></tr>

การนำไปใช้

การกำหนดตำแหน่งข้อมูลของแถวในตาราง สามารถทำได้ดังนี้

<body>

</tr>

</table>

</body>

15. การกำหนดสีให้แถวของตาราง

การกำหนดสีให้แถวของตาราง สามารถทำได้ด้วยแอตทริบิวต์ BGCOLOR ดังนี้

รูปแบบการใช้งาน

ชื่อแอตทริบิวต์ BGCOLOR

รูปแบบ <tr bgcolor=ชื่อสีหรือค่าสีที่ต้องการ> <td>…</td></tr>

ตัวอย่าง <tr align=center bgcolor=#ffff99><td> ....</td></tr>

การนำไปใช้

การกำหนดสีในแถวตาราง สามารถทำได้ดังนี้

<body>

</table>

</body>

16. การกำหนดตำแหน่งข้อมูลในเซลล์

การกำหนดตำแหน่งข้อมูลในเซลล์ สามารถทำได้ด้วยแอตทริบิวต์ ALIGN ค่าที่สามารถกำหนดได้ คือ

align เป็นการกำหนดการจัดวางตำแหน่งของข้อมูล คือ

left วางข้อมูลให้ชิดซ้ายของตาราง

right วางข้อมูลให้ชิดขวาของตาราง

center วางข้อมูลให้อยู่กึ่งกลางของตาราง

รูปแบบการใช้งาน

ชื่อแอตทริบิวต์ ALIGN

รูปแบบ <td aling=ตำแหน่งที่ต้องการ> </td>

ตัวอย่าง <tr><td align=right> ....</td></tr>

การนำไปใช้

การกำหนดตำแหน่งข้อมูลในเซลล์ สามารถทำได้ดังนี้

<body>

<tr ><td align=center>คะแนน</td></tr>

</table>

</body>

17. การกำหนดสีให้เซลล์

การกำหนดสีพื้นให้เซลล์ ของตารางภายในแถวนั้น สามารถทำได้ด้วยแอตทริบิวต์ BGCOLOR ดังนี้

รูปแบบการใช้งาน

ชื่อแอตทริบิวต์ BGCOLOR

รูปแบบ <td bgcolor=ชื่อสีหรือค่าสี>…</td>

ตัวอย่าง <tr><td bgcolor=pink> ....</td></tr>

การนำไปใช้

การกำหนดสีให้เซลล์ สามารถทำได้ดังนี้

<body>

<tr ><td align=center bgcolor=pink>คะแนน</td> </tr>

</table>

</body>

18. การกำหนดรูปภาพในเซลล์

การกำหนดรูปภาพให้เซลล์ ของตารางภายในแถวนั้น สามารถทำได้ด้วยแอตทริบิวต์ BACKGROUND ดังนี้

รูปแบบการใช้งาน

ชื่อแอตทริบิวต์ BACKGROUND

รูปแบบ <td background=ชื่อไฟล์รูปภาพ>…</td>

ตัวอย่าง <tr><td background=bg8.gif> ....</td></tr>

การนำไปใช้

การกำหนดรูปภาพให้เซลล์ สามารถทำได้ดังนี้

<body>

<tr ><td align=center background=bg8.gif>คะแนน</td></tr>

</table>

</body>

19. การกำหนดสีตัวอักษรในเซลล์

การกำหนดให้ตัวอักษรในตารางมีสี สามารถทำได้ด้วยแอตทริบิวต์ FONT COLOR ดังนี้

รูปแบบการใช้งาน

ชื่อแอตทริบิวต์ FONT COLOR

รูปแบบ <td font color=ชื่อสีหรือค่าสี>…</font></td>

ตัวอย่าง <tr><td font color=redf> ....</td></tr>

การนำไปใช้

การกำหนดสีตัวอักษรให้เซลล์ สามารถทำได้ดังนี้

<body>

<tr ><td align=center background=bg8.gif font color=red>คะแนน</td></tr>

</table>

</body>

20. การรวมเซลล์ในคอลัมน์

การรวมเซลในคอลัมน์ สามารถทำได้ด้วยแอตทริบิวต์ COLSPAN มีรูปแบบดังนี้

รูปแบบการใช้งาน

ชื่อแอตทริบิวต์ COLSPAN

รูปแบบ <td colspan=จำนวนคอลัมน์ที่จะรวม>…</td>

ตัวอย่าง <tr><td colspan=2> ..........</td></tr>

การนำไปใช้

การรวมเซลล์ในคอลัมน์ สามารถทำได้ดังนี้

<body>

<tr ><td colspan=2 align=center>คะแนน</td></tr>

</table>

</body>

21. การรวมเซลล์ในแถว

การรวมเซลล์ในแถว สามารถทำได้ด้วยแอตทริบิวต์ ROWSPAN มีรูปแบบดังนี้

รูปแบบการใช้งาน

ชื่อแอตทริบิวต์ ROWSPAN

รูปแบบ <td rowspan=จำนวนแถวที่จะรวม>........</td>

ตัวอย่าง <tr><td rowspan=2> ....</td></tr>

การนำไปใช้

การรวมเซลล์ในแถว สามารถทำได้ดังนี้

<body>

<tr ><td rowspan=2 align=center>คะแนน</td></tr>

</table>

</body>

22. การกำหนดความกว้างของคอลัมน์

การกำหนดความกว้างของคอลัมน์เดียวกันในทุก ๆ แถวให้มีความกว้างเท่ากันเราสามารถกำหนดได้ด้วย <colgroup> โดยมีรูปแบบการทำงานดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก COLGROUP

ชื่อแอตทริบิวต์ SPAN, WIDTH

รูปแบบ <colgroup span=จำนวนคอลัมน์ width=ความกว้างเป็นเปอร์เซ็นต์หรือพิกเซล>

</colgroup>

ตัวอย่าง <colgroup span=1 width=100></colgroup>

การนำไปใช้

การกำหนดความกว้างของคอลัมน์ให้มีความกว้าง 100 พิกเซล จำนวน 1 คอลัมน์ สามารถทำได้ดังนี้

<body>

</table>

</body>

การใช้ <colgroup> ใน <table>…</table> ควรใส่ <colgroup> ในตำแหน่งหลังแท็กเปิดของ <table>

23. การปรับความกว้างของคอลัมน์ให้ต่างกัน

การใช้ <colgroup> กำหนดความกว้างของคอลัมน์แล้ว ยังสามารถใช้ <col> เพื่อกำหนดความกว้างให้ต่างกันได้ ซึ่งต้องกำหนดระหว่าง <colgroup>…..</colgroup> ดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก COL

ชื่อแอตทริบิวต์ SPAN, WIDTH

รูปแบบ <col span=จำนวนคอลัมน์ width=ความกว้างเป็นเปอร์เซ็นต์หรือพิกเซล>

ตัวอย่าง <colgroup>

</colgroup>

การนำไปใช้

การกำหนดความกว้างของ 2 คอลัมน์แรกเท่ากับ 100 และคอลัมน์ที่ 3 กว้างเท่ากับ 250 สามารถทำได้ดังนี้

<body>

</table>

</body>

24. การจักตำแหน่งข้อมูลภายในช่องตามแนวตั้ง

การกำหนดตำแหน่งของข้อมูลในแนวตั้ง สามารถทำได้ด้วยแอตทริบิวต์ Valign ดังนี้

รูปแบบการใช้งาน

ชื่อแอตทริบิวต์ VALIGN

รูปแบบ <td valign=top หรือ middle หรือ bottom>…</td>

ตัวอย่าง <td valign=top>…</td>

การนำไปใช้

การจัดตำแหน่งข้อมูลภายในช่องตามแนวตั้ง สามารถทำได้ดังนี้

<body>

<tr><td> height=100 align=center valign=top>ช่องที่ 1 และแถวที่ 1</td></tr>

</table>

</body>

25. การตั้งชื่อหัวข้อให้แต่ละคอลัมน์

การตั้งชื่อหัวข้อให้แต่ละคอลัมน์ทำได้โดยการเปลี่ยนจากการใช้ <td> เป็น <th>ในทุกช่องของแถวแรก ดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก VALIGN

รูปแบบ <th>ชื่อหัวข้อ</th

ตัวอย่าง <th>หัวข้อของคอลัมน์ที่ 1><th>

การนำไปใช้

การตั้งชื่อหัวข้อให้คอลัมน์ สามารถทำได้ดังนี้

<body>

<tr><th>หัวข้อของคอลัมน์ที่ 1</th>

<th>หัวข้อของคอลัมน์ที่ 2</th></tr>

</table>

</body>