2024-04-15
การสร้างตารางใน Markdown เป็นกระบวนการที่ตรงไปตรงมา ซึ่งช่วยเพิ่มการจัดระเบียบและการนำเสนอข้อมูลบนเว็บ ไกด์นี้ครอบคลุมทุกสิ่งที่คุณต้องรู้ ตั้งแต่ไวยากรณ์พื้นฐานไปจนถึงตัวเลือกการจัดรูปแบบขั้นสูง:
|
และขีด -
เพื่อสร้างตารางง่ายๆ:
.&
และ |
โดยใช้เอนทิตี้ HTML หรือแบคสแลชเมื่อเสร็จสิ้นไกด์นี้ คุณจะได้รับความรู้ในการสร้างตารางที่ชัดเจนและมีข้อมูลใน Markdown ทำให้เนื้อหาของคุณมีโครงสร้างและเข้าถึงได้ง่ายขึ้น
คุณสามารถตัดสินใจว่าจะแนข้อความในคอลัมน์อย่างไร โดยการปรับแต่งแถวขีด -
:
:---:
= ข้อความจัดชิดไปทางซ้าย:--:
= ข้อความอยู่กึ่งกลาง---:
= ข้อความจัดชิดไปทางขวา| ซ้าย | กึ่งกลาง | ขวา |
| :--- | :----: | ----: |
| ข้อความ | ข้อความ | ข้อความ |
ตัวอย่าง:
ซ้าย | กึ่งกลาง | ขวา |
---|---|---|
ข้อความ | ข้อความ | ข้อความ |
คุณสามารถทำให้ข้อความเป็นตัวหนา ตัวเอียง เพิ่มลิงก์ หรือแม้แต่โค้ดภายในเซลล์ของตารางโดยใช้เทคนิค Markdown ปกติ:
**
หรือ __
*
หรือ _
บล็อกโค้ดในบรรทัด
ตัวอย่าง:
ชื่อ | คำอธิบาย |
---|---|
จอห์น | ครูที่ชอบ การเรียนรู้ สิ่งใหม่ |
ซาร่าห์ | วิศวกรที่ทำงานใน โครงการ ที่เจ๋ง |
นี่แสดงให้เห็นถึงพื้นฐานในการสร้างตารางใน Markdown ด้วยการฝึกฝนเล็กน้อย ตารางเหล่านี้สามารถเป็นวิธีที่ยอดเยี่ยมในการจัดระเบียบข้อมูลให้ชัดเจนสำหรับหน้าเว็บหรือเอกสาร
เมื่อคุณกำลังสร้างตารางใน Markdown บางครั้งคุณอาจต้องการรวมอักขระพิเศษที่รูปแบบ Markdown มักใช้เพื่อสิ่งอื่น ตัวอย่างเช่น เนื่องจาก Markdown ใช้ท่อ |
เพื่อแยกคอลัมน์ หากคุณต้องการแสดงสัญลักษณ์ท่อภายในเซลล์ คุณจำเป็นต้องหาวิธีหลีกเลี่ยงเหตุการณ์นี้.
มีวิธีสองสามวิธีในการทำเช่นนี้:
วิธีหนึ่งคือการใช้เอนทิตี้อักขระ HTML เหล่านี้เป็นรหัสพิเศษที่ให้คุณแสดงอักขระที่มีความหมายอื่นใน HTML หรือ Markdown ตัวอย่างเช่น &
สำหรับแอมเพอร์แซนด์ &
และ |
สำหรับท่อ |
.
นี่คือวิธีที่มันดู:
อักขระ | เอนทิตี้ | ตัวอย่างการเรนเดอร์ |
---|---|---|
แอมเพอร์แซนด์ | & |
R&D |
ท่อ | | |
คอลัมน์|หัวข้อ |
คุณสามารถค้นหารายการ กลไกเอนทิตี้อักขระ HTML ได้ที่นี่.
อีกวิธีหนึ่งคือใส่แบคสแลช \
ก่อนอักขระพิเศษ ซึ่งบอก Markdown ให้ปฏิบัติต่ออักขระถัดไปเหมือนกับข้อความตัวอื่น.
\| = แสดงท่อ |
\\ = แสดงแบคสแลช \
แต่จดจำไว้ว่าการใช้แบคสแลชไม่ทำงานสำหรับอักขระทุกตัวในตาราง Markdown เช่น ท่อ |
.
สุดท้ายคุณสามารถใช้บล็อกโค้ด Markdown เพื่อแสดงอักขระพิเศษอย่างถูกต้อง โดยการใส่พวกมันในแบคติ๊ก `
.
`
| * | & | \ | | ``
``
นี่จะดูเหมือน:
* | & | \ | ` |
---|---|---|---|
* | & | \ | ` |
โดยสรุป ใช้เอนทิตี้ HTML หรือแบคสแลชเมื่อคุณสามารถทำเพื่อหนีอักขระพิเศษ สำหรับท่อและสัญลักษณ์ที่มีปัญหาอื่นๆ บล็อกโค้ดเป็นวิธีที่ดีในการแสดงพวกเขาอย่างชัดเจน.
Markdown มีหลายสไตล์แต่ละอย่างมีวิธีการจัดการตารางของตัวเอง มาดูกันว่าเหล่านี้มีแนวทางอย่างไรบ้างและเคล็ดลับในการสร้างตารางที่ยอดเยี่ยม:
GFM เป็นสิ่งที่คุณเห็นใน GitHub ซึ่งทำให้คุณสามารถสร้างตารางได้อย่างง่ายดาย:
| หัวข้อ 1 | หัวข้อ 2 |
|----------|----------|
| แถว 1a | แถว 1b |
| แถว 2a | แถว 2b |
คุณไม่จำเป็นต้องใส่ท่อ |
ที่ปลายแต่ละบรรทัด แต่ก็ควรเพื่อหลีกเลี่ยงข้อผิดพลาด.
รุ่นเหล่านี้เพิ่มตัวเลือกเพิ่มเติมสำหรับตาราง เช่น การจัดแนข้อความ:
| ขวา | ซ้าย | เริ่มต้น | กึ่งกลาง |
|------:|:-----|---------|:-----:|
| 12 | 12 | 12 | 12 |
| 123 | 123 | 123 | 123 |
ใช้เครื่องหมายทวิภาค :
เพื่อควบคุมการจัดแนข้อความ.
CommonMark ไม่มีไวยากรณ์ตารางของตัวเอง คุณต้องใช้แท็ก HTML ในการสร้างตาราง.
ใน GFM และสไตล์คล้ายกัน คุณไม่จำเป็นต้องมีท่อด้านข้าง |
:
หัวข้อ 1 | หัวข้อ 2
--------- | ---------
แถว 1a | แถว 1b
แถว 2a | แถว 2b
การไม่ใส่พวกมันอาจทำให้การแก้ไขง่ายขึ้น แต่การมีช่วยหลีกเลี่ยงข้อผิดพลาด.
ลองจับคู่ความกว้างของคอลัมน์เพื่อทำให้ตารางของคุณดูเรียบร้อยขึ้น:
| สั้น | คอลัมน์ตัวอย่างที่ยาวขึ้น |
|-------|-----------------------|
| ข้อความ | ข้อความตัวอย่างเพิ่มเติม |
นี่ทำให้ตารางของคุณอ่านง่ายขึ้น.
การสร้างตารางจากศูนย์อาจเป็นเรื่องยาก นี่คือเครื่องมือบางส่วนที่ช่วย:
เครื่องมือสร้างตาราง Markdown ช่วยให้คุณสร้างตารางได้โดยไม่ต้องเขียนโค้ด เพียงกรอกข้อมูลของคุณและมันจะให้โค้ด.
แปลงตาราง แปลงข้อมูลจากสเปรดชีตเป็นตาราง Markdown ได้อย่างรวดเร็ว.
ตัวแก้ไข Markdown Typora มีวิธีการง่ายในการเพิ่มและจัดรูปแบบตาราง.
แอพบางตัวทำให้ง่ายต่อการทำงานกับตาราง Markdown:
Typora มีเมนูที่ง่ายในการเพิ่มและเปลี่ยนแปลงตาราง.
Zettlr ช่วยให้คุณแทรกตารางพื้นฐานแล้วแก้ไขได้โดยตรง.
การรู้เคล็ดลับและเครื่องมือเหล่านี้สามารถทำให้การทำงานกับตาราง Markdown ง่ายขึ้นมาก อย่าลืมว่าจุดประสงค์คือการทำให้ข้อมูลชัดเจนและอ่านง่าย.
ให้เรามีการฝึกปฏิบัติกับการสร้างตารางด้วยการใช้ Markdown นี่คือแบบฝึกหัดง่ายๆ บางประการเพื่อช่วยให้คุณคุ้นเคย:
ก่อนอื่นมาสร้างตารางง่ายๆ ที่ระบุผลไม้ต่างๆ:
| ผลไม้ | สี | รูปร่าง |
| ผลไม้ | สี | รูปร่าง |
| - | - | - |
| ผลไม้ | สี | รูปร่าง |
| - | - | - |
| แอปเปิ้ล | แดง | กลม |
| ผลไม้ | สี | รูปร่าง |
| - | - | - |
| แอปเปิ้ล | แดง | กลม |
| กล้วย | เหลือง | ยาว |
| ส้ม | ส้ม | กลม |
ถัดไป มาตกแต่งตารางผลไม้ของเรากัน:
**
รอบๆ:| **ผลไม้** | **สี** | **รูปร่าง** |
| - | - | - |
| กล้วย | *เหลือง* | ยาว |
| ส้ม | [ส้ม](https://www.w3schools.com/colors/colors_names.asp) | กลม |
สำหรับความท้าทายเล็กน้อย มาสร้างตารางที่มีรายละเอียดมากขึ้น:
| **ชื่อ** | **ตำแหน่ง** | **เงินเดือน** |
| - | - | - |
| **ชื่อ** | **ตำแหน่ง** | **เงินเดือน** |
| - | - | - |
| จอห์น | ผู้จัดการ | $80,000 |
| ซาร่าห์ | นักพัฒนา | $60,000 |
| ลิซ่า | นักออกแบบ | $50,000 |
| **ชื่อ** | **ตำแหน่ง** | **เงินเดือน** |
| - | - | ---: |
การฝึกด้วยขั้นตอนเหล่านี้เป็นวิธีที่ดีในการทำความคุ้นเคยกับการสร้างตาราง Markdown ลองสร้างตารางประเภทต่างๆ และเล่นกับการจัดรูปแบบเพื่อดูสิ่งที่คุณสามารถทำได้.
การแก้ไขตารางใน Markdown อาจเป็นเรื่องยาก แต่การรู้คีย์บอร์ดลัดบางตัวสามารถทำให้มันง่ายขึ้นมาก นี่คือรายชื่อคีย์ลัดที่ช่วยให้คุณทำงานได้เร็วขึ้น:
Tab
- กระโดดไปยังเซลล์ถัดไปShift + Tab
- กลับไปยังเซลล์ก่อนหน้าEnter
- ย้ายลงไปยังแถวถัดไปCtrl/Cmd + Enter
- หยุดการแก้ไขตารางCtrl/Cmd + ลูกศร
- เคลื่อนที่ไปรอบๆ เซลล์ได้ง่ายCtrl/Cmd + l
- ทำให้ข้อความจัดชิดไปทางซ้ายCtrl/Cmd + e
- จัดกลางข้อความCtrl/Cmd + r
- จัดให้ข้อความชิดขวาCtrl/Cmd + .
- ลบการจัดแนวที่เฉพาะเจาะจงใดๆAlt + i
- เพิ่มแถวใหม่ด้านบนAlt + a
- เพิ่มแถวใหม่ด้านล่างAlt + j
- เพิ่มคอลัมน์ทางซ้ายAlt + l
- เพิ่มคอลัมน์ทางขวาAlt + Shift + i
- ลบแถวปัจจุบันAlt + Shift + a
- ลบแถวปัจจุบันAlt + Shift + j
- ลบคอลัมน์ปัจจุบันAlt + Shift + l
- ลบคอลัมน์ปัจจุบันShift + ลูกศร
- เลือกเซลล์เพิ่มเติมCtrl/Cmd + Alt + ลูกศร
- เคลื่อนที่ทั้งแถวหรือคอลัมน์การทำความคุ้นเคยกับคีย์ลัดเหล่านี้สามารถช่วยให้คุณทำงานด้วยตารางใน Markdown ได้เร็วขึ้น เก็บคู่มือนี้ไว้สำหรับการอ้างอิงอย่างรวดเร็ว.
การสร้างตารางด้วย Markdown ช่วยให้คุณจัดระเบียบข้อมูลได้อย่างเรียบร้อยสำหรับเว็บไซต์ มันค่อนข้างตรงไปตรงมาหากคุณเข้าใจอย่างแท้จริง ต่อไปนี้คือสิ่งที่ต้องจำ:
|
วางขีด -
ใต้แถวหัวเรื่องเพื่อแสดงว่าข้อความควรจัดเรียงอย่างไร:
ข้างๆ ขีดที่อยู่ใต้คอลัมน์ที่คุณต้องการปรับเพียงแค่ฝึกฝนต่อไปและไม่นานการสร้างตาราง Markdown จะรู้สึกง่ายดาย อย่าลืมให้ตารางของคุณเรียบง่ายและชัดเจน จุดประสงค์หลักคือการแชร์ข้อมูลในลักษณะที่ทุกคนเข้าใจได้ง่าย ตาราง Markdown เหมาะสำหรับเรื่องนี้เพราะช่วยให้คุณจัดเรียงข้อมูลในรูปแบบที่เรียบร้อยและชัดเจน.
ในการสร้างตารางใน Markdown ให้ใช้สัญลักษณ์ท่อ |
เพื่อสร้างคอลัมน์ ขีด -
เพื่อจัดเรียงข้อความใต้หัวเรื่อง และเครื่องหมายทวิภาค :
เพื่อจัดให้ข้อความอยู่ทางซ้าย กึ่งกลาง หรือขวา เริ่มต้นด้วยหัวเรื่องในแถวแรก ขีดในแถวที่สองเพื่อกำหนดคอลัมน์ และจากนั้นเพิ่มข้อมูลของคุณด้านล่าง รักษาทุกอย่างให้เรียบร้อยเพื่อให้อ่านง่าย โปรแกรม Markdown บางตัวสามารถช่วยคุณจัดรูปแบบตารางได้ง่ายขึ้น.
ในการจัดแนข้อความในตาราง:
:---
:---:
---:
เพียงแค่เปลี่ยนแปลงขีดใต้คอลัมน์ที่คุณต้องการจัดเรียงในแถวที่สอง.
โปรแกรม Markdown หลายตัว เช่น Typora หรือ Zettlr มีคีย์ลัดในการแทรกโครงสร้างตารางเปล่าอย่างรวดเร็ว ตัวอย่างเช่น ใน Typora บน Windows การกด Ctrl + T
จะใส่ตารางเปล่าลงในเอกสารของคุณ ตรวจสอบคู่มือตัวแก้ไขของคุณสำหรับคีย์ลัดที่เฉพาะเจาะจง.
ในการจัดระเบียบบล็อกโค้ด ให้เพิ่มบรรทัดว่างก่อนและหลังโค้ด และจัดระเบียบแต่ละบรรทัดของโค้ดด้วยช่องว่างอย่างน้อย 4 ช่องหรือ 1 แท็บ วิธีนี้จะบอกให้ Markdown จัดรูปลักษณ์ในรูปแบบพิเศษ โดยทั่วไปจะมีฟอนต์ที่แตกต่างกันเพื่อทำให้สะดุดตาเป็นโค้ด.