วิธีเพิ่มขอบให้กับตารางใน Markdown ทำได้อย่างไร?

2024-08-05

รุ่นสั้น

Markdown ไม่รองรับขอบตารางโดยตรง; ใช้ HTML แทน:

<table>
<tr>
<th>ชื่อ</th>
<th>อายุ</th>
<th>สถานที่ตั้ง</th>
</tr>
<tr>
<td>จอห์น</td>
<td>30</td>
<td>สหรัฐอเมริกา</td>
</tr>
<tr>
<td>เจน</td>
<td>25</td>
<td>แคนาดา</td>
</tr>
</table>

รุ่นยาว

1. การเข้าใจข้อจำกัดของ Markdown

Markdown เองไม่มีการสนับสนุนแบบเนทีฟในการเพิ่มขอบให้กับตาราง อย่างไรก็ตาม มันให้วิธีในการสร้างตารางง่าย ๆ โดยใช้ท่อและขีดสำหรับคอลัมน์และแถว

2. การใช้ HTML สำหรับตารางที่มีขอบ

หากจำเป็นต้องใช้ขอบ คุณสามารถใช้ HTML มาตรฐานแทนไวยากรณ์ Markdown นี่คือวิธี:

<table>
<tr>
<th>ชื่อ</th>
<th>อายุ</th>
<th>สถานที่ตั้ง</th>
</tr>
<tr>
<td>จอห์น</td>
<td>30</td>
<td>สหรัฐอเมริกา</td>
</tr>
<tr>
<td>เจน</td>
<td>25</td>
<td>แคนาดา</td>
</tr>
</table>

นี่จะทำให้เรนเดอร์ตารางที่มีขอบ ไม่ว่าจะเป็นการเรนเดอร์ Markdown แบบใด

3. การจัดรูปแบบขอบด้วย CSS

หากคุณกำลังฝัง Markdown ภายในหน้าเว็บ คุณสามารถจัดรูปแบบขอบตารางโดยใช้ CSS ใช้กฎ CSS ต่อไปนี้เพื่อเพิ่มขอบให้กับตารางทั้งหมด:

table,
th,
td {
    border: 1px solid black;
    border-collapse: collapse;
}

การเพิ่ม CSS นี้จะทำให้ด้านวิชวลของตาราง Markdown ดีขึ้นเมื่อเรนเดอร์ในสภาพแวดล้อมเว็บ