Haiiwiki: การทำตาราง moved to การสร้างตาราง

2008-02-27T03:26:20Z

←รุ่นแก้ไขก่อนหน้า	รุ่นแก้ไขเมื่อ 05:26, 27 กุมภาพันธ์ 2551
(ไม่แตกต่าง)

Haiiwiki เมื่อ 10:02, 14 ธันวาคม 2550

2007-12-14T10:02:15Z

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 12:02, 14 ธันวาคม 2550
บรรทัดที่ 311:		บรรทัดที่ 311:
	\|}		\|}


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

	[[หมวดหมู่:คู่มือการใช้งาน]]		[[หมวดหมู่:คู่มือการใช้งาน]]

Aditep: New page: {{Wiki subject}} ===การใช้ภาษา HTML กับ Wikicode=== โดยปกติการสร้างตารางในวิกิสามารถสร้า...

2007-11-05T06:41:04Z

New page: {{Wiki subject}} ===การใช้ภาษา HTML กับ Wikicode=== โดยปกติการสร้างตารางในวิกิสามารถสร้า...

หน้าใหม่

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

{| border="1" cellpadding="6" cellspacing="1" align="center"
|+เปรียบเทียบการใช้ภาษา HTML กับ Wikicode ในการสร้างตารางวิกิ
|-
!style="background:#ffdead;" | คำสั่ง
!style="background:#ffdead;" | HTML
!style="background:#ffdead;" | Wikicode
|-
|สร้างตาราง
|<nowiki><table>ตาราง</table></nowiki>
|<nowiki>{|ตาราง|}</nowiki>
|-
|ชื่อตาราง
|<nowiki><caption>ชื่อตาราง</caption></nowiki>
|<nowiki>|+ชื่อตาราง</nowiki>
|-
|เพิ่มแถว
|<nowiki><tr></tr></nowiki>
|<nowiki>|-</nowiki>
|-
|คอลัมน์ในแถว
|<nowiki><td>คอลัมน์ 1</td><td>คอลัมน์ 2</td></nowiki>
|<nowiki>|คอลัมน์ 1|คอลัมน์ 2</nowiki>
|-
|ชื่อหัวคอลัมน์
|<th>ชื่อหัวคอลัมน์</th>
|!ชื่อหัวคอลัมน์
|}
 
===สร้างตารางอย่างง่ายด้วย Wikicode===
การสร้างตารางอย่างง่ายด้วย Wikicode สามารถทำได้ดังขั้นตอนต่อไปนี้ 
*เริ่มต้นคำสั่งสร้างตารางด้วยเครื่องหมาย <nowiki>{|</nowiki> และสิ้นสุดตารางด้วยเครื่องหมาย <nowiki>|}</nowiki> 
{| border="1" cellpadding="6" cellspacing="1" align="center"
|-
|<nowiki>{|</nowiki>
''เริ่มต้นคำสั่งการสร้างตาราง'' 

<nowiki>|}</nowiki>

|} 
*ต้องการเพิ่มชื่อตาราง ใช้เครื่องหมาย <nowiki>|+</nowiki> ตามด้วยชื่อตาราง ซึ่งชื่อตารางนี้จะปรากฏเหนือหัวตารางที่สร้าง 
{| border="1" cellpadding="6" cellspacing="1" align="center"
|-
|<nowiki>{|</nowiki>
<nowiki>|+</nowiki>''ชื่อตาราง'' 
''เริ่มต้นคำสั่งการสร้างตาราง'' 
<nowiki>|}</nowiki>
|} 
*เริ่มสร้างแถวของตารางโดยใช้เครื่องหมาย <nowiki>|-</nowiki> แถวต่อไปหลังเครื่องหมายจะเป็นคำสั่งเริ่มแถวและเนื้อหาในแถว 
{| border="1" cellpadding="6" cellspacing="1" align="center"
|-
|<nowiki>{|</nowiki>
<nowiki>|+</nowiki>ชื่อตาราง 
<nowiki>|-</nowiki>
''เริ่มแถวแรก''
 <nowiki>|-</nowiki>''เริ่มแถวต่อไป'' 
<nowiki>|}</nowiki>
|} 
*คำสั่งเริ่มแถวใช้เครื่องหมาย <nowiki>|</nowiki> 
{| border="1" cellpadding="6" cellspacing="1" align="center"
|-
|<nowiki>{|</nowiki>
<nowiki>|+</nowiki>ชื่อตาราง 
<nowiki>|-</nowiki> 
|''คอลัมน์ที่หนึ่งในแถวแรก'' 
|''คอลัมน์ที่สองในแถวแรก'' 
<nowiki>|-</nowiki> 
|''คอลัมน์ที่หนึ่งในแถวสองมา'' 
|''คอลัมน์ที่สองในแถวสอง'' 
<nowiki>|}</nowiki>
|}
 

{| border="1" cellpadding="6" cellspacing="1" align="center"
|+ตัวอย่างตารางที่ได้
|-
|แถวที่ 1 คอลัมน์ 1
|แถวที่ 1 คอลัมน์ 2
|-
|แถวที่ 2 คอลัมน์ 1
|แถวที่ 2 คอลัมน์ 2
|} 
*นอกจากการใช้ครื่องหมาย <nowiki>|</nowiki> ในแต่ละบรรทัดเพื่อแยกแต่ละคอลัมน์ในแต่ละแถวยังสามารถใช้คำสั่งเป็น <nowiki>||</nowiki> ในบรรทัดเดียวกันเพื่อแสดงการแยกคอลัมน์ในแถวได้ 
{| border="1" cellpadding="6" cellspacing="1" align="center"
|-
|<nowiki>{|</nowiki>
<nowiki>|+</nowiki> ชื่อตาราง 
<nowiki>|-</nowiki> 
|คอลัมน์ 1 || คอลัมน์ 2 || คอลัมน์ 3 
<nowiki>|-</nowiki> 
|คอลัมน์ ก 
|คอลัมน์ ข 
|คอลัมน์ ค 
<nowiki>|}</nowiki>
|}
 
*หากต้องการเพิ่มชื่อในแต่ละหัวคอลัมน์จะใช้เครื่องหมาย <nowiki>!</nowiki> แสดงการแยกคอลัมน์แทน <nowiki>|</nowiki> 
{| border="1" cellpadding="6" cellspacing="1" align="center"
|-
|<nowiki>{|</nowiki>
<nowiki>|+</nowiki> ชื่อตาราง 
<nowiki>|-</nowiki> 
!ชื่อคอลัมน์ 1 !! ชื่อคอลัมน์ 2 !! ชื่อคอลัมน์ 3 
<nowiki>|-</nowiki> 
|คอลัมน์ 1 || คอลัมน์ 2 || คอลัมน์ 3 
<nowiki>|-</nowiki> 
|คอลัมน์ ก 
|คอลัมน์ ข 
|คอลัมน์ ค 
<nowiki>|}</nowiki>
|}
 
*นอกจากการเพิ่มชื่อในแต่ละหัวคอลัมน์แล้ว หากต้องการเพิ่มชื่อแถวยังสามารถใช้เครื่องหมาย <nowiki>!</nowiki> แทน <nowiki>|</nowiki> ในคอลัมน์แรกเพื่อแสดงชื่อหัวแถวได้ 
{| border="1" cellpadding="6" cellspacing="1" align="center"
|-
|<nowiki>{|</nowiki>
<nowiki>|+</nowiki> ชื่อตาราง 
<nowiki>|-</nowiki> 
!ชื่อคอลัมน์ 1 !! ชื่อคอลัมน์ 2 !! ชื่อคอลัมน์ 3 
<nowiki>|-</nowiki> 
! หัวแถว 1 
|คอลัมน์ 2 || คอลัมน์ 3 
<nowiki>|-</nowiki> 
! หัวแถว 2 
|คอลัมน์ ข 
|คอลัมน์ ค 
<nowiki>|}</nowiki>
|}
 
*จากคำสั่งข้างต้นนี้ เมื่อแสดงผลจะไม่มีการแสดงเส้นแบ่งขอบตาราง ได้แก่ 

{|align="center"

|+ ชื่อตาราง
|-
!ชื่อคอลัมน์ 1 !! ชื่อคอลัมน์ 2 !! ชื่อคอลัมน์ 3
|-
! หัวแถว 1
|คอลัมน์ 2 || คอลัมน์ 3
|-
! หัวแถว 2
|คอลัมน์ ข
|คอลัมน์ ค
|}
ดังนั้นเมื่อต้องการให้มีเส้นแบ่งขอบตารางควรใช้คำสั่งเพิ่มเติม เช่น
{| border="1" cellpadding="6" cellspacing="1" align="center"
|-
|<nowiki>{|</nowiki> border="1" 
<nowiki>|+</nowiki> ชื่อตาราง 
<nowiki>|-</nowiki> 
!ชื่อคอลัมน์ 1 !! ชื่อคอลัมน์ 2 !! ชื่อคอลัมน์ 3 
<nowiki>|-</nowiki> 
! หัวแถว 1 
|คอลัมน์ 2 || คอลัมน์ 3 
<nowiki>|-</nowiki> 
! หัวแถว 2 
|คอลัมน์ ข 
|คอลัมน์ ค 
<nowiki>|}</nowiki>
|}
 
เมื่อแสดงผลจึงได้ดังนี้
{| border="1" align="center"

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

===การเพิ่มคุณลักษณะอื่นๆ ให้กับตาราง===
การใช้คำสั่งพืนฐานทำให้สามารถสร้างตารางอย่างง่ายได้ แต่หากต้องการเพิ่มคุณลักษณะอื่นๆ เพิ่มเติมจะต้องกำหนดคำสั่งสำหรับคุณลักษณะอื่นๆ เพิ่มด้วย ได้แก่
====การกำหนดความกว้างของตาราง====
โดยปกติความกว้างของตารางจะขยับตามขนาดและจำนวนตัวอักษรในแต่ละคอลัมน์ แต่หากเราต้องกำหนดขนาดที่แน่นอนก็สามารถทำได้ ตัวอย่างเช่นการใช้คำสั่งกำหนดความกว้างของคอลัมน์ในตารางเป็นขนาดพิกเซล ดังนี้ 
{| border="1" cellpadding="6" cellspacing="1" align="center"
|-
|<pre><nowiki>{| border="1" cellpadding="2"
!width="50"|วันที่
!width="200"|เดือน
!width="200"|ปี
|-
|1 || กรกฎาคม || พ.ศ. 2549
|-
|2 ||กรกฎาคม|| พ.ศ. 2549
|}
</nowiki></pre>
|}
 
{| border="1" cellpadding="2" align="center"
|+ตัวอย่างตารางที่ได้
!width="50"|วันที่
!width="200"|เดือน
!width="200"|ปี
|-
|1 || กรกฎาคม || พ.ศ. 2549
|-
|2 ||กรกฎาคม|| พ.ศ. 2549
|}
====การเพิ่มสีในตาราง====
ในบางครั้งเราอาจจะต้องการเพิ่มสีในบางส่วนหรือส่วนทั้งหมดของตารางก็สามารถทำได้เช่นกัน โดยเลือกค่ารหัสสีแบบสีมาตรฐาน HTML (ดูข้อมูลเพิ่มเติมได้ที่ [http://th.wikipedia.org/wiki/%E0%B8%AA%E0%B8%B5%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B9%83%E0%B8%99%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A#.E0.B8.AA.E0.B8.B5.E0.B8.A1.E0.B8.B2.E0.B8.95.E0.B8.A3.E0.B8.90.E0.B8.B2.E0.B8.99.E0.B8.82.E0.B8.AD.E0.B8.87_HTML สีมาตรฐานของ HTML]) ดังตัวอย่างคำสั่งนี้ 
{| border="1" cellpadding="6" cellspacing="1" align="center"
|-
|<pre><nowiki>{| 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
|}
</nowiki></pre>
|}
 
{| border="1" cellpadding="2" align="center"
|+ตัวอย่างตารางที่ได้
!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="6" cellspacing="1" align="center"
|-
|<pre><nowiki>
{| 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
|}
</nowiki></pre>
|}
 
{| 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"
|-
|<pre><nowiki>
{| 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|แก้ว]]
|}
</nowiki></pre>
|}
 
จะได้ผลลัพธ์ตารางดังต่อไปนี้
 
{| 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|แก้ว]]
|}

[[หมวดหมู่:คู่มือการใช้งาน]]

การสร้างตาราง - ประวัติรุ่นแก้ไข

Haiiwiki: การทำตาราง moved to การสร้างตาราง

Haiiwiki เมื่อ 10:02, 14 ธันวาคม 2550

Aditep: New page: {{Wiki subject}} ===การใช้ภาษา HTML กับ Wikicode=== โดยปกติการสร้างตารางในวิกิสามารถสร้า...