การสร้างตาราง
| โครงสร้าง |
| การแก้ไข้หน้าบทความ |
| เทคนิคการแก้ไขหน้า |
เนื้อหา
การใช้ภาษา HTML กับ Wikicode
โดยปกติการสร้างตารางในวิกิสามารถสร้างด้วยภาษา HTML แต่ในอีกรูปแบบหนึ่งสามารถใช้ wikicode เรียกว่า pipe code ซึ่งจะง่ายและกระชับกว่า ดังเปรียบเทียบการใช้ภาษา 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 |
| หัวแถว 2 | คอลัมน์ ข | คอลัมน์ ค |
ดังนั้นเมื่อต้องการให้มีเส้นแบ่งขอบตารางควรใช้คำสั่งเพิ่มเติม เช่น
| {| border="1" |+ ชื่อตาราง |
เมื่อแสดงผลจึงได้ดังนี้
| ชื่อคอลัมน์ 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|แก้ว]]
|}
|
จะได้ผลลัพธ์ตารางดังต่อไปนี้
| ชื่อดอกไม้ | ประจำจังหวัด | ภาพดอกไม้ |
|---|---|---|
| ราชพฤกษ์ | ขอนแก่น | |
| แก้ว | สระแก้ว |
