[go: up one dir, main page]
انتقل إلى المحتوى

مساعدة:جدول

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

تسمح الجداول بتقديم المعلومات بشكل أحسن. في حالة ما إذا كنت تجيد استعمال 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
|}
مجلوبة من «https://ar.wikipedia.org/w/index.php?title=مساعدة:جدول&oldid=63651463»