Table

จาก OpenTLE Wiki

การใช้ภาษา HTML กับ Wikicode

โดยปกติการสร้างตารางในวิกิสามารถสร้างด้วยภาษา HTML แต่ในอีกรูปแบบหนึ่งสามารถใช้ wikicode เรียกว่า pipe code ซึ่งจะง่ายและกระชับกว่า ดังเปรียบเทียบการใช้ภาษา HTML กับ Wikicode ในการสร้างตารางดังต่อไปนี้

สร้างตารางอย่างง่ายด้วย Wikicode

การสร้างตารางอย่างง่ายด้วย Wikicode สามารถทำได้ดังขั้นตอนต่อไปนี้

• เริ่มต้นคำสั่งสร้างตารางด้วยเครื่องหมาย {| และสิ้นสุดตารางด้วยเครื่องหมาย |}
  
  

• ต้องการเพิ่มชื่อตาราง ใช้เครื่องหมาย |+ ตามด้วยชื่อตาราง ซึ่งชื่อตารางนี้จะปรากฏเหนือหัวตารางที่สร้าง
  
  

• เริ่มสร้างแถวของตารางโดยใช้เครื่องหมาย |- แถวต่อไปหลังเครื่องหมายจะเป็นคำสั่งเริ่มแถวและเนื้อหาในแถว
  
  

• คำสั่งเริ่มแถวใช้เครื่องหมาย |
  
  

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

• หากต้องการเพิ่มชื่อในแต่ละหัวคอลัมน์จะใช้เครื่องหมาย ! แสดงการแยกคอลัมน์แทน |
  
  

• นอกจากการเพิ่มชื่อในแต่ละหัวคอลัมน์แล้ว หากต้องการเพิ่มชื่อแถวยังสามารถใช้เครื่องหมาย ! แทน | ในคอลัมน์แรกเพื่อแสดงชื่อหัวแถวได้
  
  

• จากคำสั่งข้างต้นนี้ เมื่อแสดงผลจะไม่มีการแสดงเส้นแบ่งขอบตาราง ได้แก่
  
  

ดังนั้นเมื่อต้องการให้มีเส้นแบ่งขอบตารางควรใช้คำสั่งเพิ่มเติม เช่น

เมื่อแสดงผลจึงได้ดังนี้

การเพิ่มคุณลักษณะอื่นๆ ให้กับตาราง

การใช้คำสั่งพืนฐานทำให้สามารถสร้างตารางอย่างง่ายได้ แต่หากต้องการเพิ่มคุณลักษณะอื่นๆ เพิ่มเติมจะต้องกำหนดคำสั่งสำหรับคุณลักษณะอื่นๆ เพิ่มด้วย ได้แก่

การกำหนดความกว้างของตาราง

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

{| border="1" cellpadding="2" 
!width="50"|วันที่
!width="200"|เดือน
!width="200"|ปี
|-
|1 || กรกฎาคม || พ.ศ. 2549
|-
|2 ||กรกฎาคม|| พ.ศ. 2549
|}

การเพิ่มสีในตาราง

ในบางครั้งเราอาจจะต้องการเพิ่มสีในบางส่วนหรือส่วนทั้งหมดของตารางก็สามารถทำได้เช่นกัน โดยเลือกค่ารหัสสีแบบสีมาตรฐาน HTML (ดูข้อมูลเพิ่มเติมได้ที่ สีมาตรฐานของ HTML) ดังตัวอย่างคำสั่งนี้

{| border="1" cellpadding="2" 
!width="50" style="background:#ffdead;"|วันที่
!width="200" style="background:#ffdead;"|เดือน
!width="200" style="background:#ffdead;"|ปี
|-
|style="background:#efefef;"|1 || กรกฎาคม || พ.ศ. 2549
|-
|style="background:#efefef;"|2 ||กรกฎาคม|| พ.ศ. 2549
|}

การผสานเซลล์ตาราง

ในบางกรณีเราอาจจะไม่ต้องการมีจำนวนเซลล์ตารางเท่ากันในทุกแถวหรือคอลัมน์ ก็สามารถใช้คำสั่งเพื่อผสานเซลล์ได้เช่นกัน โดยใช้คำสั่ง "colspan" เพื่อผสานคอลัมน์ของแถว และ "rowspan" เพื่อผสานแถวของคอลัมน์ ดังตัวอย่างต่อไปนี้

{| border="1" cellpadding="5" cellspacing="0" align="center"
|+ตัวอย่างตาราง
|-
! style="background:#efefef;" | หัวคอลัมน์ 1
! colspan="2" style="background:#ffdead;" | หัวคอลัมน์ 2
|-
| คอลัมน์ 1 แถว 1
| คอลัมน์ 1 แถว 2
| rowspan=2 valign="top" |คอลัมน์ 3
|-
| คอลัมน์ 1 แถว 2
| คอลัมน์ 2 แถว 2
|}

การเพิ่มรูปภาพในตาราง

การเพิ่มรูปในตารางสามารถทำได้เช่นเดียวกับการเพิ่มข้อความธรรมดา แต่จะเป็นลักษณะการเพิ่มไฟล์ภาพแทน นอกจากสื่อประเภทภาพแล้วยังสามารถเพิ่มไฟล์ชนิดสื่ออื่นๆ ได้ในลักษณะเช่นเดียวกัน ตัวอย่างเช่นการใช้คำสั่งดังข้างล่างนี้

{| border="1" cellpadding="6" cellspacing="1" align="center"
|+ดอกไม้ประจำจังหวัด
|-
!width="100" style="background:#ffdead;" | ชื่อดอกไม้
!width="120" style="background:#ffdead;" | ประจำจังหวัด
!width="120" style="background:#ffdead;" | ภาพดอกไม้
|-
|ราชพฤกษ์
|ขอนแก่น
|[[ภาพ:Raatchaphruk.jpg|120px|center|ราชพฤกษ์]] 
|-
|แก้ว
|สระแก้ว
|[[ภาพ:kxxw.JPG|120px|center|แก้ว]] 
|}

จะได้ผลลัพธ์ตารางดังต่อไปนี้

ดอกไม้ประจำจังหวัด

ชื่อดอกไม้	ประจำจังหวัด	ภาพดอกไม้
ราชพฤกษ์	ขอนแก่น
แก้ว	สระแก้ว

การสร้างตารางซ้อนตาราง

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

{| border="1" cellpadding="5" cellspacing="0" align="center"
|+'''ตัวอย่างตารางซ้อนตาราง'''
|-
! style="background:#efefef;" | หัวตารางที่ 1
! colspan="2" style="background:#ffdead;" | หัวตารางที่ 2
|-
| แถวที่ 1 คอลัมน์ที่ 1
| แถวที่ 2 คอลัมน์ที่ 1
| rowspan=2 style="border-bottom:3px solid grey;" valign="top" |
right side
|-
| style="border-bottom:3px solid grey;" | แถวที่ 1 คอลัมน์ที่ 2
| style="border-bottom:3px solid grey;" | แถวที่ 2 คอลัมน์ที่ 2
|-
| colspan="3" align="center" |
{| border="0"
|+''ตารางซ้อนตาราง''
|-
| align="center" width="150px" | [[Image:dogtoon01.png]]
| align="center" width="150px" | [[Image:dogtoon02.png]]
|-
| align="center" colspan="2" style="border-top:1px solid red; border-right:1px solid red; border-bottom:2px solid red; border-left:1px solid red;" |
สุนัข
|}
|}

ตัวอย่างตารางซ้อนตาราง

หัวตารางที่ 1	หัวตารางที่ 2
แถวที่ 1 คอลัมน์ที่ 1	แถวที่ 2 คอลัมน์ที่ 1	คอลัมน์ 3
แถวที่ 2 คอลัมน์ที่ 1	แถวที่ 2 คอลัมน์ที่ 2
ตารางซ้อนตาราง สุนัข