مساعدة:جدول

ويكي شيعة

سياسات وإرشادات

مساعدة

مساعدة متقدمة

المواضيع

اتصل بنا

عن

قالب:على الميتا

تسمح الجداول بتقديم المعلومات بشكل أحسن. في حالة ما إذا كنت تجيد استعمال HTML يمكنك إنشاء جدول باستعمال المصدر مباشرة في المقال الذي تريد إدراج جدول به.

يمكن الآن نسخ الجداول من برنامج إكسيل وتحويلها إلى صورة الويكي راجع هذه الصفحة: مساعدة:جدول من إكسيل إلى ويكي

إلا أن وسوم الجداول تكون في بعض الحالات صعبة خاصة بالنسبة للمستخدمين الذين لا يجيدون استعمال HTML. لهذا تم تطوير وسوم خاصة على يد Magnus Manske . هذه الوسوم تحل محل <table>, <tr>, <td>, <th> و <caption>

أمثلة

المثال الأول جدول بخلية واحدة مع القن المصدري wiki.

النتيجة

قن Wiki

قن HTML

خلية

{| border="1"
|خلية
|}

<table border="1">
  <tr>
    <td>خلية</td>
  </tr>
</table>

المثال الثاني جدول يضم خليتين.

النتيجة

قن Wiki

قن HTML

يمين

يسار

{| border="1"
|يمين
|يسار
|}

<table border="1">
  <tr>
    <td>يمين</td>
    <td>يسار</td>
  </tr>
</table>

يمين

يسار

{| border="1"
|يمين || يسار
|}

<table border="1">
  <tr>
    <td>يمين</td>
    <td>يسار</td>
  </tr>
</table>

صيغة الجدول

سنرى هنا جميع أنواع الوسوم التي تمكن من إنشاء جدول.

جدول

في لغة HTML, العنصر table أساسي لإنشاء جدول. في wiki لإنشاء جدول نقوم بما يلي:

{| ملحقات |}

الذي يعطي في لغة HTML القن الآتي:

<table ملحقات>
</table>

نرى إذن أن الجدول يبدأ دائما بلامة مفتوحة { ، متبوعة بخط عمودي |. و نهاية الجدول تنتهي بوسوم عكسية.

المجال أو الحقل ملحقات يتضمن كيفية استعمال ملحقات كاللون الحجم الإطار.

td

في HTML العنصر td يمثل خلية في سطر. و لإنشاء جدول نستعمل ما يلي:

|خلية1
|خلية2
|خلية3

يمكن أيضا استعمال ما يلي:

|خلية1||خلية2||خلية3

الذي يعطي في لغة HTML القن الآتي:

<td>خلية1</td><td>خلية2</td><td>خلية3</td>

كما يمكن إضافة ملحقات للخلية:

|ملحقات|خلية1
|ملحقات|خلية2
|ملحقات|خلية3

أو:

|ملحقات|خلية1||ملحقات|خلية2||ملحقات|خلية3

الذي يعطي في لغة HTML القن الآتي:

<td ملحقات>خلية1</td><td ملحقات>خلية2</td><td ملحقات>خلية3</td>

tr

الوسم tr يمكن من ادراج سطر جديد. لإنشاء سطر نستعمل:

|-

أو

|-----------------------------------------------------

الذي يعطي في لغة HTML القن الآتي:

<tr> ... </tr>

يمكن هنا أيضا استعمال ملحقات :

|- ملحقات

الذي يعطي في لغة HTML القن الآتي:

<tr ملحقات> ... </tr>

th

الوسوم th تشبه الوسوم td, الفرق يتجلى في أن يظهر النص على شكل عنوان. الصيغة مختلفة حيث نستعمل ! بدل |.

!عنوان1
!عنوان2
!عنوان3

أو:

!عنوان1!!عنوان2!!عنوان3

في حين بين المحتوى و ملحقات, نستعمل دائما الخط العمودي |

!ملحقات|عنوان1!!ملحقات|عنوان2!!ملحقات|عنوان3

ونحصل في html على ما يلي:

<th ملحقات>titre1</th><th ملحقات>titre2</th><th ملحقات>titre3</th>

مثال

النتيجة

قن Wiki

قن HTML

عنوان عمود1	عنوان عمود2
خلية1	خلية2

{| border="1"
! عنوان عمود1 !! عنوان عمود2
|-
|خلية1
|خلية2
|}

<table border="1">
  <tr>
    <th>عنوان عمود1 </th>
    <th>عنوان عمود2</th>
  </tr>
  <tr>
    <td>خلية1</td>
    <td>خلية2</td>
  </tr>
</table>

في المثال الآتي البرنامج يظهر الخلية على شكل عنوان رغم استعمال || محل !!:

النتيجة

قن Wiki

قن HTML

عنوان عمود1	عمود2

{| border="1"
! عنوان عمود1 || عمود2 
|}

<table border="1">
  <tr>
    <th>عنوان عمود1 </th>
    <th>عمود2</th>
  </tr>
</table>

لتفادي المشكل, يجب ارجاع العمود الثاني إلى السطر:

النتيجة

قن Wiki

قن HTML

عنوان عمود1	عمود2

{| border="1"
! عنوان عمود1
| عمود2
|}

<table border="1">
  <tr>
    <th>عنوان عمود1</th>
    <td>عمود2</td>
  </tr>
</table>

caption عنوان جدول

العنصر caption يمثل عنوان جدول. لإدراج عنوان جدول:

|+ عنوان

الذي يعطي في HTML:

<caption>عنوان</caption>

هنا أيضا يمكن استعمال ملحقات

|+ ملحقات|عنوان

الذي يعطي

<caption ملحقات>عنوان</caption>

لا يسمح بإضافة أكثر من عنوان جدول

النتيجة

قن Wiki

قن HTML

عنوان
عمود1	عمود2

{| border="1"
|+ عنوان
| عمود1
| عمود2
|}

<table border="1">
  <caption>عنوان</caption>
  <tr>
    <td>عمود1</td>
    <td>عمود</td>
  </tr>
</table>

مثال عام

الآن بعد أن رأينا مختلف الوسوم التي تأخد بعين الاعتبار من wiki, سنضع هنا جدول يجمع ما سبق ذكره.

النتيجة

قن Wiki

قن HTML

عنوان
	عنوان1	عنوان2
عنوان سطر	خلية1	خلية2

{| border="1"
|+ عنوان
!
! عنوان1 !! عنوان2
|-
! عنوان سطر
| خلية1
| خلية2
|}

<table border="1">
  <caption>عنوان</caption>
  <tr>
    <th></th>
    <th>عنوان1</th>
    <th>عنوان2</th>
  </tr>
  <tr>
    <th>عنوان سطر</th>
    <td>خلية1</td>
    <td>خلية2</td>
  </tr>
</table>

جداول متداخلة

عند إنشاء جدول, يمكن ادراج جدول آخر. إذن بدل وضع نص في الخلية, يكفي وضع جدول كما في هذا المثال:

النتيجة

قن Wiki

قن HTML

يمين

جدول متداخل

خلية

يسار

خلية1

خلية2

خلية3

{| border="1"
| يمين
|
{| border="1"
|جدول متداخل
|خلية
|}
| يسار
|-
| خلية1
| خلية2
| خلية3
|}

<table border="1">
  <tr>
    <td>يمين</td>
    <td>
      <table border="1">
        <tr>
          <td>جدول متداخل</td>
          <td>خلية</td>
        </tr>
      </table>
    </td>
    <td>يسار</td>
  </tr>
  <tr>
    <td>خلية1</td>
    <td>خلية2</td>
    <td>خلية3</td>
  </tr>
</table>

الملحقات

تمكن من إضافة خصائص أخرى إلى الجداول, انظر ما يلي:

border إطار

هنا يمكن أن نضع سمك الإطار الذي يحيط بالخلايا أو الجدول. و إذا أردنا عدم وضع الإطار نعطي ل border القيمة 0.

border="x"

حيث x تمثل السمك.

النتيجة

قن Wiki

قن HTML

دون إطار1

دون إطار2

{| border="0"
|دون إطار1
|دون إطار2
|}

<table border="0">
  <tr>
    <td>دون إطار1</td>
    <td>دون إطار2</td>
  </tr>
</table>

إطار1

إطار2

{| border="1"
|إطار1
|إطار2
|}

<table border="1">
  <tr>
    <td>إطار1</td>
    <td>إطار2</td>
  </tr>
</table>

إطار كبير1

إطار كبير2

{| border="10"
|إطار كبير1
|إطار كبير2
|}

<table border="10">
  <tr>
    <td>إطار كبير1</td>
    <td>إطار كبير2</td>
  </tr>
</table>

يمكن أيضا اختيار نمط للإطار:

style="border:Xpx Y"

x سمك الإطار(ب pixel) و y نمطه (dotted, dashed, double...)

النتيجة

قن Wiki

قن HTML

مثال : dotted

{|style="border:2px dotted;"
|مثال : dotted
|}

مثال : dashed

{|style="border:2px dashed;"
|مثال : dashed
|}

مثال : double

{|style="border:5px double;"
|مثال : double
|}

rowspan و colspan

يمكنان من إدماج عدة خلايا في خلية واحدة. و يستعملان كما يلي:

colspan="x"
rowspan="x"

حيث x يمثل عدد الخلايا المدمجة. انظر المثال:

النتيجة

قن Wiki

قن HTML

عادي	مندمج
خلية1	خلية2	خلية3

{| border="1"
| عادي
| colspan="2" | مندمج
|-
| خلية1
| خلية2
| خلية3
|}

<table border="1">
  <tr>
    <td>عادي</td>
    <td colspan="2">مندمج</td>
  </tr>
  <tr>
    <td>خلية1</td>
    <td>خلية2</td>
    <td>خلية3</td>
  </tr>
</table>

ادماج السطور:

النتيجة

قن Wiki

قن HTML

أول	ثان
يمين1	يسار1
يمين2
يمين3

{| border="1"
| أول
| ثان
|-
| يمين1
| rowspan="3" | يسار
|-
| يمين2
|-
| يمين3
|}

<table border="1">
  <tr>
    <td>أول</td>
    <td>ثانe</td>
  </tr>
  <tr>
    <td>يمين1</td>
    <td rowspan="3">يسار</td>
  </tr>
  <tr>
    <td>يمين2</td>
  </tr>
  <tr>
    <td>يمين3</td>
  </tr>
</table>

align و valign

تمكن من وضع الجدول في اليسار في الوسط في اليمين.

للتموضع الأفقي, نستعمل code>align, في حين نستعمل valign للتموضع العمودي (خاص بتموضع النص) :

align="left"
align="center"
align="right"

valign="top"
valign="center"
valign="bottom"

مثال:

النتيجة

قن Wiki

قن HTML

إلى اليسار

{| align="left" border="1"
|إلى اليسار
|}

<table align="left" border="1">
  <tr>
    <td>إلى اليسار</td>
  </tr>
</table>

في الوسط

{| align="center" border="1"
|في الوسط
|}

<table align="center" border="1">
  <tr>
    <td>في الوسط</td>
  </tr>
</table>

إلى اليمين

{| align="right" border="1"
|إلى اليمين
|}

<table align="right" border="1">
  <tr>
    <td>إلى اليمين</td>
  </tr>
</table>

التموضع.

النتيجة

قن Wiki

قن HTML

تموضع

يسار

وسط

يمين

{| border="1"
| تموضع
|-
| align="left" | يسار
|-
| align="center" | وسط
|-
| align="right" | يمين
|}

<table border="1">
  <tr>
    <td>تموضع</td>
  </tr>
  <tr>
    <td align="left">يسار
</td>
  </tr>
  <tr>
    <td align="center">وسط</td>
  </tr>
  <tr>
    <td align="right">يمين</td>
  </tr>
</table>

التموضع العمودي

النتيجة

قن Wiki

قن HTML

تموضع

أعلى

وسط

أسفل

{| border="1"
| height="150" | تموضع
| valign="top" | أعلى
| valign="center" | وسط
| valign="bottom" | أسفل
|}

<table border="1">
  <tr>
    <td height="150">تموضع</td>
    <td valign="top">أعلى</td>
    <td valign="center">وسط</td>
    <td valign="bottom">أسفل</td>
  </tr>
</table>

cellspacing و cellpadding

من الممكن تغيير الفراغ بين الخلايا بواسطة cellspacing. كما يمكن تحديد الفراغ بين النص و الحواف الداخلية للخلية بواسطة cellpadding .

cellspacing="x"

cellpadding="x"

مثال يستعمل cellspacing :

النتيجة

قن Wiki

قن HTML

خلية1	خلية2
خلية3	خلية4

{| border="1" cellspacing="5"
|خلية1
|خلية2
|-
|خلية3
|خلية4
|}

<table border="1" cellspacing="5">
  <tr>
    <td>خلية1</td>
    <td>خلية2</td>
  </tr>
  <tr>
    <td>خلية3</td>
    <td>خلية4</td>
  </tr>
</table>

خلية1	خلية2
خلية3	خلية4

{| border="1" cellspacing="20"
|خلية1
|خلية2
|-
|خلية3
|خلية4
|}

<table border="1" cellspacing="20">
  <tr>
    <td>خلية1</td>
    <td>خلية2</td>
  </tr>
  <tr>
    <td>خلية3</td>
    <td>خلية4</td>
  </tr>
</table>

مثال يستعمل cellpadding :

النتيجة

قن Wiki

قن HTML

خلية1	خلية2
خلية3	خلية4

{| border="1" cellpadding="5"
|خلية1
|خلية2
|-
|خلية3
|خلية4
|}

<table border="1" cellpadding="5">
  <tr>
    <td>خلية1</td>
    <td>خلية2</td>
  </tr>
  <tr>
    <td>خلية3</td>
    <td>خلية4</td>
  </tr>
</table>

خلية1	خلية2
خلية3	خلية4

{| border="1" cellpadding="20"
|خلية1
|خلية2
|-
|خلية3
|خلية4
|}

<table border="1" cellpadding="20">
  <tr>
    <td>خلية1</td>
    <td>خلية2</td>
  </tr>
  <tr>
    <td>خلية3</td>
    <td>خلية4</td>
  </tr>
</table>

width و height

بواسطة width و height ، نستطيع تحديد عرض و علو الجدول و كذلك أبعاد الخلية .

أمثلة:

النتيجة

قن Wiki

قن HTML

خلية

{| border="1" width="10"
|خلية
|}

<table border="1" width="10">
  <tr>
    <td>خلية</td>
  </tr>
</table>

خلية

{| border="1" width="100"
|خلية
|}

<table border="1" width="100">
  <tr>
    <td>خلية</td>
  </tr>
</table>

خلية

{| border="1" width="200"
|خلية
|}

<table border="1" width="200">
  <tr>
    <td>خلية</td>
  </tr>
</table>

النتيجة

قن Wiki

قن HTML

خلية

{| border="1" width="33%"
|خلية
|}

<table border="1" width="33%">
  <tr>
    <td>خلية</td>
  </tr>
</table>

خلية

{| border="1" width="50%"
|خلية
|}

<table border="1" width="50%">
  <tr>
    <td>خلية</td>
  </tr>
</table>

خلية

{| border="1" width="100%"
|خلية
|}

<table border="1" width="100%">
  <tr>
    <td>خلية</td>
  </tr>
</table>

النتيجة

قن Wiki

قن HTML

جدول1
1/3 خلية 1	1/3 خلية 2	1/3 خلية 3

{| border="1" width="100%"
| colspan="3" | جدول1
|-
| width="33%" | 1/3 خلية 1
| width="33%" | 1/3 خلية 2
| width="33%" | 1/3 خلية 3
|}

<table border="1" width="100%">
  <tr>
    <td colspan="3">جدول1</td>
  </tr>
  <tr>
    <td width="33%">1/3 خلية 1</td>
    <td width="33%">1/3 خلية 2</td>
    <td width="33%">1/3 خلية 3</td>
  </tr>
</table>

جدول2
1/2 خلية 1	1/4 خلية 2	1/4 خلية 3

{| border="1" width="100%"
| colspan="3" | جدول2
|-
| width="50%" | 1/2 خلية 1
| width="25%" | 1/4 خلية 2
| width="25%" | 1/4 خلية 3
|}

<table border="1" width="100%">
  <tr>
    <td colspan="3">جدول2</td>
  </tr>
  <tr>
    <td width="50%">1/2 خلية 1</td>
    <td width="25%">1/4 خلية 2</td>
    <td width="25%">1/4 خلية 3</td>
  </tr>
</table>

bgcolor

من الممكن تغيير لون الخلفية الخاصة بالخلية بواسطة bgcolor:

bgcolor="#hex"

لتحديد اللون يجب استعمال الرمز # متبوعا برمز اللون و هو عدد في النظام السدس عشاري. انظر مساعدة:ألوان لمعرفة قيم الألوان.

مثال :

النتيجة

قن Wiki

قن HTML

أحمر

أخضر

أزرق

{| border="1"
| bgcolor="#FF0000" | أحمر
| bgcolor="#00FF00" | أخضر
| bgcolor="#0000FF" | أزرق
|}

<table border="1">
  <tr>
    <td bgcolor="#FF0000">أحمر</td>
    <td bgcolor="#00FF00">أخضر</td>
    <td bgcolor="#0000FF">أزرق</td>
  </tr>
</table>

style

لتغيير لنمط نستعمل style . و يمكن استعماله في الجدول كما في الخلية.

مثال

النتيجة

قن Wiki

قن HTML

خلية 1

خلية 2

خلية 3

{| border="1" style="background-color:#CCFFCC"
| خلية 1
|-
| خلية 2
|-
| خلية 3
|}

<table border="1" style="background-color:#CCFFCC">
  <tr>
    <td>خلية 1</td>
  </tr>
  <tr>
    <td>خلية 2</td>
  </tr>
  <tr>
    <td>خلية 3</td>
  </tr>
</table>

جداول يمكن ترتيب محتواها

لعمل جداول يمكن ترتيب محتواها حسب الأرقام يمكن إضافة خاصية الترتيب "wikitable sortable" وذلك بالشكل التالي:

النتيجة

قن Wiki

قن HTML

أرقام	أعمار	أوزان
1	22	65
2	33	87
3	15	45
4	70	95
5	65	110

{| class="wikitable sortable" 
|-
!أرقام!! أعمار !! أوزان
|-
|1||22||65
|-
|2||33||87
|-
|3||15||45
|-
|4||70||95
|-
|5||65||110
|}

جداول يمكن ترتيب محتواها مع إستثناء صف أخير من الترتيب

لعمل جداول يمكن ترتيب محتواها حسب الأرقام يمكن إضافة خاصية الترتيب "wikitable sortable"، ولكي نستثني الصف الأخير (أو الصفوف الأخيرة) من الترتيب نضع قبل ذلك الصف (أو الصفوف) جملة class="sortbottom" وذلك بالشكل التالي:

النتيجة

قن Wiki

قن HTML

الفرقة	إناث	ذكور
1	22	65
2	33	87
3	15	45
4	70	95
5	65	110
إجمالي	205	402

{| class="wikitable sortable" 
|-
!الفرقة!! إناث!! ذكور
|-
|1||22||65
|-
|2||33||87
|-
|3||15||45
|-
|4||70||95
|-
|5||65||110
|-class="sortbottom"
|إجمالي||205||402
|}

منع الترتيب بناءا على أحد الأعمدة

يمكن منع الترتيب بناءا على أحد العمدة باستخدام جملة class="unsortable" وذلك بالشكل التالي:

لاحظ أن العمود الأول أصبح غير ممكن الترتيب بناءا عليه لأننا استخدمنا تلك الجملة في عنوانه

النتيجة

قن Wiki

قن HTML

year	Female	Male
1	22	65
2	33	87
3	15	45
4	70	95
5	65	110
إجمالي	205	402

{| class="wikitable sortable" 
|-
!class="unsortable"|year!! Female!! Male
|-
|1||22||65
|-
|2||33||87
|-
|3||15||45
|-
|4||70||95
|-
|5||65||110
|-class="sortbottom"
|إجمالي||205||402
|}

قالب:مساعدة تقنية في ويكي شيعة