วิธีใช้:ตาราง
หน้าคำอธิบายนี้เป็นคู่มือบอกวิธี ซึ่งบอกรายละเอียดกระบวนการหรือกระบวนวิธีของบางส่วนของบรรทัดฐานและวัตรของวิกิพีเดีย ไม่ใช่ส่วนหนึ่งของนโยบายและแนวปฏิบัติของวิกิพีเดีย |
ตารางเป็นการเรียงสดมภ์และแถวที่ใช้เพื่อจัดระเบียบและวางข้อมูล สามารถสร้างตารางในหน้าวิกิพีเดียได้โดยใช้วากยสัมพันธ์ข้อความวิกิพิเศษ และมีสไตล์และกลวิธีต่าง ๆ ที่สามารถใช้ปรับแต่งได้
การใช้แถบเครื่องมือ
ในการแทรกตารางอัตโนมัติ คลิก หรือ (แทรกตาราง) บนแถบเครื่องมือแก้ไข หาก "แทรกตาราง" ไม่อยู่ในแถบเครื่องมือ ให้ปฏิบัติตามคำชี้แจงดังนี้เพื่อเพิ่ม
จะแทรกข้อความต่อไปนี้เมื่อคลิก แทรกตาราง
{| class="wikitable" |- ! หัวตาราง 1 ! หัวตาราง 2 ! หัวตาราง 3 |- | แถว 1, เซลล์ 1 | แถว 1, เซลล์ 2 | แถว 1, เซลล์ 3 |- | แถว 2, เซลล์ 1 | แถว 2, เซลล์ 2 | แถว 2, เซลล์ 3 |} โค้ดนี้ให้ตารางต่อไปนี้
| หัวตาราง 1 | หัวตาราง 2 | หัวตาราง 3 |
|---|---|---|
| แถว 1, เซลล์ 1 | แถว 1, เซลล์ 2 | แถว 1, เซลล์ 3 |
| แถว 2, เซลล์ 1 | แถว 2, เซลล์ 2 | แถว 2, เซลล์ 3 |
ข้อความตัวอย่าง ("หัวตาราง N" หรือ "แถว N, เซลล์ N") ให้เจตนาแทนด้วยข้อมูลจริง
สอนการใช้งานวากยสัมพันธ์ไพป์
วากยสัมพันธ์ตารางเอชทีเอ็มแอลใช้ได้ เช่นเดียวกับโค้ดวิกิพิเศษเป็นทางลัดในการสร้างตาราง โค้ดไพป์ (ขีดตั้ง) ทำหน้าที่แบบเดียวกับมาร์กอัพตารางเอชทีเอ็มแอล ฉะนั้น ความรู้โค้ดตารางเอชทีเอ็มแอลช่วยให้เข้าใจรหัสไพป์ ทางลัดมีดังนี้
- ทั้งตารางปิดด้วยวงเล็บปีกกาและอักขระขีดตั้ง (ไพป์) ฉะนั้น ใช้
{|เพื่อเริ่มตาราง และ|}เพื่อปิดตาราง ทั้งสองต้องอยู่ในบรรทัดของมันเอง
{| ตารางที่นี่ |}
- รวมคำบรรยายตารางที่เลือกได้ด้วยบรรทัดที่เริ่มด้วยขีดตั้งและสัญลักษณ์บวก "
|+" และคำบรรยายที่ตามหลัง
{| |+ คำบรรยาย ตารางที่นี่ |} - ในการเริ่มแถวตารางใหม่ ให้พิมพ์ขีดตั้งและยติภังค์ในบรรทัดของมันเอง "
|-" โค้ดสำหรับเซลล์ในแถวนั้นให้เริ่มบรรทัดถัดไป
{| |+ คำบรรยายตาราง |- โค้ดแถวที่นี่ |- โค้ดแถวใหม่ที่นี่ |} - พิมพ์โค้ดสำหรับแต่ละเซลล์ตารางในแถวถัดไป เริ่มด้วยขีด
{| |+ คำบรรยายตาราง |- | โค้ดเซลล์ที่นี่ |- | เซลล์แถวถัดไปที่นี่ | เซลล์ถัดไปที่นี่ |} - สามารถแยกเซลล์ด้วยแถวใหม่หรือขีดเดี่ยว บรรทัดใหม่และขีดคู่ หรือขีดคู่ "
||ในบรรทัดเดียวกัน ทั้งสามให้ผลลัพธ์เหมือนกัน
{| |+ คำบรรยายตาราง |- |เซลล์ 1 || เซลล์ 2 || เซลล์ 3 |- |เซลล์ ก |เซลล์ ข |เซลล์ ค |} - โค้ดเซลล์ซึ่งมีขีดเดี่ยวในข้อความจะไม่เรนเดอร์ (render) ตามที่คาด โต้ดเซลล์ระหว่างขีดเดี่ยวสองขีดแรก หรือระหว่างขีดคู่และขีดเดี่ยวแรกจะกลายเป็นโค้ดจัดรูปแบบแถว (เลือกได้) ขีดเดี่ยวที่ตามมาใด ๆ จะถือว่าเป็นส่วนหนึ่งของข้อความ ตัวอย่างเช่น โค้ดนี้
{| border="1" |- |ตัวดัดแปรรูปแบบ (ไม่แสดง) |ทั้งหมดนี้ |(รวมทั้งไพป์) |อยู่ใน |เซลล์แรก||เซลล์ที่สอง |- |รูปแบบ |ทั้งหมดนี้ ||รูปแบบ |อยู่ใน |เซลล์ที่สอง |} ให้ตารางนี้ (ซึ่งอาจมิใช่สิ่งที่คุณคาดหวัง)
| ทั้งหมดนี้ |(รวมทั้งไพป์) |อยู่ใน |เซลล์แรก | เซลล์ที่สอง |
| ทั้งหมดนี้ | อยู่ใน |เซลล์ที่สอง |
ทว่า ตัวดัดแปรรูปแบบมีประโยชน์
{| border="1" |- | เซลล์ 1 (ไม่มีตัวดัดแปร—ไม่ปรับแนว) |- | style="text-align:right;" | เซลล์ 2 (ปรับแนวขวา) |} | เซลล์ 1 (ไม่มีตัวดัดแปร—ไม่ปรับแนว) |
| เซลล์ 2 (ปรับแนวขวา) |
ระลึกไว้ว่า อย่าใส่ขีดเดี่ยว 2 ขีดในแถวเดียวกัน
- ระบุแถวหัวสดมภ์ โดยใช้ "
! scope="col" |" แทน "|" และใช้ "!! scope="col" |" แทน "||" เซลล์หวัตารางตรงแบบเรนเดอร์แตกต่างจากเซลล์ปกติ ขึ้นอยู่กับเบราว์เซอร์ หัวตารางมักเรนเดอร์ในชุดแบบอักษรตัวหนาและปรับแนวกลางscope="col"ไม่จำเป็นในตารางวิกิที่จัดด้วยมาร์กอัพคลาสclass="wikitable"ฯลฯ
{| |+ คำบรรยายตาราง ! scope="col" | หัวสดมภ์ 1 ! scope="col" | หัวสดมภ์ 2 ! scope="col" | หัวสดมภ์ 3 |- | เซลล์ 1 || เซลล์ 2 || เซลล์ 3 |- | เซลล์ ก | เซลล์ ข | เซลล์ ค |} - ระบุเซลล์แรกของแถวเป็นหัวแถวโดยเริ่มบรรทัดด้วย "
! scope="row" |" แทน "|" และเริ่มเซลล์ข้อมูลตามมาในบรรทัดใหม่scope="col"ไม่จำเป็นในตารางวิกิที่จัดด้วยมาร์กอัพคลาสclass="wikitable"ฯลฯ
{| |+ คำบรรยายตาราง ! scope="col" | หัวสดมภ์ 1 ! scope="col" | หัวสดมภ์ 2 ! scope="col" | หัวสดมภ์ 3 |- ! scope="row" | หัวแถว 1 | เซลล์ 2 || เซลล์ 3 |- ! scope="row" | หัวแถว ก | เซลล์ ข | เซลล์ ค |} - ตัวแปรเสริมที่เลือกได้สามารถดัดแปรพฤติกรรมของเซลล์ แถวหรือทั้งตารางได้ ตัวอย่างเช่น สามารถเพิ่มขอบเข้าตารางได้
{| border="1" |+ คำบรรยายตาราง ! scope="col" | หัวสดมภ์ 1 ! scope="col" | หัวสดมภ์ 2 ! scope="col" | หัวสดมภ์ 3 |- ! scope="row" | หัวแถว 1 | เซลล์ 2 || เซลล์ 3 |- ! scope="row" | หัวแถว ก | เซลล์ ข | เซลล์ ค |} ตารางสุดท้ายจะแสดงผลดังนี้
| หัวสดมภ์ 1 | หัวสดมภ์ 2 | หัวสดมภ์ 3 |
|---|---|---|
| หัวแถว 1 | เซลล์ 2 | เซลล์ 3 |
| หัวแถว ก | เซลล์ ข | เซลล์ ค |
หากคุณต้องการจำกัดขอบกว้างหนึ่งพิกเซลรอบทุกเซลล์ ให้ใช้ดังนี้ในบรรทัดบนสุดของตาราง
{| border="1" style="border-collapse:collapse;"
ตารางที่ทบทวนแล้วเป็นดังนี้
| หัวสดมภ์ 1 | หัวสดมภ์ 2 | หัวสดมภ์ 3 |
|---|---|---|
| หัวแถว 1 | เซลล์ 2 | เซลล์ 3 |
| หัวแถว ก | เซลล์ ข | เซลล์ ค |
วิธีง่ายที่สุด คือ ใช้สไตล์ชีต (style sheet) ภายนอกสำหรับตารางของวิกิพีเดีย class="wikitable" ฯลฯ
{| border="1" class="wikitable" |+ คำบรรยายตาราง ! scope="col" | หัวสดมภ์ 1 ! scope="col" | หัวสดมภ์ 2 ! scope="col" | หัวสดมภ์ 3 |- ! scope="row" | หัวแถว 1 | เซลล์ 2 || เซลล์ 3 |- ! scope="row" | หัวแถว ก | เซลล์ ข | เซลล์ ค |} จะให้ผลดังนี้
| หัวสดมภ์ 1 | หัวสดมภ์ 2 | หัวสดมภ์ 3 |
|---|---|---|
| หัวแถว 1 | เซลล์ 2 | เซลล์ 3 |
| หัวแถว ก | เซลล์ ข | เซลล์ ค |
ตัวแปรเสริมตารางและตัวแปรเสริมเซลล์เหมือนกันกับในเอชทีเอ็มแอล ดู http://www.w3.org/TR/html401/struct/tables.html#edef-TABLE ทว่า ปัจจุบันส่วนย่อย colgroup และ col ยังไม่รองรับในมีเดียวิกิ Thead, tbody และ tfoot รองรับตั้งแต่มีเดียวิกิรุ่น 1.18 เป็นต้นมา (รุ่นปัจจุบันของวิกิพีเดียคือ 1.38.0-wmf.16 (02267f7))
ตารางเป็นประโยชน์ได้แม้ไม่มีเซลล์ที่มีเนื้อหา ตัวอย่างเช่น สามารถเปลี่ยนสีพื้นหลังของเซลล์ได้ด้วยตัวแปรเสริมเซลล์ ทำให้ตารางกลายเป็นแผนภาพ คล้าย meta:Template talk:Square 8x8 pentomino example "ภาพ" ในแบบตารางแก้ไขสะดวกกว่าภาพอัปโหลด
แต่ละแถวต้องมีจำนวนเซลล์เท่ากับแถวอื่น เพื่อให้จำนวนสดมภ์ในตารางยังคงที่ สำหรับเซลล์ว่าง ใช้ช่องว่างไม่แบ่ง เป็นเนื้อหาเพื่อให้แน่ใจว่าเซลล์นั้นถูกแสดงผล ในการแสดงไพป์ที่เห็นได้ในเซลล์ ใช้ <nowiki>|</nowiki> หรือ |
ด้วยเซลล์ colspan และ rowspan สามารถแผ่ได้หลายสดมภ์หรือแถว ทว่า มีข้อเสียที่การเรียงลำดับจะไม่สามารถทำงานได้เหมาะสมอีกต่อไป
ตัวอย่าง
ตารางตรงไปตรงมาเรียบง่าย
ตารางเล็กสุด
ทั้งคู่นี้ให้ผลลัพธ์เหมือนกัน เลือกสไตล์โดยยึดจำนวนเซลล์ในแต่ละแถวและข้อความทั้งหมดในแต่ละเซลล์
วิกิมาร์กอัพ
{| |- | A | B |- | C | D |} {| |- | A || B |- | C || D |} ตามที่ปรากฏในเบราว์เซอร์ (หมายเหตุว่าไม่มีขอบ)
| A | B |
| C | D |
ตารางสูตรคูณ
หมายเหตุว่า ในตัวอย่างนี้ใช้ class="wikitable" เพื่อจัดรูปแบบตารางด้วยสไตล์ชีตภายนอกสำหรับตารางของวิกิพีเดีย ซึ่งเพิ่มขอบ เฉดสีพื้นหลังและข้อความส่วนหัวหนา
มาร์กอัพวิกิ
{| class="wikitable" style="text-align:center; width:200px; height:200px;" |+ ตารางสูตรคูณ |- ! × ! 1 ! 2 ! 3 |- ! 1 | 1 || 2 || 3 |- ! 2 | 2 || 4 || 6 |- ! 3 | 3 || 6 || 9 |- ! 4 | 4 || 8 || 12 |- ! 5 | 5 || 10 || 15 |} ดังที่ปรากฏในเบราว์เซอร์
| × | 1 | 2 | 3 |
|---|---|---|---|
| 1 | 1 | 2 | 3 |
| 2 | 2 | 4 | 6 |
| 3 | 3 | 6 | 9 |
| 4 | 4 | 8 | 12 |
| 5 | 5 | 10 | 15 |
การดำเนินการทั้งตาราง
ความกว้าง, ความสูง
สามารถเจาะจงความกว้างและความสูงของทั้งตารางได้ เช่นเดียวกับความสูงของแถว ในการเจาะจงความกว้างของสดมภ์ สามารถเจะาจงความกว้างของเซลล์คงค่าในสดมภ์นั้นได้ หากไม่เจาะจงความกว้างสำหรับทุกสดมภ์ และ/หรือไม่ระบุความสูงสำหรับทุกแถว ก็อาจมีความกำกวมบ้าง และผลลัพธ์ขึ้นอยู่กับเบราว์เซอร์
วิกิมาร์กอัพ
{| style="width: 60%; height: 200px" border="1" |- | เซลล์บนซ้าย || เซลล์บนกลาง || เซลล์บนขวา |- style="height: 100px;" | เซลล์กลางซ้าย || style="width: 200px;" | เซลล์กลางกลาง || เซลล์กลางขวา |- | เซลล์ล่างซ้าย || เซลล์ล่างกลาง || เซลล์ล่างขวา |} ดังที่ปรากฏในเบราว์เซอร์
| เซลล์บนซ้าย | เซลล์บนกลาง | เซลล์บนขวา |
| เซลล์กลางซ้าย | เซลล์กลางกลาง | เซลล์กลางขวา |
| เซลล์ล่างซ้าย | เซลล์ล่างกลาง | เซลล์ล่างขวา |
การตั้งขอบ
ขอบตารางโดยปริยายเป็นเส้นคู่มีเงาซับซ้อน (ค่าโดยปริยายในเอชทีเอ็มแอล) ทว่า สามารถตั้งให้ขอบเหล่านี้เป็นเส้นทึบบางโดยใช้ตัวแปรเสริมรูปแบบ (style="border: 1px solid darkgray") ดังด้านล่าง (หมายเหตุ: หากคุณเจตนาใช้ตัวเลือก 'cellpadding' หรือ 'cellspacing' ร่วมกับขอบ คุณต้องใช้รูปแบบนี้):
มาร์กอัพวิกิ
{| cellpadding="2" style="border: 1px solid darkgray;" ! width="140" | ซ้าย ! width="150" | กลาง ! width="130" | ขวา |- border="0" | [[ไฟล์:StarIconBronze.png|120px]] | [[ไฟล์:StarIconGold.png|120px|คำบรรยายเมื่อเลื่อนเมาส์เหนือภาพ]] | [[ไฟล์:StarIconGreen.png|120px|สัญรูปดาวสีเขียว]] |- align="center" | ดาวสีบรอนซ์ || ดาวสีทอง || ดาวสีเขียว |} หมายเหตุว่า ข้อความแถวล่างจัดกลางโดย 'align="center"' ขณะที่ภาพดาวไม่จัดกลาง
ตราบเท่าที่ข้อกำหนด "ภาพ:" ไม่มีตัวแปรเสริม "thumb|" จะไม่แสดงบรรทัดคำบรรยายในตาราง (เฉพาะเมื่อเลื่อนเมาส์เหนือ) สีขอบ "darkgray" ตรงกับตารางหรือกล่องข้อมูลตรงแบบในบทความ ทว่า สามารถเป็นชื่อสีใดก็ได้ (เช่น style="border: 1px solid darkgreen;") หรือใช้สีฐานสิบหก (เช่น #DDCCBB)
ตัวเจาะจงรูปแบบสดมภ์ (ปิดใน "|...|") สามารถมีตัวแปรเสริมสไตล์เพื่อตั้งขอบในแต่ละเซลล์ได้ ดังนี้
มาร์กอัพวิกิ
{| cellpadding="2" style="border: 1px solid darkgray;" ! width="140" | ซ้าย ! width="150" | กลาง ! width="130" | ขวา |- align="center" | style="border: 1px solid blue;"| [[ไฟล์:StarIconBronze.png|120px]] | style="border: 1px solid #777777;"| [[ไฟล์:StarIconGold.png|120px|คำบรรยายเมื่อเลื่อนเมาส์เหนือภาพ]] | style="border: 1px solid #22AA55;"|<!--ขอบเขียว--> [[ไฟล์:StarIconGreen.png|120px|สัญรูปดาวสีเขียว]] |- align="center" | ดาวสีบรอนซ์ || ดาวสีทอง || ดาวสีเขียว |} สังเกตว่า มีเฉพาะเซลล์ภาพที่มีขอบปัจเจก มิใช่ข้อความ
สีฐานสิบหกล่าง (เช่น #616161) ใกล้เคียงสีดำ ตรงแบบ ขอบทั้งหมดในตารางจะมีสีเจาะจงสีเดียว
ตารางลอย (float)
สองคลาสตาราง floatleft และ floatright (ไวต่ออักษรใหญ่เล็ก) ช่วยให้ตารางลอยและปรับขอบ (margin) เพื่อไม่ให้ตารางติดกับข้อความ
floatleft ทำให้ตารางลอยไปทางซ้ายและปรับขอบขวา ส่วน floatright ทำตรงข้าม ตัวอย่างเช่น
ย่อหน้านี้มาก่อนตาราง ข้อความในสดมภ์ 2 ทอดข้ามทั้งสองแถวเนื่องจากตัวระบุรูปแบบ "rowspan=2" ฉะนั้นจึงไม่มีการลงรหัสคำสั่งสำหรับ "สดมภ์ 2" ในแถวที่ 2 มีเพียงสดมภ์ 1 และ 3 {| class="wikitable floatright" | สดมภ์ 1, แถว 1 | rowspan="2" | สดมภ์ 2, แถว 1 (และ 2) | สดมภ์ 3, แถว 1 |- | สดมภ์ 1, แถว 2 | สดมภ์ 3, แถว 2 |} {| class="wikitable floatleft" | สดมภ์ 1, แถว 1 | rowspan="2" | สดมภ์ 2, แถว 1 (และ 2) | สดมภ์ 3, แถว 1 |- | สดมภ์ 1, แถว 2 | สดมภ์ 3, แถว 2 |} Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? ดังที่ปรากฏในเบราว์เซอร์
ย่อหน้านี้มาก่อนตาราง ข้อความในสดมภ์ 2 ทอดข้ามทั้งสองแถวเนื่องจากตัวระบุรูปแบบ "rowspan=2" ฉะนั้นจึงไม่มีการลงรหัสคำสั่งสำหรับ "สดมภ์ 2" ในแถวที่ 2 มีเพียงสดมภ์ 1 และ 3
| สดมภ์ 1, แถว 1 | สดมภ์ 2, แถว 1 (และ 2) | สดมภ์ 3, แถว 1 |
| สดมภ์ 1, แถว 2 | สดมภ์ 3, แถว 2 |
| สดมภ์ 1, แถว 1 | สดมภ์ 2, แถว 1 (และ 2) | สดมภ์ 3, แถว 1 |
| สดมภ์ 1, แถว 2 | สดมภ์ 3, แถว 2 |
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
หมายเหตุว่า มีวิธีอื่นในการทำให้ตารางลอย เช่น style="float:{{{align|}}}" และ align="{{{align|}}}" แต่ floatleft และ floatright เป็นเพียงสองตัวแปรเสริมที่ทำให้คุณสามารถจัดให้ตารางอยู่ "ใต้" อ็อบเจกต์สื่อประสมที่ลอยอยู่ได้ ตัวอย่างเช่น
การปรับแนวตารางด้วย floatleft จะให้
| สดมภ์ 1, แถว 1 | สดมภ์ 2, แถว 1 (และ 2) | สดมภ์ 3, แถว 1 |
| สดมภ์ 1, แถว 2 | สดมภ์ 3, แถว 2 |
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
แต่การปรับแนวด้วย style="float:{{{align|left}}}" จะให้
| สดมภ์ 1, แถว 1 | สดมภ์ 2, แถว 1 (และ 2) | สดมภ์ 3, แถว 1 |
| สดมภ์ 1, แถว 2 | สดมภ์ 3, แถว 2 |
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
การจัดให้ตารางอยู่กลาง
สามารถจัดให้ตารางอยู่กลางได้ แต่จะไม่ "ลอย" กล่าวคือ ไม่มีข้อความปรากฏทั้งสองข้างของตาราง เคล็ดคือ {| style="margin: 1em auto 1em auto;"
มาร์กอัพวิกิ
ข้อความก่อนตาราง... {| class="wikitable" style="margin: 1em auto 1em auto;" |+ '''เซลล์ปรับแนวซ้าย ตารางจัดให้อยู่กลาง''' ! scope="col" | Duis ! scope="col" | aute ! scope="col" | irure |- | dolor || in reprehenderit || in voluptate velit |- | esse cillum dolore || eu fugiat nulla || pariatur. |} ...ข้อความหลังตาราง ดังที่ปรากฏในเบราว์เซอร์
ข้อความก่อนตาราง...
| Duis | aute | irure |
|---|---|---|
| dolor | in reprehenderit | in voluptate velit |
| esse cillum dolore | eu fugiat nulla | pariatur. |
...ข้อความหลังตาราง
สี; ขอบเขตตัวแปรเสริม
มีการเจาะจงสีข้อความและพื้นหลักสำหรับหนึ่งเซลล์สองวิธี ดังนี้
มาร์กอัพวิกิ
{| |- | style="background: red; color: white" | abc | def | style="background: red;"| <span style="color:white;"> ghi </span> | jkl |} ดังที่ปรากฏในเบราว์เซอร์
| abc | def | ghi | jkl |
สีสามารถระบุสำหรับทั้งแถวหรือทั้งตารางได้ เช่นเดียวกับตัวแปรเสริมอื่น ตัวแปรเสริมสำหรับแถวข่ม (override) ค่าสำหรับตาราง และตัวแปรเสริมสำหรับเซลล์ข่มค่าสำหรับแถว (หมายเหตุว่า ไม่มีวิธีที่ง่ายสำหรับการระบุสีสำหรับทั้งสดมภ์ ต้องเจาะจงแต่ละเซลล์ในสดมภ์ต่างหาก เครื่องมือสามารถทำให้การนี้ง่ายขึ้น)
มาร์กอัพวิกิ
{| style="background: yellow; color: green" |- | stu || style="background: silver" | vwx || yz |- style="background: red; color: white" | stu || style="background: silver" | vwx || yz |- | stu || style="background: silver" | vwx || yz |} ดังที่ปรากฏในเบราว์เซอร์
| stu | vwx | yz |
| stu | vwx | yz |
| stu | vwx | yz |
ในการทำให้ตารางกลืนไปกับพื้นหลัง ให้ใช้ style="background: none;" หรือ style="background: transparent;" (คำเตือน: style="background: inherit;" ใช้ไม่ได้กับบางเบราว์เซอร์ รวม IE6)
ในการบังคับให้เซลล์ตรงกับสีโดยปริยายหนึ่งของแม่แบบ class="wikitable" ให้ใช้ style="background: #f2f2f2" สำหรับหัวที่เข้มกว่า และ style="background: #f9f9f9" สำหรับตัวที่อ่อนกว่า
การดำเนินการเซลล์
การตั้งตัวแปรเสริมเซลล์
ที่เริ่มเซลล์ ให้เพิ่มตัวแปรเสริมตามด้วยไพป์เดี่ยว ตัวอย่างเช่น width="300"| ตั้งให้เซลล์นั้นกว้าง 300 พิกเซล ในการตั้งตัวแปรเสริมมากกว่าหนึ่งตัวแปร ให้เว้นช่องว่างระหว่างแต่ละตัวแปร
มาร์กอัพวิกิ
{| style="color:white" |- | style="background:red;"| เซลล์ 1 || style="width:300px; background:blue;"|เซลล์ 2 | style="background:green;"|เซลล์ 3 |} ดังที่ปรากฏในเบราว์เซอร์
| เซลล์ 1 | เซลล์ 2 | เซลล์ 3 |
การปรับแนวยืนในเซลล์
โดยปริยาย ข้อมูลในตารางปรับแนวกลางยืน (vertically centrally aligned) อันเป็นผลให้ผังดูแปลกดังนี้
| หัวแถว | ข้อความที่ยาวกว่า Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | ข้อความสั้น |
|---|---|---|
| หัวแถว | Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ลองนึกภาพมีผู้เลื่อนหน้าจอลงมาตามหน้า เห็นบนสุดของสดมภ์ "ว่าง" และสงสัยว่าเหตุใดจึงว่าง ใช้ "valign=top" เพื่อปรับแนวข้อความที่บนสุดของสดมภ์ | ข้อความสั้น |
ในการแก้ไข ให้ใช้ลักษณะประจำ valign="top" กับแถว (โชคร้ายที่ดูเหมือนจำเป็นต้องใช้กับทุกแถว)
มาร์กอัพวิกิ
{| border="1" cellpadding="2" width="400" |- valign="top" ! scope="row" width="10%" | หัวแถว | width="70%" | ข้อความที่ยาวกว่า Lorem ipsum... | width="20%" | ข้อความสั้น |- valign="top" ! scope="row" | หัวแถว | Excepteur sint occaecat... | ข้อความสั้น |} | หัวแถว | ข้อความที่ยาวกว่า Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | ข้อความสั้น |
|---|---|---|
| หัวแถว | Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ลองนึกภาพมีผู้เลื่อนหน้าจอลงมาตามหน้า เห็นบนสุดของสดมภ์ "ว่าง" และสงสัยว่าเหตุใดจึงว่าง ใช้ "valign=top" เพื่อปรับแนวข้อความที่บนสุดของสดมภ์ | ข้อความสั้น |
การย่อหน้า (indenting) เนื้อหาเซลล์
สามารถย่อหน้าเนื้อหาเซลล์ได้โดยใช้สไตล์ซีเอสเอส padding-left
มาร์กอัพวิกิ
{| border="1" cellpadding="2" |- | เนื้อหาเซลล์ที่ไม่ย่อหน้า || 1 |- | style="padding-left: 2em" | เนื้อหาที่ย่อหน้า || 2 |} | เนื้อหาเซลล์ที่ไม่ย่อหน้า | 1 |
| เนื้อหาที่ย่อหน้า | 2 |
การดำเนินการแถว
สำหรับการดำเนินการแถว ทั้งความสูง การตั้งขอบและการปรับแนว ดูที่ การดำเนินการทั้งตาราง
การดำเนินการสดมภ์
การตั้งความกว้างสดมภ์
ในการบังคับความกว้างสดมภ์ให้เป็นไปตามข้อกำหนดเฉพาะ มากกว่ายอมรับความกว้างของส่วนย่อยข้อความที่กว้างที่สุดในเซลล์ของสดมภ์ ให้ทำตามตัวอย่างนี้ สังเกตว่า บังคับการยกคำขึ้นบรรทัดใหม่ (wrap-around)
มาร์กอัพวิกิ
{| border="1" cellpadding="2" ! scope="col" width="50px" | ชื่อ ! scope="col" width="225px" | ผล ! scope="col" width="225px" | เกมที่พบ |- | โปเกบอล || โปเกบอลปกติ || ทุกรุ่น |- | เกรตบอล || ดีกว่าโปเกบอล || ทุกรุ่น |} | ชื่อ | ผล | เกมที่พบ |
|---|---|---|
| โปเกบอล | โปเกบอลปกติ | ทุกรุ่น |
| เกรตบอล | ดีกว่าโปเกบอล | ทุกรุ่น |
ในการตั้งความกว้างสดมภ์ในตารางโดยไม่มีส่วนหัว ให้ระบุความกว้างในเซลล์แรกของแต่ละสดมภ์
มาร์กอัพวิกิ
{| border="1" cellpadding="2" |- | width="100pt" | สดมภ์นี้กว้าง 100 จุด | width="200pt" | สดมภ์นี้กว้าง 200 จุด | width="300pt" | สดมภ์นี้กว้าง 300 จุด |- | blah || blih || bluh |} | สดมภ์นี้กว้าง 100 จุด | สดมภ์นี้กว้าง 200 จุด | สดมภ์นี้กว้าง 300 จุด |
| blah | blih | bluh |
คุณยังสามารถใช้ร้อยละ เช่น เพื่อให้ความกว้างของตารางสองสดมภ์เท่ากันโดยตั้งค่าให้สดมภ์หนึ่งเป็น width: "50%"
การประยุกต์หนึ่งของการตั้งความกว้างคือการปรับแนวสดมภ์ของตารางถัดไป ต่อไปนี้เป็นตารางแยกกัน โดยกำหนดสดมภ์ให้ 350px และ 225px
| ประเทศ | เมืองหลวง |
|---|---|
| เนเธอร์แลนด์ | อัมสเตอร์ดัม |
| ประเทศ | เมืองหลวง |
|---|---|
| ฝรั่งเศส | ปารีส |
ไม่ยกคำ
ในตารางซึ่งทอดข้ามตลอดความกว้างของหน้า เซลล์ที่แคบกว่าเซลล์ที่กว้งาสุดมักยกคำ ในการป้องกันมิให้ทั้งสดมภ์ยกคำ ให้ใช้ style=white-space:nowrap ในเซลล์ที่มิใช่ส่วนหัวกับเซลล์ที่ยาวสุด/กว้างสุดเพื่อให้มีผลต่อทั้งสดมภ์
หากไม่มี 'nowrap' ดังที่ปรากฏในเบราว์เซอร์
| ตอน | วันที่ | สรุป |
|---|---|---|
| "The Journey Begins" | 1 มกราคม 2553 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
| "When Episodes Attack" | 8 มกราคม 2553 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
| "So Long" | 15 มกราคม 2553 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
หากมี 'nowrap' ดังที่ปรากฏในเบราว์เซอร์
| ตอน | วันที่ | สรุป |
|---|---|---|
| "The Journey Begins" | 1 มกราคม 2553 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
| "When Episodes Attack" | 8 มกราคม 2553 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
| "So Long" | 15 มกราคม 2553 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
ตัวอย่างซับซ้อนขึ้นและการประยุกต์
คละ
นี่คือตัวอย่างที่ซับซ้อนขึ้น โดยแสดงบางตัวเลือกที่มีสำหรับการสร้างตารางเพิ่ม แต่หมายเหตุว่า ด้วยการเรียงลำดับ colspan และ rowspan ทำงานได้ไม่เหมาะสมอีก
ผู้ใช้สามารถเล่นกับการตั้งค่าเหล่านี้ในตารางของตนเพื่อดูผลกระทบที่เกิดขึ้น ใช่ว่าเทคนิคทั้งหมดนี้อาจเหมาะสมในทุกกรณี ตัวยอ่างเช่น เพียงเพราะสามารถเพิ่มพื้นหลังมีสีได้ แต่ไม่ได้หมายความว่าจะเป็นความคิดที่ดีเสมอไป พยายามทำให้มาร์กอัพในตารางค่อนข้างเรียบง่าย ระลึกว่า ผู้อื่นกำลังแก้ไขบทความเช่นกัน กระนั้น ตัวอย่างนี้ควรให้ความคิดว่าสิ่งใดเป็นไปได้
มาร์กอัพวิกิ
ข้อความก่อนตารางจัดกลาง... {| border="1" cellpadding="5" cellspacing="0" align="center" |+ '''ตารางตัวอย่าง''' |- ! style="background: #efefef;" | ส่วนหัวแรก ! colspan="2" style="background: #ffdead;" | ส่วนหัวที่สอง |- | บนซ้าย | | rowspan="2" style="border-bottom: 3px solid grey;" valign="top" | ฝั่งขวา |- | style="border-bottom: 3px solid grey;" | ล่างซ้าย | style="border-bottom: 3px solid grey;" | ล่างกลาง |- | colspan="3" align="center" | ข้อความก่อนตารางซ้อนใน... {| border="0" |+ ''ตารางในตาราง'' |- | align="center" width="150" | [[ไฟล์:Wiki.png]] | align="center" width="150" | [[ไฟล์:Wiki.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;" | โลโก้วิกิพีเดียสองรูป |} ...ข้อความหลังตารางซ้อนใน |} ...ข้อความหลังตารางจัดกลาง ดังที่ปรากฏในเบราว์เซอร์
ข้อความก่อนตารางจัดกลาง...
| ส่วนหัวแรก | ส่วนหัวที่สอง | |
|---|---|---|
| บนซ้าย | | ฝั่งขวา |
| ล่างซ้าย | ล่างกลาง | |
| ข้อความก่อนตารางซ้อนใน... ...ข้อความหลังตารางซ้อนใน | ||
...ข้อความหลังตารางจัดกลาง
การลอยภาพตรงกลาง
ตารางสามารถใช้เพื่อวนภาพได้ เพื่อให้ตารางสามารถลอยเข้าตรงกลางหน้า (เช่น การใช้ style="float: right;") ทว่า ขอบ ขอบเขตและขนาดชุดแบบอักษรต้องตั้งให้ตรงกับการแสดงภาพตรงแบบอย่างแม่นยำ ตัวแปรเสริมข้อกำหนดภาพ "thumb|" (แม้จัดขนาดเล็กอัตโนมัติเป็นความกว้างพึงใจของผู้ใช้) บังคับขอบซ้ายกว้างซึ่งบีบข้อความใกล้เคียง ฉะนั้น จึงสามารถเพิ่มตัวแปรเสริม "center|" เพื่อระงับการเสริมเติมขอบซ้าย ทว่า "center" บางครั้งผลักคำบรรยายไปบรรทัดที่ 2 (ใต้กล่องจัดกลาง "[]") ฉะนั้น "thumb|" สามารถละได้และใช้เพียงขนาดภาพเข้ารหัสตายตัว โดยเพิ่มขอบสีเทา (#BBB) การใช้ตัวแปรเสริมแม่นยำเพื่อให้ตรงกับภาพอื่น ตารางภาพลอยสามารถเข้ารหัสได้ดังต่อนี้
{| style="float: right; border: 1px solid #BBB; margin: .46em 0 0 .2em;" |- style="font-size: 86%;" | valign="top" |[[ไฟล์:DuraEuropos-TempleOfBel.jpg|180px]]<!-- --><br /> เทวสถานเบล (ลอย) |} ข้อความในตารางลอยตั้งขนาดโดย style="font-size: 86%;" ตารางภาพลอยนั้นทำให้กล่องภาพตรงแบบลอย แต่ให้การจัดรูปแบบขอบซ้ายมือของภาพ (ดูการลอยตัวอย่างแม่แบบบด้านล่าง)
| กล่องข้อมูล ก | |
|---|---|
| กล่องข้อมูลตัวอย่างนี้แสดงวิธีที่กล่องภาพลอยปรับแนวเข้าศูนย์กลาง |
สามารถละข้อความคำบรรยายได้ หรือลบตัวแปรเสริม "thumb|" ออกเพื่อให้ซ่อนคำบรรยายจนกระทั่ง "การแสดงวางเมาส์เหนือ" โชคร้ายที่ตัวแปรเสริม "thumb|" (ซึ่งใช้สำหรับการแสดงคำบรรยาย) ยังควบคุมการจัดขนาดเล็กอัตโนมัติให้ตั้งขนาดภาพใหม่ตามขนาดพึงใจของผู้ใช้ด้วย ในการตั้งขนาดภาพขนาดเล็กอัตโนมัติไปพร้อมกับซ่อนคำบรรยายด้วย ให้ใช้ |frameless|right| แทน |thumb|
ภาพที่ตั้งด้วยตัวแปรเสริม "left|" มีขอบฝั่งขวามือกว้าง (ตรงข้ามขอบตัวแปรเสริม "right|") ฉะนั้น การลอยเข้าข้างซ้ายต้องการภาพที่ตั้งเป็น "center|" ในตารางที่มี style="float:left; margin:0.46em 0.2em"
ทบทวนว่า นอกตารางภาพ ตัวแปรเสริม "right|" ทำให้ภาพปรับแนวบนหรือล่างกล่องข้อมูล แต่ไม่ลอยขนาบกล่องข้อมูล
หมายเหตุลำดับการทำก่อน ขั้นแรกเป็นกล่องข้อมูลหรือภาพที่ใช้ "right|" แล้วจึงเป็นตารางลอย และสุดท้าย ข้อความใด ๆ ที่วนซึ่งยังอยู่ได้ หากคำข้อความแรกยาวเกินไป จะไม่มีข้อความใดจะพอเหมาะเพื่อเติมฝั่งซ้ายมือ ฉะนั้นระวังการสร้าง "ขอบซ้ายรุ่งริ่ง" เมื่อไม่เหลือที่ว่างพอสำหรับให้ข้อความอยู่ขนาบตารางลอย
หากตารางภาพเดี่ยวหลายตารางซ้อนกัน จะลอยเพื่อปรับแนวทอดข้ามหน้า ขึ้นอยู่กับความกว้างหน้า ข้อวามบีบเพื่อให้ตารางลอยอยู่ได้มากที่สุด ตามที่ปรับแนวอัตโนมัติ แล้วยกคำข้อความใดก็ตาม (ยังอยู่ได้) ที่ฝั่งซ้ายมือ
คุณลักษณะปรับแนวอัตโนมัตินี้สามารถใช้สร้าง "แกลอรี" ภาพลอย คือ ชุดตารางลอย 20 ตารางวน (ย้อนหลัง ขวาไปซ้าย) ราวกับแต่ละตารางเป็นคำข้อความที่วนข้ามและลงไปตามหน้า ในการวนในทิศทางตรงแบบ (วนซ้ายไปขวา) ให้นิยามตารางลอยทั้งหมดนี้เป็นตารางซ้ายมือแทนโดยใช้ตัวแปรเสริมบนสุด style="float:left; margin:0.46em 0.2em" ภาพหลอยจำนวนมากทำให้การเรียงพิมพ์ภาพรอบข้อความยืดหยุ่นมากขึ้น
การใช้ colspan และ rowspan ร่วมกัน
มาร์กอัพวิกิ
{| border="1" cellpadding="5" cellspacing="0" |- | สดมภ์ 1 || สดมภ์ 2 || สดมภ์ 3 |- | rowspan="2" | A | colspan="2" style="text-align: center;" | B |- | C <!-- เซลล์ A ยึดสดมภ์ 1 --> | D |- | E | rowspan="2" colspan="2" style="text-align: center;" |F |- | G <!-- เซลล์ F ยึดสดมภ์ 2+3 --> |- | colspan="3" style="text-align: center;" | H |} ดังที่ปรากฏในเบราว์เซอร์
| สดมภ์ 1 | สดมภ์ 2 | สดมภ์ 3 |
| A | B | |
| C | D | |
| E | F | |
| G | ||
| H | ||
หมายเหตุว่า การใช้ rowspan="2" กับเซลล์ G รวมกับ rowspan="3" กับเซลล์ F เพื่อให้ได้อีกแถวใต้เซลล์ G และ F ไม่ได้ผล เพราะเซลล์ (โดยปริยาย) ทั้งหมดจะว่าง
เช่นเดียวกัน จะไม่แสดงสดมภ์สมบูรณ์หากเซลล์ทั้งหมดว่าง ขอบเขตระหว่างเซลล์ที่ไม่ว่างและว่างยังอาจไม่แสดงด้วย (ขึนอยู่กับเบราว์เซอร์) ให้ใช้ เพื่อเติมเซลล์ว่างด้วยเนื้อหาหลอก
การปรับแนวจุดทศนิยม
ต่อไปนี้เป็นวิธีเพื่อให้สดมภ์จำนวนปรับแนวที่จุดทศนิยม
มาร์กอัพวิกิ
{| cellpadding="0" cellspacing="0" | align="right" | 432 || .1 |- | align="right" | 43 || .21 |- | align="right" | 4 || .321 |} ดังที่ปรากฏในเบราว์เซอร์
| 432 | .1 |
| 43 | .21 |
| 4 | .321 |
หากสดมภ์จำนวนปรากฏในตารางที่เสริมเต็มเซลล์หรือเว้นเซลล์ คุณยังสามารถปรับแนวจุดทศนิยมได้โดยไร้ซึ่งระยะห่างไม่น่าดูตรงกลาง ฝังตัว (embed) ตารางในแต่ละเซลล์ของจำนวนและระบุความกว้างสดมภ์ ทำให้ความกว้างสดมภ์ของตารางที่ฝังตัวเท่ากันสำหรับทุกเซลล์ในสดมภ์ (หากจุดทศนิยมยังปรับแนวผิดเมื่อใช้วิธีนี้ แสดงว่าสดมภ์ของตารางหลักอาจแคบเกิน ใส่ตัวแปรเสริมเพื่อเพิ่มความกว้างสดมภ์
มาร์กอัพวิกิ
{| border="1" cellpadding="4" cellspacing="2" | {| cellpadding="0" cellspacing="0" width="100" | align="right" width="50%"| 432 || width="50%" | .1 |} |- | {| cellpadding="0" cellspacing="0" width="100" | align="right" width="50%"| 43 || width="50%" | .21 |} |- | {| cellpadding="0" cellspacing="0" width="100" | align="right" width="50%" | 4 || width="50%" | .321 |} |} ดังที่ปรากฏในเบราว์เซอร์
| ||
| ||
|
ในกรณีข้อความก่อนจัดรูปแบบ คุณสามารถทิ้งคุณลักษณะตารางไปทั้งหมดแล้วเพียงเริ่มตนบรรทัดด้วยช่องว่าง แล้วใส่ช่องว่างเพื่อกำหนดที่ตัวเลขได้
มาร์กอัพวิกิ (ใช้เพียงช่องว่าง!)
432.1 43.21 4.321
ดังที่ปรากฏในเบราว์เซอร์
432.1 43.21 4.321
ทว่า ควรมีเหตุผลดีในการใช้ข้อความก่อนจัดรูปแบบในบทความ
คลาส
ในบรรทัดแรกของรหัสตาราง หลังจาก "{|" แทนที่จะระบุสไตล์โดยตรง คุณยังสามารถระบุคลาสได้ ซึ่งอาจใช้เพื่อใช้สไตล์ สไตล์สำหรับคลาสนี้สามารถระบุได้หลายวิธี
- ในตัวซอฟต์แวร์เอง ตามสกิน (ตัวอย่างเช่น คลาส sortable)
- ร่วมกันสำหรับผู้ใช้ทั้งหมดในวิกิหนึ่งใน MediaWiki:Common.css (ตัวอย่างเช่น ในโครงการนี้หรือโครงการอื่นบางโครงการ มีหรือเคยมีคลาส wikitable ซึ่งภายหลังย้ายไป shared.css)
- แยกกันตามสกินใน MediaWiki:Monobook.css เป็นต้น
- ปัจเจกในวิกิหนึ่งในหน้าย่อยผู้ใช้
- ปัจเจก แต่ร่วมกันสำหรับตารางของคลาสที่เกี่ยวข้องในหน้าเว็บทั้งหมด ในคอมพิวเตอร์เฉพาะที่ของผู้ใช้
แทนการจำตัวแปรเสริมตาราง คุณเพียงรวมคลาสที่เหมาะสมต่อจาก {| ซึ่งช่วยให้การจัดรูปแบบตารางต้องกัน และสามารถเปลี่ยนแปลงคลาสเพียงครั้งเดียวเพื่อแก้ไขปัญหาหรือเสริมลักษณะปรากฏของตารางทั้งหมดซึ่งใช้คลาสนั้น ตัวอย่างเช่น
{| cellpadding="2" |+ ตารางสูตรคูณ |- ! scope="col" | × ! scope="col" | 1 ! scope="col" | 2 ! scope="col" | 3 |- ! scope="row" | 1 | 1 || 2 || 3 |- ! scope="row" | 2 | 2 || 4 || 6 |- ! scope="row" | 3 | 3 || 6 || 9 |- ! scope="row" | 4 | 4 || 8 || 12 |- ! scope="row" | 5 | 5 || 10 || 15 |} |
| |||||||||||||||||||||||||
| กลายเป็น | ||||||||||||||||||||||||||
{| class="wikitable" |+ ตารางสูตรคูณ |- ! scope="col" | × ! scope="col" | 1 ! scope="col" | 2 ! scope="col" | 3 |- ! scope="row" | 1 | 1 || 2 || 3 |- ! scope="row" | 2 | 2 || 4 || 6 |- ! scope="row" | 3 | 3 || 6 || 9 |- ! scope="row" | 4 | 4 || 8 || 12 |- ! scope="row" | 5 | 5 || 10 || 15 |} |
| |||||||||||||||||||||||||
เพียงแทนที่ซีเอสเอสในบรรทัดสำหรับตารางด้วย class="wikitable" เหตุที่เป็นเช่นนี้เพราะคลาส wikitable ใน MediaWiki:Common.css มีกฎสไตล์ซีเอสเอส table.wikitable จำนวนหนึ่ง ซึ่งทั้งหมดใช้ได้ทันทีเมื่อคุณทำเครื่องหมายตารางด้วยคลาสดังกล่าว จากนั้นคุณสามารถเพิ่มกฎสไตล์เพิ่มเติมได้หากต้องการ กฎสไตล์เหล่านี้ข่มกฎของคลาส ทำให้คุณใช้สไตล์คลาสเป็นฐานแล้วต่อเติมได้
มาร์กอัพวิกิ
{| class="wikitable" style="font-style:italic; font-size:120%; border: 3px dashed red;" |+ ตารางสูตรคูณ |- ! scope="col" | × ! scope="col" | 1 ! scope="col" | 2 ! scope="col" | 3 |- ! scope="row" | 1 | 1 || 2 || 3 |- ! scope="row" | 2 | 2 || 4 || 6 |- ! scope="row" | 3 | 3 || 6 || 9 |- ! scope="row" | 4 | 4 || 8 || 12 |- ! scope="row" | 5 | 5 || 10 || 15 |} ดังที่ปรากฏในเบราว์เซอร์
| × | 1 | 2 | 3 |
|---|---|---|---|
| 1 | 1 | 2 | 3 |
| 2 | 2 | 4 | 6 |
| 3 | 3 | 6 | 9 |
| 4 | 4 | 8 | 12 |
| 5 | 5 | 10 | 15 |
สังเกตว่า ตารางยังมีพื้นหลังสีเทาของคลาส wikitable และส่วนหัวยังเป็นตัวหนาและจัดกลาง แต่ขณะนี้การจัดรูปแบบข้อความถูกข่มด้วยข้อความสั่ง "style" ท้องถิ่น ข้อความทั้งหมดในตารางจึงกลายเป็นตัวเอนและมีขนาดปกติ 120% และขอบเขต wikitable ถูกแทนด้วยขอบเขตประสีแดง
ตารางยุบได้
คลาสยังสามารถใช้เพื่อยุบตารางได้ ฉะนั้นตารางโดยปริยายจึงซ่อนอยู่ ใช้สไตล์ 'collapsible' เพื่อเปิดใช้งานพฤติกรรมยุบ โดยปริยาย ตารางยุบได้เริ่มจากขยายอยู่ ในการเปลี่ยน ให้รวมคลาสเพิ่มเติม 'collapsed' หรือ 'autocollapse' (คือ ยุบเฉพาะเมื่อตารางยุบได้ 3 ตารางอื่นอยู่ด้วย) คุณต้องรวมส่วนหัวแถว ซึ่งแสดงตัวเลือก 'hide' ตัวอย่างเช่น
{| class="wikitable collapsible collapsed" |- ! ส่วนหัว |- | เนื้อหาซึ่งเริ่มซ่อน |- | เนื้อหาซ่อนเพิ่มเติม |} ให้ผลเป็น
| ส่วนหัว |
|---|
| เนื้อหาซึ่งเริ่มซ่อน |
| เนื้อหาซ่อนเพิ่มเติม |
การใช้คลาส mw-collapsible
อีกทางหนึ่ง (ได้ผลในมีเดียวิกิ 1.19rc1) testwiki:User:Krinkle/CollapsingTestpageMw
{| class="wikitable sortable mw-collapsible" | ส่วนหัว |
|---|
| เนื้อหาซึ่งเริ่มมองเห็นได้ |
| เนื้อหามองเห็นได้เพิ่มเติม |
{| class="wikitable sortable mw-collapsible mw-collapsed" | ส่วนหัว |
|---|
| เนื้อหาซึ่งเริ่มมองเห็นได้ |
| เนื้อหามองเห็นได้เพิ่มเติม |
ตารางเรียงลำดับได้
สามารถทำให้ตารางเรียงลำดับได้โดยเพิ่ม class="sortable" เนื่องจากอาจเป็นประโยชน์ได้มาก จึงเป็นการฉลาดที่จะระลึกถึงความเป็นไปได้และข้อจำกัดในคุณลักษณะนี้เมื่อออกแบบตาราง ตัวอย่างเช่น
- อย่าแบ่งตารางเป็นส่วน ๆ โดยหัวเรื่องย่อยทอดข้ามหลายแถว แต่ให้ทำสดมภ์เพิ่มซึ่งแสดงเนื้อหาของหัวเรื่องเหล่านี้ในแต่ละแถวอย่างสั้น ๆ
- อย่ามีส่วนย่อยทอดข้ามหลายสดมภ์ แต่ให้ย้ำเนื้อหาในแต่ละแถวอย่างสั้น ๆ
- ในสดมภ์จำนวน อย่าใส่ข้อความ เช่น "ca." (ประมาณปี) ทั้งก่อนหรือหลังจำนวนเพราะจะทำให้การเรียงลำดับจำนวนเสีย อย่าใส่ข้อความหรืออักขระพยัญชนะใด ๆ ในทุกเซลล์ของสดมภ์ที่จะให้เรียงลำดับจำนวน พยายามไม่ใส่พิสัยจำนวน (ไม่มีผลต่อตำแหน่งการเรียงลำดับสำหรับภาวะการเรียงลำดับจำนวน และในกรณีพิสัย จำนวนแรกเป็นตัวตัดสินตำแหน่ง แต่หากเป็นไปได้หลังการเรียงลำดับนี้หรือสดมภ์อื่น ส่วนย่อยดังกล่าวอยู่บนสุด จะชักนำภาวะการเรียงลำดับพยัญชนะแทน) แต่ให้ใส่ข้อความเหล่านี้ในสดมภ์แยกกัน อีกทางหนึ่ง สามารถใช้ภาวะการเรียงลำดับพยัญชนะกับหลักเรียงลำดับ (sortkey) ซ่อนเพื่อความยืดหยุ่นสูงสุดได้
สามารถรูปยาวของเนื้อหาย่อเป็นคำอธิบายสัญลักษณ์นอกตารางได้
มาร์กอัพวิกิ
{| class="wikitable sortable" border="1" |+ ตารางเรียงได้ |- ! scope="col" | พยัญชนะ ! scope="col" | จำนวน ! scope="col" | วันที่ ! scope="col" class="unsortable" | เรียงไม่ได้ |- | d || 20 || 2008-11-24 || เรียง |- | b || 8 || 2004-03-01 || สดมภ์ |- | a || 6 || 1979-07-23 || นี้ |- | c || 4 || 1492-12-08 || ไม่ |- | e || 0 || 1601-08-13 || ได้ |} ดังที่ปรากฏในเบราว์เซอร์
| พยัญชนะ | จำนวน | วันที่ | เรียงไม่ได้ |
|---|---|---|---|
| d | 20 | 2008-11-24 | เรียง |
| b | 8 | 2004-03-01 | สดมภ์ |
| a | 6 | 1979-07-23 | นี้ |
| c | 4 | 1492-12-08 | ไม่ |
| e | 0 | 1601-08-13 | ได้ |
การเรียงลำดับและการยุบ
ตารางเรียงได้สามารถยุบได้ ในการทำเช่นนี้ คุณต้องใช้รหัส {| class="wikitable sortable collapsible" ใช้ตารางข้างต้นแล้วทำให้ยุบได้ คุณจะได้ว่า
มาร์กอัพวิกิ
{| class="wikitable sortable collapsible" |+ ตารางเรียงได้และยุบได้ |- ! scope="col" | พยัญชนะ ! scope="col" | จำนวน ! scope="col" | วันที่ ! scope="col" class="unsortable" | เรียงไม่ได้ |- | d || 20 || 2008-11-24 || เรียง |- | b || 8 || 2004-03-01 || สดมภ์ |- | a || 6 || 1979-07-23 || นี้ |- | c || 4 || 1492-12-08 || ไม่ |- | e || 0 || 1601-08-13 || ได้ |} ดังที่ปรากฏในเบราว์เซอร์
| พยัญชนะ | จำนวน | วันที่ | เรียงไม่ได้ |
|---|---|---|---|
| d | 20 | 2008-11-24 | เรียง |
| b | 8 | 2004-03-01 | สดมภ์ |
| a | 6 | 1979-07-23 | นี้ |
| c | 4 | 1492-12-08 | ไม่ |
| e | 0 | 1601-08-13 | ได้ |
หากคุณต้องการให้ตารางโดยปริยายอยู่ในสภาพยุบ ให้ใช้รหัส {| class="wikitable sortable collapsible collapsed" แทน {| class="wikitable sortable collapsible"
การโยงส่วนหรือการโยงแผนที่ไปจุดตรึงแถว
ในการเปิดใช้งานจุดตรึงการโยงส่วน (หรือจุดตรึงของการโยงแผนที่) คือ การอ้างอิงแถวจำเพาะในตาราง ให้ใช้ตัวแปรเสริม id="ชื่อจุดตรึงการโยงส่วน" ที่ต้นแถว |- หรือ <tr> ดังนี้
|- id="ชื่อจุดตรึงการโยงส่วน"
<tr id="ชื่อจุดตรึงการโยงส่วน"> หมายเหตุว่า ชื่อจุดตรึงทั้งหมดต้องต่างจากชื่ออื่นในหน้า (ซึ่งรวมชื่อหัวเรื่อง) เพื่อสร้าง XHTML ที่ถูกต้อง
- ตัวอย่างการโยงแผนที่กับแถว
เมื่อคลิกป้ายประเทศซึ่งมีลิงก์บนแผนที่ ตัวอย่างเช่น ลิงก์ซึ่งลงรหัส ตัวอย่างเช่น [[#Table_row_11|Slovenia]] ที่อ้างอิงจุดตรึง (ในตาราง) ซึ่งลงรหัสอย่าง |- id="Table_row_11" ทำให้หน้าเลื่อนหน้าจอเพื่อให้บรรทัดบนสุดของหน้า (ตาราง) เป็นแถวที่เลือก
↦ |
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
แม่แบบแถว
ไม่ว่าใช้รูปแบบ wikitable หรือเอชทีเอ็มแอล ข้อความวิกิของแถวในตาราง และบางครั้งแม้ภายในหมู่ตาราง มีความคล้ายกันหลายอย่าง เช่น
- รหัสพื้นฐานสำหรับแถวตาราง
- รหัสสี การปรับแนวและภาวะการเรียงลำดับ
- ข้อความตายตัว เช่น หน่วย
ในกรณีซึ่งอาจเป็นประโยชน์ที่จะสร้างแม่แบบซึ่งผลิตวากยสัมพันธ์สำหรับแถวตารางโดยมีข้อมูลเป็นตัวแปรเสริม สามารถมีประโยชน์หลายประการ ดังนี้
- เปลี่ยนลำดับหรือลบสดมภ์ได้ง่าย
- เพิ่มสดมภ์ใหม่ได้ง่ายหากส่วนย่อยของสดมภ์ใหม่จำนวนมากยังถูกปล่อยว่าง (หากแทรกตารางและเขตข้อมูลที่มีอยู่ยังไม่ได้ตั้งชื่อ ให้ใช้ชื่อตัวแปรเสริมที่มีชื่อแล้วกับเขตข้อมูลใหม่เพื่อเลี่ยงการเพิ่มค่าตัวแปรเสริมว่างกับเซลล์แม่แบบจำนวนมาก)
- คำนวณเขตข้อมูลจากเขตข้อมูลอื่น ตัวอย่างเช่น ความหนาแน่นของประชากรจากประชากรและพื้นที่
- ทำซ้ำเนื้อหาและให้ป้ายระบุช่วงด้วย "display:none" เพื่อวัตถุประสงค์มีหนึ่งรูปแบบสำหรับการเรียงลำดับและอีกรูปแบบหนึ่งสำหรับแสดงผล
- กำหนดรูปแบบสำหรับทั้งสดมภ์ได้ง่าย เช่น สีและการปรับแนว
ตัวอย่าง
การใช้ m:help:table/example row template (พูดคุย, ลิงก์เข้า, แก้ไข)
{| class="wikitable sortable" border="1" |- ! scope="col" | a ! scope="col" | b ! scope="col" | a/b {{help:table/example row template| 50|200}} {{help:table/example row template| 8| 11}} {{help:table/example row template|1000| 81}} |} ให้ผลเป็น
| a | b | a/b |
|---|---|---|
| 50 | 200 | 0.25 |
| 8 | 11 | 0.72727272727273 |
| 1000 | 81 | 12.345679012346 |
แถวตารางมีเงื่อนไข
สำหรับแถวมีเงื่อนไขในตาราง สามารถได้ว่า
{| class="wikitable" border="1" <!-- แสดงแถว 1 เพราะ '1' ประเมิน เป็นจริง --> {{ #if:1|{{!}}- ! scope="row" {{!}} แถว 1, สดมภ์ 1 <!-- ประเมิน {{!}} ใด ๆ เป็นอักขระไพป์ '|' เพราะแม่แบบ '!' มี เพียง '|' --> {{!}} แถว 1, สดมภ์ 2}} <!-- ไม่แสดงแถว 2 เพราะประเมินช่องว่าง ระหว่าง ':' และ '|' เป็นเท็จ --> {{ #if: |{{!}}- ! scope="row" {{!}} แถว 2, สดมภ์ 1 {{!}}แถว 2, สดมภ์ 2}} <!-- แสดงแถว 3 --> |- ! scope="row" {{!}} แถว 3, สดมภ์ 1 | แถว 3, สดมภ์ 2 |} ซึ่งให้ตารางต่อไปนี้ (สังเกตว่าแถว 2 หายไป)
| แถว 1, สดมภ์ 1 | แถว 1, สดมภ์ 2 |
|---|---|
| แถว 3, สดมภ์ 1 | แถว 3, สดมภ์ 2 |
วากยสัมพันธ์ตารางอื่น
วากยสัมพันธ์ตารางอื่นที่มีเดียวิกิรองรับ มี
- เอกซ์เอชีเอ็มแอล
- วากยสัมพันธ์เอชทีเอ็มแอลและมีเดียวิกิ - | (อย่าใช้)
มีเดียวิกิรองรับทั้งสามและ (ปัจจุบัน) สร้างนำออกเอชทีเอ็มแอลที่ถูกต้อง แต่วากยสัมพันธ์ไพป์เรียบง่ายที่สุด นอกจากนี้ วากยสัมพันธ์เอชทีเอ็มแอลและวิกิ-| (คือ ป้ายระบุ | และ |- ไม่ปิด) ไม่จำเป็นว่าเบราว์เซอร์ยังรองรับในอนาคต โดยเฉพาะอย่างยิ่งอุปกรณ์มือถือที่เข้าถึงอินเทอร์เน็ตได้
หมายเหตุว่า กระนั้นปัจจุบันส่วนย่อย thead, tbody, tfoot, colgroup, และ col ยังไม่รองรับในมีเดียวิกิ
การเปรียบเทียบวากยสัมพันธ์ตาราง
| เอกซ์เอชทีเอ็มแอล | ไพป์วิกิ | |||||
|---|---|---|---|---|---|---|
| ตาราง | <table></table> | {| |} | ||||
| คำบรรยาย | <caption>คำบรรยาย</caption> | |+ คำบรรยาย | ||||
| แถว | <tr></tr> | |- | ||||
| เซลล์ข้อมูล | <td>cell1</td><td>cell2</td> <td>cell3</td> | | cell1 || cell2 | cell3 | ||||
| เซลล์ส่วนหัว | <th scope="col">column heading</th> <th scope="row">row heading</th> | ! scope="col" | column heading ! scope="row" | row heading | ||||
| ตารางตัวอย่าง |
| |||||
<table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> | {| | 1 || 2 |- | 3 || 4 |} | |||||
| ข้อดี |
|
| ||||
| ข้อเสีย |
|
| ||||
| เอกซ์เอชทีเอ็มแอล | ไพป์วิกิ | |||||
ดูเพิ่ม
- มีเดียวิกิ
- mw:Help:Tables (วิธีใช้ตาราง)
- mw:Simplified table syntax (วากยตารางอย่างง่าย)
- m:Wiki markup tables (ตารางมาร์กอัพวิกิ)
- m:Table background colors (สีพื้นหลังตาราง)
- m:Help:Sorting (การเรียงลำดับ)
- ตาราง (เอชทีเอ็มแอล)
- คอมมอนส์
- ทรัพยากรแผนผังและกราฟ
- แปลงตารางและแผนผังเป็นรหัสวิกิหรือไฟล์ภาพ
- ตัวอย่าง
- ตารางหมากรุก
- ตัวอย่างเพนโตมิโนจัตุรัส 8 × 8