إضافة جدول إلى منشورك باستخدام markdown

[Discourse]

يشرح هذا الدليل كيفية إضافة جداول إلى منشورات Discourse الخاصة بك باستخدام لغة ماركداون (Markdown).

مستوى المستخدم المطلوب: جميع المستخدمين

يمكن أن يساعد إضافة الجداول إلى منشوراتك في عرض البيانات بتنسيق منظم وسهل القراءة. سيرشدك هذا الدليل خلال إنشاء الجداول في ماركداون على Discourse، ويغطي أساسيات الجدول، والمحاذاة، والميزات الخاصة مثل إضافة الرموز التعبيرية (emojis) والصور.

استخدام مُنشئ الجدول (Table Builder)

تتضمن Discourse أداة Table Builder مدمجة تتيح لك إنشاء الجداول وتعديلها باستخدام واجهة تشبه جداول البيانات — لا حاجة لمعرفة ماركداون.

لإدراج جدول جديد:

1. افتح المُنشئ (composer)
2. انقر على زر في شريط الأدوات (قائمة الخيارات)
3. اختر Insert table (إدراج جدول)
4. استخدم محرر جداول البيانات لإضافة رؤوس الأعمدة والبيانات الخاصة بك
5. انقر على Build Table (بناء الجدول) لإدراج جدول ماركداون المُنشأ في منشورك

لتعديل جدول موجود في منشور، انقر على زر Edit Table (تعديل الجدول) الذي يظهر فوق الجدول (مرئي للمستخدمين الذين لديهم أذونات التعديل). يفتح هذا نفس محرر جداول البيانات المملوء مسبقًا ببيانات الجدول.

إنشاء جدول بسيط

إن إنشاء جدول في Discourse باستخدام ماركداون أمر بسيط. إليك دليل خطوة بخطوة:

1. ابدأ بتعريف الرأس (header):

• سيحتوي الصف الأول من جدولك على رؤوس لكل عمود.
• يفصل الصف الثاني الرؤوس عن بقية الجدول.

إليك مثال لجدول بثلاثة أعمدة:

| Col A | Col B | Col C |
|---|---|---|

ينتج عن هذا:

Col A	Col B	Col C

2. أضف صفوف البيانات:

• يبدأ كل صف وينتهي بالرمز |.
• تأكد من أن عدد الأعمدة يطابق عدد رؤوس الأعمدة.

مثال:

| Col A | Col B | Col C |
|---|---|---|
| A1 | B1 | C1 |
| A2 | B2 | :smile: |

ينتج عن هذا:

Col A	Col B	Col C
A1	B1	C1
A2	B2

المحاذاة (Alignment)

يمكنك التحكم في محاذاة محتويات الأعمدة باستخدام النقطتين الرأسيتين (:):

• محاذاة لليسار: |:---|
• محاذاة للوسط: |:---:|
• محاذاة لليمين: |---:|

مثال:

| Left | Center | Right |
|:---|:---:|---:|
| My content is on the left | I'm the center of the world | I like being on the right side |
| :waxing_gibbous_moon: | :full_moon: | :waning_gibbous_moon: |

ينتج عن هذا:

Left	Center	Right
My content is on the left	I’m the center of the world	I like being on the right side

الروابط القابلة للنقر في الجداول

يمكن أن يكون إضافة روابط قابلة للنقر داخل الجداول مفيدًا لتوجيه المستخدمين إلى موارد أو محتوى خارجي محدد.

لتضمين رابط قابل للنقر، استخدم بناء جملة ماركداون القياسي للرابط داخل خلية الجدول. الصيغة هي [نص الرابط](URL).

مثال:

| Column A | Column B | Column C |
|---|---|---|
| [Google](https://www.google.com) | Example Text | Another Link |

ينتج عن هذا:

Column A	Column B	Column C
Google	Example Text	Another Link

الصور في الجداول

لاستخدام الصور في الجداول، ستحتاج إلى استخدام حرف الهروب \ قبل الرمز | في كود الصورة بعد تحميلها.

مثال:

Image | Description
---|---
![A Chihuahua enjoying espresso \|411x500, 30%](upload://yHjzeeWrEA1oWYMT9ATBOPudbKk.jpeg) | A Chihuahua enjoying espresso in a cafe.

ينتج عن هذا:

Image	Description
	A Chihuahua enjoying espresso in a cafe.

الصور القابلة للنقر في الجداول

لجعل الصورة قابلة للنقر، يمكنك تضمين بناء جملة ماركداون للصورة داخل بناء جملة ماركداون للرابط. إليك الصيغة الأساسية:

[![نص بديل للصورة](رابط الصورة)](رابط الوجهة)

يعد نص بديل للصورة مهمًا لإمكانية الوصول، حيث يصف الصورة إذا لم يتم تحميلها أو إذا كانت تستخدمها قارئات الشاشة. استخدم دائمًا نصًا بديلاً ذا معنى.

إليك كيفية دمج الصور القابلة للنقر في جدول ماركداون:

| Image 1 | 
|---|
| [![Discourse Logo](upload://38VzhGhUKzAURX4FN7LfBEpX6r1.png)](https://meta.discourse.org/)

ينتج عن هذا:

Image 1

النسخ واللصق للجداول

يمكنك نسخ الجداول من المستندات الخارجية أو جداول البيانات ولصقها مباشرة في المنشورات، ستقوم Discourse تلقائيًا بتحويلها إلى ماركداون.

إذا كنت تقوم بإنشاء الجداول بشكل متكرر، يمكنك أيضًا استخدام أدوات مثل TableConvert لتحويل الجداول من تنسيقات أخرى (CSV، JSON، إلخ) إلى ماركداون.

[Falco]

Great guide!

Also, if you have a Spreadsheet or a CSV file, and don’t want to convert it manually, I always use this online tool: Markdown Tables generator - TablesGenerator.com

[Biscuit]

Is there any way to add the vertical borders between columns, without using CSS?

[Steven]

Sadly no. You’d have to add it on the css customize section

Something like that should do it :

.cooked table td, .cooked table th, .d-editor-preview table td, .d-editor-preview table th {
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
}

[Biscuit]

Thanks. I don’t have admin rights, so unfortunately I can’t modify CSS.

I was hoping an ASCII character like a plus sign would add a vertical border in the table. eg:

+---+---+ 

Sounds like that’s not available.

[W.M]

How to add a custom class attribute to the table?

[ChameleonScales]

How can we make a table of clickable thumbnails ?
I don’t want to use a “hyperlink thumbnail” which would lead you to a new page but rather use Discord’s slideshow tool.
I know we can make thumbnails by using ![title|230x180](image-url) but apparently the vertical bar | inside the brackets breaks the table.
Is there a way around this problem ?

[Steven]

You can use html to make a clickable thumbnail, it will be less perfect, but it’ll work

<a href=""><img src="" width="" height=""></a>

Edit: uh wait, I just have a little doubt, I’m not sure html is supported in tables

[ChameleonScales]

As I said, I don’t want hyperlink images that open a new page.

I want clickable thumbnails that open directly in Discourse and let you slide through the gallery without leaving the website. Just like this :

but inside a table.

[notriddle (Michael Howell)]

Here’s a table with clickable thumbnails in it

Your picture	My picture

Here’s how I did it

<table>
<tr><th>Your picture</th><th>My picture</th></tr>
<tr>
<td>

![Bayon%20temple|271x180](upload://icDRdwwiwP7yGzIQNRNG9R8pLTN.jpg)

</td><td>

![jeezus|225x225](//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/d/0/d0cea6798be0f38d39a73056bc45a57ec8a55fba.jpg)

</td>
</tr>
</table>

[ChameleonScales]

Thanks, I actually found the same solution in the mean time but that’s perfect !
Would’ve been more handy in Mardown entirely but this is great already.

Boom baby !

[Falco]

You can do it in pure markdown by escaping the pipe in the images, as we discussed here: Pictures don't upload well into tables because of the straight bar symbol

[ChameleonScales]

Perfect ! Thank you

[adrianbblk]

Is there a way to make it responsive? I mean the width of the table to adjust based on the screen size?

Thanks

[Steven]

It’s already responsive-ish, but it can be optimized

.md-table {
    width: 100%;
}

.md-table table {
    width: 100%;
}

This would be the base to something like this, the table will use all the width of the post on bigger screens. And when you reduce the size of the window, it will adapt.

But it won’t be perfect. If you have only two small columns the table will seem empty, if you have a lot of columns, it will not fit on smaller screens. But it’s a start

[Ayayo]

The most difficult thing for me to do in Markdown syntax is creating tables. I do not need very complicated tables: just simple ones. But even for simple tables, the syntax for tables is … terrible…

And here comes an online TableConvert which is not only a markdown table generator but also a markdown table editor. It’s an easy thing to convert json, csv, excel, latex table and html table into markdown tables.

[codinghorror (Jeff Atwood)]

It’s not all that bad:

hello	there
minimal	table

|hello|there|
|-|-|
|minimal|table|

But sharing tools is always good too.

[justin (Justin DiRose)]

I always forget the syntax because I create tables maybe once every 3 months

[codinghorror (Jeff Atwood)]

Just remember the pipe key and you are 90% of the way there!

[Canapin (Coin-coin le Canapin)]

@Steven

But it won’t be perfect. If you have only two small columns the table will seem empty, if you have a lot of columns, it will not fit on smaller screens. But it’s a start

A behavior similar to bootstrap responsive tables would be neat.
If a table is larger than your screen, it’s becomes horizontally scrollable. Couldn’t be simplier, and it works well.