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

Wiki subjects

โครงสร้าง

การเข้าระบบ หน้าเนื้อหา หน้าแก้ไขบทความ หน้าสนทนาผู้ใช้ หน้าบันทึกประวัติการแก้ไข การติดตามเฝ้าดู บันทึกการปรับปรุงเนื้อหา หน้าพิเศษ

การแก้ไข้หน้าบทความ

การเริ่มหน้าบทความ การแก้ไขหน้าพื้นฐาน คำสั่งพื้นฐาน รูปแบบรายการลำดับ คำสั่งพิเศษ หน้าเปลี่ยนทาง การโยกย้ายหน้า การย้อนกลับการแก้ไข เทคนิคต่างๆ

เทคนิคการแก้ไขหน้า

การสร้างตาราง การสร้างลิงก์ การใส่รูปภาพ การแทรกสื่ออื่นๆ การจัดหมวดหมู่ การใช้แม่แบบ แหล่งข้อมูล

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

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

เปรียบเทียบการใช้ภาษา HTML กับ Wikicode ในการสร้างตารางวิกิ

คำสั่ง	HTML	Wikicode
สร้างตาราง	<table>ตาราง</table>	{|ตาราง|}
ชื่อตาราง	<caption>ชื่อตาราง</caption>	|+ชื่อตาราง
เพิ่มแถว	<tr></tr>	|-
คอลัมน์ในแถว	<td>คอลัมน์ 1</td><td>คอลัมน์ 2</td>	|คอลัมน์ 1|คอลัมน์ 2
ชื่อหัวคอลัมน์		ชื่อหัวคอลัมน์	!ชื่อหัวคอลัมน์

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

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

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

{| เริ่มต้นคำสั่งการสร้างตาราง |}

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

{| |+ชื่อตาราง เริ่มต้นคำสั่งการสร้างตาราง |}

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

{| |+ชื่อตาราง |- เริ่มแถวแรก |-เริ่มแถวต่อไป |}

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

{| |+ชื่อตาราง |- |คอลัมน์ที่หนึ่งในแถวแรก |คอลัมน์ที่สองในแถวแรก |- |คอลัมน์ที่หนึ่งในแถวสองมา |คอลัมน์ที่สองในแถวสอง |}

ตัวอย่างตารางที่ได้

แถวที่ 1 คอลัมน์ 1	แถวที่ 1 คอลัมน์ 2
แถวที่ 2 คอลัมน์ 1	แถวที่ 2 คอลัมน์ 2

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

{| |+ ชื่อตาราง |- |คอลัมน์ 1 || คอลัมน์ 2 || คอลัมน์ 3 |- |คอลัมน์ ก |คอลัมน์ ข |คอลัมน์ ค |}

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

{| |+ ชื่อตาราง |- !ชื่อคอลัมน์ 1 !! ชื่อคอลัมน์ 2 !! ชื่อคอลัมน์ 3 |- |คอลัมน์ 1 || คอลัมน์ 2 || คอลัมน์ 3 |- |คอลัมน์ ก |คอลัมน์ ข |คอลัมน์ ค |}

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

{| |+ ชื่อตาราง |- !ชื่อคอลัมน์ 1 !! ชื่อคอลัมน์ 2 !! ชื่อคอลัมน์ 3 |- ! หัวแถว 1 |คอลัมน์ 2 || คอลัมน์ 3 |- ! หัวแถว 2 |คอลัมน์ ข |คอลัมน์ ค |}

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

ชื่อตาราง

ชื่อคอลัมน์ 1	ชื่อคอลัมน์ 2	ชื่อคอลัมน์ 3
หัวแถว 1	คอลัมน์ 2	คอลัมน์ 3
หัวแถว 2	คอลัมน์ ข	คอลัมน์ ค

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

{| border="1" |+ ชื่อตาราง |- !ชื่อคอลัมน์ 1 !! ชื่อคอลัมน์ 2 !! ชื่อคอลัมน์ 3 |- ! หัวแถว 1 |คอลัมน์ 2 || คอลัมน์ 3 |- ! หัวแถว 2 |คอลัมน์ ข |คอลัมน์ ค |}

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

ชื่อตาราง

ชื่อคอลัมน์ 1	ชื่อคอลัมน์ 2	ชื่อคอลัมน์ 3
หัวแถว 1	คอลัมน์ 2	คอลัมน์ 3
หัวแถว 2	คอลัมน์ ข	คอลัมน์ ค

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

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

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

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

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

ตัวอย่างตารางที่ได้

วันที่	เดือน	ปี
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 |}

ตัวอย่างตารางที่ได้

วันที่	เดือน	ปี
1	กรกฎาคม	พ.ศ. 2549
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 |}

ตัวอย่างตาราง

หัวคอลัมน์ 1	หัวคอลัมน์ 2
คอลัมน์ 1 แถว 1	คอลัมน์ 1 แถว 2	คอลัมน์ 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|แก้ว]] |}

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

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

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

กลับไปหน้าคู่มือการใช้งาน