قواعد الجداول

الجداول جزء مهم من القواعد الموسعة في Markdown لعرض البيانات بشكل مُنظّم.

قواعد الجداول الأساسية

جدول بسيط

استخدم الفاصل العمودي | بين الأعمدة، و- لسطر فاصل عنوان الجدول:

markdown

| الاسم | العمر | المهنة |
|------|------|------|
| أحمد | 25 | مهندس |
| ليلى | 30 | مصممة |
| كريم | 28 | مدير منتج |

العرض:

الاسم	العمر	المهنة
أحمد	25	مهندس
ليلى	30	مصممة
كريم	28	مدير منتج

محاذاة الأعمدة

تُستخدم النقطتان : للتحكم بمحاذاة الأعمدة:

markdown

| محاذاة يسار | توسيط | محاذاة يمين |
|:-------|:--------:|-------:|
| 内容1  | 内容1    | 内容1  |
| 内容2  | 内容2    | 内容2  |
| 内容3  | 内容3    | 内容3  |

العرض:

محاذاة يسار	توسيط	محاذاة يمين
内容1	内容1	内容1
内容2	内容2	内容2
内容3	内容3	内容3

شرح أنماط المحاذاة

صياغة المحاذاة

الصياغة	أسلوب المحاذاة	مثال
`---`	左对齐（默认）	`
`:--:`	居中对齐	`
`--:`	右对齐	`

جداول البيانات الرقمية

تُعرض الأرقام عادة بمحاذاة يمين:

markdown

| المنتج | السعر | المبيعات | الإيراد |
|:-----|-----:|-----:|-----:|
| المنتج A | ¥99 | 1,250 | ¥123,750 |
| المنتج B | ¥199 | 856 | ¥170,344 |
| المنتج C | ¥299 | 432 | ¥129,168 |
| **الإجمالي** | | **2,538** | **¥423,262** |

渲染效果：

产品	价格	销量	收入
产品A	¥99	1,250	¥123,750
产品B	¥199	856	¥170,344
产品C	¥299	432	¥129,168
总计		2,538	¥423,262

تنسيقات داخل الجداول

تنسيق ضمن الخلايا

تدعم خلايا الجدول تنسيقات Markdown ضمن السطر:

markdown

| الميزة | الحالة | الوصف |
|------|------|------|
| **تسجيل الدخول** | ✅ مكتمل | يمكن للمستخدم الدخول بالبريد |
| *التسجيل* | 🚧 جارٍ | دعم تسجيل طرف ثالث |
| `إعادة تعيين كلمة المرور` | ❌ قيد التخطيط | عبر البريد |
| [مركز المستخدم](/) | ⏳ مُخطط | إدارة معلومات المستخدم |

渲染效果：

功能	状态	描述
登录	✅ 完成	用户可以使用邮箱登录
注册	🚧 进行中	支持第三方注册
`重置密码`	❌ 待开发	通过邮件重置密码
用户中心	⏳ 计划中	用户信息管理

الشيفرة داخل الجداول

markdown

| الأمر | الوظيفة | مثال |
|------|------|------|
| `ls` | سرد الملفات | `ls -la` |
| `cd` | تبديل المسار | `cd /home/user` |
| `mkdir` | إنشاء مجلد | `mkdir new-folder` |
| `rm` | حذف ملفات | `rm -rf folder/` |

渲染效果：

命令	功能	示例
`ls`	列出文件	`ls -la`
`cd`	切换目录	`cd /home/user`
`mkdir`	创建目录	`mkdir new-folder`
`rm`	删除文件	`rm -rf folder/`

أمثلة لجداول معقّدة

جدول مقارنة تقني

markdown

| الخاصية | React | Vue | Angular |
|:-----|:-----:|:---:|:-------:|
| **صعوبة التعلّم** | متوسطة | سهلة | صعبة |
| **الأداء** | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| **المنظومة** | غني | جيد | كامل |
| **دعم الشركات** | Facebook | مستقل | Google |
| **TypeScript** | ✅ | ✅ | ✅ مُدمج |
| **نشاط المجتمع** | عالٍ جداً | عالٍ | متوسط |

渲染效果：

特性	React	Vue	Angular
学习难度	中等	简单	困难
性能	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
生态系统	丰富	良好	完整
企业支持	Facebook	独立	Google
TypeScript	✅	✅	✅ 内置
社区活跃度	非常高	高	中等

جدول توثيق API

markdown

| البارامتر | النوع | إلزامي | القيمة الافتراضية | الوصف |
|------|------|:----:|--------|------|
| `id` | `number` | ✅ | - | معرّف المستخدم الفريد |
| `name` | `string` | ✅ | - | اسم المستخدم |
| `email` | `string` | ✅ | - | بريد المستخدم |
| `age` | `number` | ❌ | `null` | عمر المستخدم |
| `avatar` | `string` | ❌ | `"/default.jpg"` | مسار الصورة |
| `status` | `enum` | ❌ | `"active"` | حالة الحساب: `active` \| `inactive` |

渲染效果：

参数	类型	必需	默认值	描述
`id`	`number`	✅	-	用户唯一标识符
`name`	`string`	✅	-	用户姓名
`email`	`string`	✅	-	用户邮箱地址
`age`	`number`	❌	`null`	用户年龄
`avatar`	`string`	❌	`"/default.jpg"`	头像URL
`status`	`enum`	❌	`"active"`	账户状态：`active` \| `inactive`

حيل لتنسيق الجداول

استخدام الرموز التعبيرية

markdown

| نظام التشغيل | حالة الدعم | ملاحظات |
|----------|:--------:|------|
| Windows | ✅ | مدعوم بالكامل |
| macOS | ✅ | مدعوم بالكامل |
| Linux | ⚠️ | دعم جزئي |
| iOS | ❌ | غير مدعوم |
| Android | 🚧 | قيد التطوير |

渲染效果：

操作系统	支持状态	备注
Windows	✅	完全支持
macOS	✅	完全支持
Linux	⚠️	部分支持
iOS	❌	不支持
Android	🚧	开发中

استخدام الشارات

markdown

| المشروع | الحالة | الإصدار |
|------|------|------|
| React | ![Stable](https://img.shields.io/badge/status-stable-green) | `v18.2.0` |
| Vue | ![Stable](https://img.shields.io/badge/status-stable-green) | `v3.3.0` |
| Angular | ![Beta](https://img.shields.io/badge/status-beta-orange) | `v16.0.0` |

التعامل مع الخلايا الفارغة

تمثيل المحتوى الفارغ

markdown

| البند | Q1 | Q2 | Q3 | Q4 |
|------|:--:|:--:|:--:|:--:|
| الإيرادات | 100万 | 120万 | - | - |
| المصروفات | 80万 | 90万 | 95万 | - |
| الربح | 20万 | 30万 | | |

渲染效果：

البند	Q1	Q2	Q3	Q4
الإيرادات	100万	120万	-	-
المصروفات	80万	90万	95万	-
الربح	20万	30万

أخطاء شائعة وحلولها

1) عدم محاذاة خطوط الأنابيب |

markdown

❌ الخطأ：
| الاسم | العمر|المهنة|
|------|-----|-----|
|أحمد|25|مهندس|

✅ الصحيح：
| الاسم | العمر | المهنة |
|------|------|------|
| أحمد | 25 | مهندس |

2) الفقدان سطر الفاصل

markdown

❌ الخطأ：
| الاسم | العمر | المهنة |
| أحمد | 25 | مهندس |

✅ الصحيح：
| الاسم | العمر | المهنة |
|------|------|------|
| أحمد | 25 | مهندس |

3) عدم تطابق عدد الأعمدة

markdown

❌ الخطأ：
| الاسم | العمر | المهنة |
|------|------|------|
| أحمد | 25 |  ← العمود الثالث مفقود

✅ الصحيح：
| الاسم | العمر | المهنة |
|------|------|------|
| أحمد | 25 | مهندس |

4) التعامل مع المحارف الخاصة

markdown

❌ المشكلة：
| السعر | الوصف |
|------|------|
| $100|الضريبة |  ← الفاصل المائي مستخدم بشكل خاطئ

✅ الحل：
| السعر | الوصف |
|------|------|
| $100 | الضريبة |
| $200 | السعر\|الضريبة |  ← الفاصل المائي مصفوف

ميزات متقدمة للجداول

تعزيز باستخدام HTML

markdown

<table>
  <tr>
    <th colspan="2">العمود المدمج</th>
    <th>العمود العادي</th>
  </tr>
  <tr>
    <td rowspan="2">الصف المدمج</td>
    <td>البيانات 1</td>
    <td>البيانات 2</td>
  </tr>
  <tr>
    <td>البيانات 3</td>
    <td>البيانات 4</td>
  </tr>
</table>

渲染效果：

العمود المدمج		العمود العادي
الصف المدمج	البيانات 1	البيانات 2
الصف المدمج	البيانات 3	البيانات 4

تخصيص أنماط الجداول

markdown

<table style="width: 100%; border-collapse: collapse;">
  <tr style="background-color: #f0f0f0;">
    <th style="border: 1px solid #ddd; padding: 8px;">المنتج</th>
    <th style="border: 1px solid #ddd; padding: 8px;">السعر</th>
  </tr>
  <tr>
    <td style="border: 1px solid #ddd; padding: 8px;">المنتج A</td>
    <td style="border: 1px solid #ddd; padding: 8px; color: red;">¥99</td>
  </tr>
</table>

سيناريوهات تطبيق فعلية

1) إدارة المشاريع

markdown

## جدول المهام

| المهمة | المسؤول | الوقت البدء | الوقت الانتهاء | الحالة | التقدم |
|------|--------|----------|----------|:----:|:------:|
| التحليل المطلوب | أحمد | 2023-10-01 | 2023-10-07 | ✅ | 100% |
| تصميم UI | ليلى | 2023-10-08 | 2023-10-15 | 🚧 | 75% |
| تطوير الواجهة الأمامية | محمد | 2023-10-16 | 2023-10-30 | ⏳ | 0% |
| تطوير الواجهة الخلفية | علي | 2023-10-16 | 2023-11-05 | ⏳ | 0% |
| الاختبار | حسين | 2023-11-06 | 2023-11-12 | ⏳ | 0% |

2) مقارنة المنتجات

markdown

## مقارنة الاشتراكات

| الميزة | المجاني | المهني | الشركة |
|------|:------:|:------:|:------:|
| **العدد المستخدم** | 5人 | 50人 | اللانهائي |
| **المساحة المخزنة** | 1GB | 100GB | 1TB |
| **API الاستدعاء** | 1000/الشهر | 10万/الشهر | اللانهائي |
| **الدعم الفني** | المجتمع | البريد | الدعم الخاص |
| **SLA التأكد** | - | 99.9% | 99.99% |
| **السعر** | المجاني | ¥99/الشهر | ¥999/الشهر |
| | [اختيار](/) | [اختيار](/) | [اتصل بالمبيعات](/) |

3) التقارير المالية

markdown

## قائمة المصروفات

| البند | 1月 | 2月 | 3月 | 总计 |
|------|----:|----:|----:|-----:|
| **收入** | | | | |
| المبيعات | 50,000 | 55,000 | 60,000 | 165,000 |
| الدخل الخدمي | 20,000 | 22,000 | 25,000 | 67,000 |
| الدخل الآخر | 2,000 | 1,500 | 3,000 | 6,500 |
| *小计* | *72,000* | *78,500* | *88,000* | *238,500* |
| **支出** | | | | |
| الرواتب | 30,000 | 30,000 | 30,000 | 90,000 |
| المكافئات | 8,000 | 8,000 | 8,000 | 24,000 |
| التسويق | 10,000 | 12,000 | 15,000 | 37,000 |
| *小计* | *48,000* | *50,000* | *53,000* | *151,000* |
| **净利润** | **24,000** | **28,500** | **35,000** | **87,500** |

أفضل الممارسات

1) الحفاظ على البساطة

markdown

✅ مُوصى به: بسيط وواضح
| المشروع | الحالة |
|------|------|
| A | 完成 |
| B | 进行中 |

❌ غير مُوصى به: حمولة معلوماتية زائدة
| اسم المشروع | الحالة الحالية | وصف تفصيلي | المسؤول | البداية | الانتهاء | ملاحظات |

2) استخدام عناوين ذات معنى

markdown

✅ مُوصى به: عناوين وصفية
| لغة البرمجة | صعوبة التعلّم | مجال التطبيق |

❌ غير مُوصى به: عناوين مبهمة
| مشروع 1 | مشروع 2 | مشروع 3 |

3) استخدام المحاذاة بشكل مناسب

markdown

✅ مُوصى به: أرقام بمحاذاة يمين
| المنتج | السعر | الكمية |
|:-----|-----:|-----:|
| A | ¥100 | 50 |

✅ مُوصى به: نص بمحاذاة يسار
| الاسم | القسم | الوظيفة |
|:-----|:-----|:-----|
| 张三 | 技术部 | 工程师 |

ناتج HTML

تحويل جدول Markdown إلى HTML:

markdown

| الاسم | العمر |
|------|------|
| 张三 | 25 |

تُحوَّل إلى:

html

<table>
  <thead>
    <tr>
      <th>الاسم</th>
      <th>العمر</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>أحمد</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

قواعد ذات صلة

نظرة عامة على القواعد الأساسية - أساسيات Markdown
نظرة عامة على القواعد الموسعة - مزيد من الميزات
قواعد HTML - تعزيز بـ HTML

تمارين

جرّب إنشاء الجداول التالية:

جدول تعارف أعضاء الفريق
جدول مقارنة أسعار المنتجات
جدول تتبع تقدم مشروع
جدول تقييم حزمة تقنية

工具推荐

مولدات الجداول

أدوات على الويب: Tables Generator، Markdown Tables Generator
إضافات محرر: VS Code Markdown Table، محرر جداول Typora
أدوات تحويل: Excel to Markdown، CSV to Markdown

تحسين شكل الجداول

أطر CSS: Bootstrap، Tailwind CSS
مكتبات جداول: DataTables، AG Grid
توسعات Markdown: markdown-it-table، remark-gfm

قواعد الجداول ​