Markdown: صيغة الجداول والمحاذاة في Markdown
الجداول هي أداة قوية لمقارنة البيانات — عندما تنظم المعلومات المبعثرة في صفوف وأعمدة، تظهر الأنماط والرؤى بشكل طبيعي.
1. ما ستتعلمه
- إنشاء جداول Markdown باستخدام الخطوط العمودية
- ضبط محاذاة الأعمدة (يسار/وسط/يمين)
- استخدام التعليمات البرمجية والروابط والقوائم داخل الجداول
- فواصل الأسطر والتخطي في خلايا الجدول
- بدائل الجداول المعقدة
2. قصة حقيقية لمحلل بيانات
(1) نقطة الألم: بيانات فوضوية، مقارنة مستحيلة
كان تايلور يعد تقرير تقييم تقني ربع سنوي، يصف مقاييس أداء كل إطار عمل في فقرات. "React يُحمل في 2.3 ثانية، Vue يستغرق 1.8 ثانية، Svelte يسجل 1.2 ثانية..." عند الانتهاء، حتى هو وجد صعوبة في المقارنة — في كل مرة يحتاج فيها لمقارنة إطارين، كان عليه البحث في المستند بأكمله عن الأرقام. نظر مديره وقال: "ألا يمكنك عمل جدول؟ جدول يمكنك من رؤية كل شيء بنظرة واحدة."
(2) الحل: تنظيم البيانات بجداول Markdown
أعاد تايلور كتابة التقرير بتنسيق الجدول:
| إطار العمل | وقت التحميل | حجم الحزمة | منحنى التعلم |
|---|---|---|---|
| React | 2.3 ث | 142 ك.ب | متوسط |
| Vue | 1.8 ث | 58 ك.ب | منخفض |
| Svelte | 1.2 ث | 8 ك.ب | منخفض |
نظر مديره مرة واحدة وقال: "أرقام Svelte هي الأفضل — لنقم بتقييمه." جدول استغرق إعداده 5 دقائق اختصر عملية اتخاذ القرار من يومين إلى ساعتين.
3. أساسيات الجدول
يتكون جدول Markdown من ثلاثة أجزاء: صف الرأس وصف الفاصل وصفوف البيانات:
| رأس 1 | رأس 2 | رأس 3 |
|----------|----------|----------|
| بيانات 1 | بيانات 2 | بيانات 3 |
| بيانات 4 | بيانات 5 | بيانات 6 |
(1) البنية الأساسية
| اللغة | النوع | أول إصدار |
|:-----------|:-------|:--------------|
| Python | ديناميكية | 1991 |
| Java | ثابتة | 1995 |
| TypeScript | ثابتة | 2012 |
|، ويُفصل الرأس عن البيانات بصف ---. لا يهتم Markdown بمحاذاة الأعمدة بصريًا في المصدر، لكن المصدر المحاذي أسهل قراءة.
▶ مثال: أبسط جدول
| المنتج | السعر | التقييم |
|---------|-------|--------|
| أ | 29$ | 4.5 |
| ب | 49$ | 4.8 |
| ج | 19$ | 4.2 |
▶ مثال: مقارنة المحاذاة
| إطار العمل | التقييم | التنزيلات/شهر |
|:----------|:------:|-------------:|
| React | ⭐⭐⭐⭐⭐ | 25,000,000 |
| Vue | ⭐⭐⭐⭐ | 10,000,000 |
| Svelte | ⭐⭐⭐ | 2,500,000 |
5. تنسيق المحتوى في الجداول
(1) الروابط والتعليمات البرمجية
| المورد | الرابط | الوصف |
|:-----|:-----|:-----|
| GitHub | [زيارة](https://github.com) | استضافة الأكواد |
| MDN | [توثيق](https://developer.mozilla.org) | معايير الويب |
| تثبيت | `npm install` | استخدام npm |
(2) الغامق والمشطوب
| الأولوية | المهمة | المالك |
|:-------|:-----|:-------|
| **عالية** | ترحيل قاعدة البيانات | أليس |
| *متوسطة* | توثيق API | بوب |
| ~~منخفضة~~ | تنظيف الأكواد القديمة | — |
(3) فواصل الأسطر (دعم محدود)
جداول Markdown القياسية لا تدعم فواصل الأسطر داخل الخلايا. عند الحاجة، يمكنك الالتفاف على ذلك:
| الميزة | الوصف |
|:-----|:-----|
| سريع | يستخدم ذاكرة مخبأة للسرعة |
| آمن | نسخ احتياطي تلقائي للبيانات |
▶ مثال: جدول بمحتوى مختلط
| الأمر | الغرض | مثال |
|:-----|:-----|:------|
| `git add` | تنظيم الملفات | `git add index.html` |
| `git commit` | إيداع التغييرات | `git commit -m "إصلاح خطأ"` |
| **`git push`** | دفع إلى المستودع البعيد | `git push origin main` |
6. التعامل مع الجداول الكبيرة
(1) أعمدة متعددة
عندما يحتوي الجدول على أعمدة كثيرة (6+)، فكر في تقليمه أو تقسيمه إلى عدة جداول:
| الميزة | React | Vue | Svelte | Solid | Angular |
|:-----|:-----:|:---:|:------:|:-----:|:-------:|
| متجاوب | ✅ | ✅ | ✅ | ✅ | ✅ |
| DOM افتراضي | ✅ | ✅ | ❌ | ❌ | ✅ |
| وقت التصريف | ❌ | ❌ | ✅ | ✅ | ❌ |
| منحنى التعلم | متوسط | منخفض | منخفض | متوسط | عالي |
(2) نص طويل في الخلايا
عندما يكون محتوى الخلية طويلًا جدًا، استخدم صفوفًا متعددة لنفس الإدخال:
| الإصدار | الميزات الجديدة |
|:-----|:-------|
| v2.0 | دعم الوضع الداكن، تحسين الأداء بنسبة 30% |
| v1.5 | إضافة البحث، إصلاح خطأ تسجيل الدخول |
| v1.0 | أول إصدار رسمي |
> **💡 نصيحة:** تجنب أكثر من 3 أسطر من النص في الخلية. إذا كنت بحاجة حقًا لذلك، فكر في استخدام تنسيق عنوان + فقرة بدلاً من ذلك.
7. بدائل الجداول
عندما لا ��تناسب المحتوى جيدًا في جدول، فكر في هذه البدائل:
| البديل | الأنسب لـ | المزايا |
|---|---|---|
| قائمة غير مرتبة | الإدراجات البسيطة | أكثر مرونة، تدعم التداخل |
| قائمة تعريفات | مصطلحات المسرد | تنسيق طبيعي للمفتاح والقيمة |
| عنوان + فقرة | الأوصاف المعقدة | تدعم جميع صيغ Markdown |
| رسوم Mermaid | العلاقات/التدفقات | تصور أقوى |
8. مثال كامل: جدول مقارنة تقنية كامل
# مقارنة مزودي الخدمات السحابية
## التسعير (تقدير شهري)
| المزود | مبتدئ | محترف | مؤسسات |
|:------|:------:|:------:|:------:|
| المزود أ | 5$/شهر | 49$/شهر | 299$/شهر |
| المزود ب | 12$/شهر | 39$/شهر | 199$/شهر |
| المزود ج | 0$ (مجاني) | 29$/شهر | 149$/شهر |
## دعم الميزات
| الميزة | المزود أ | المزود ب | المزود ج |
|:-----|:--------:|:--------:|:--------:|
| نشر تلقائي | ✅ | ✅ | ✅ |
| نطاق مخصص | ✅ | ✅ | ✅ |
| شهادة SSL | تلقائي | يدوي | تلقائي |
| CDN | ✅ | ❌ | ✅ |
| قاعدة بيانات | PostgreSQL | MySQL | استضافة ذاتية |
| الدعم | بريد إلكتروني | **هاتف 24/7** | مجتمع |
> **توصية:** اختر المزود ج للمشاريع الشخصية (مجاني)، والمزود ب للفرق الصغيرة والمتوسطة (دعم رائع)، والمزود أ للمؤسسات (نظام بيئي ناضج).
## ملخص نقاط القوة
| المزود | نقطة القوة الرئيسية | الأنسب لـ |
|:------|:---------|:---------|
| أ | ميزات شاملة، توثيق غني | المطورين المحترفين |
| ب | دعم رائع، واجهة سهلة الاستخدام | الفرق الصغيرة/المتوسطة |
| ج | فئة مجانية، سهل البدء | المشاريع الشخصية، التعلم |
النتيجة المتوقعة: جداول متعددة مرتبطة تغطي التسعير والميزات والسيناريوهات الموصى بها — مما يمكّن القراء من اتخاذ قرارات سريعة ومستنيرة.
❓ أسئلة شائعة
--- بين الرأس والبيانات) ② عدد الأعمدة غير متسق ③ صيغة الجدول مكتوبة داخل كتلة تعليمات برمجية (كتل التعليمات البرمجية لا تُعرض).<table><tr><td colspan="2">مدمجة</td></tr></table>.. لكن الفروق الكبيرة في ارتفاع الصور يمكن أن تفسد مظهر الجدول.:--- لليسار، :--: للوسط، ---: لليمين.📖 ملخص
- يتكون الجدول من ثلاثة أجزاء: صف الرأس وصف الفاصل وصفوف البيانات
- النقطتان الرأسيتان في صف الفاصل تتحكمان في محاذاة الأعمدة
- الجداول تدعم العناصر المضمنة: غامق، مائل، تعليمات برمجية، روابط
- العناصر على مستوى الكتلة مثل الخلايا المدمجة والنص متعدد الفقرات وكتل التعليمات البرمجية غير مدعومة
- الجداول العريضة (>5 أعمدة) يجب تقسيمها أو نقلها
- للمحتوى المعقد، استخدم تنسيق عنوان + فقرة بدلاً من الجداول
📝 تمارين
-
أساسي: أنشئ جدولاً من 4 أعمدة و 5 صفوف يسرد 4 أدوات/برامج تستخدمها، مع أعمدة للاسم والغرض والسعر والتقييم. استخدم تنسيق غامق لصف الرأس.
-
متوسط: أنشئ جدولاً يوضح المحاذاة: حاذِ العمود الأول لليسار، والثاني للوسط، والثالث لليمين. ا��تر محتواك الخاص (مثلاً، كثافة سكان الدول، مقارنة أسعار المنتجات).
-
متقدم: اكتب "تقرير مقارنة لغات البرمجة" باستخدام جداول متعددة مترابطة، تغطي 4 لغات على الأقل عبر 4 أبعاد: الأداء، تكلفة التعلم، فرص العمل، ونشاط المجتمع. أضف توصية شاملة في الأسفل.
