ตาราง
ตารางเป็นไวยากรณ์ขยายที่ใช้บ่อยเพื่อแสดงข้อมูลเชิงโครงสร้าง อ่านง่าย และเทียบค่าได้สะดวก
ไวยากรณ์พื้นฐาน
markdown
| คอลัมน์ A | คอลัมน์ B | คอลัมน์ C |
|-----------|-----------|-----------|
| ค่า 1 | ค่า 2 | ค่า 3 |
| ค่า 4 | ค่า 5 | ค่า 6 |ผลลัพธ์:
| คอลัมน์ A | คอลัมน์ B | คอลัมน์ C |
|---|---|---|
| ค่า 1 | ค่า 2 | ค่า 3 |
| ค่า 4 | ค่า 5 | ค่า 6 |
เคล็ดลับ: เส้นคั่นแถวที่สองจำเป็น ต้องมีอักขระ - อย่างน้อย 3 ตัวในแต่ละคอลัมน์
การจัดแนวคอลัมน์
ใช้เครื่องหมาย : ในเส้นคั่นเพื่อกำหนดการจัดแนว:
markdown
| ซ้าย | กลาง | ขวา |
|:-----|:----:|-----:|
| a | b | c |
| d | e | f |ส่วนหัวและตัวเนื้อหา
- แถวบนสุดคือหัวตาราง (header)
- แถวถัดไปเป็นเส้นคั่นโครงสร้าง
- แถวต่อ ๆ ไปเป็นข้อมูล (rows)
เซลล์หลายบรรทัดและเนื้อหาอื่น
เนื้อหาในเซลล์รองรับข้อความหลายบรรทัด โค้ดอินไลน์ ลิงก์ และแม้แต่ HTML (ขึ้นกับตัวเรนเดอร์):
markdown
| รายการ | คำอธิบาย |
|--------|-----------|
| `sum` | รวมค่าในคอลัมน์ A <br> ใช้กับชุดข้อมูลขนาดกลาง |
| [Docs](#) | ลิงก์ไปยังหน้าอธิบาย |คำแนะนำด้านโครงสร้าง
- ให้จำนวนคอลัมน์ในแต่ละแถวสอดคล้องกัน
- ใช้ช่องว่างช่วยจัดแนวในซอร์สโค้ดเพื่อให้อ่านง่าย (ไม่กระทบผลลัพธ์)
- สำหรับตารางซับซ้อนมาก แนะนำใช้ HTML
<table>เพื่อควบคุมละเอียด
ข้อผิดพลาดที่พบบ่อย
markdown
❌ จำนวนคอลัมน์ไม่เท่ากันในบางแถว
| A | B |
|---|---|
| 1 |
✅ ทำให้คอลัมน์ครบทุกแถว
| A | B |
|---|---|
| 1 | 2 |markdown
❌ ลืมเส้นคั่นโครงสร้าง (แถวที่สอง)
| A | B |
| 1 | 2 |
✅ เพิ่มแถวเส้นคั่น
| A | B |
|---|---|
| 1 | 2 |รูปแบบขั้นสูง (ขึ้นกับแพลตฟอร์ม)
รองรับตารางแบบกว้าง/เลื่อนแนวนอน การคงส่วนหัว และสไตล์ด้วย CSS ในบางระบบเอกสาร เช่น VitePress/การปรับแต่งธีม:
html
<div style="overflow-x:auto">
<table>
<thead>
<tr><th>คีย์</th><th>ค่า</th></tr>
</thead>
<tbody>
<tr><td>theme</td><td>light</td></tr>
<tr><td>lang</td><td>th</td></tr>
</tbody>
</table>
</div>แนวปฏิบัติที่ดี
- ใช้หัวตารางที่สื่อความหมาย ชัดเจน กระชับ
- คุมความกว้างคอลัมน์ให้พอดี ไม่ยาวเกินไป
- สำหรับข้อมูลเชิงตัวเลข ให้จัดชิดขวาเพื่อเปรียบเทียบค่าได้ง่าย
- เพิ่มคำอธิบาย/หน่วย (เช่น %, ms, MB) เมื่อจำเป็น