مساعدة:إنشاء جدول

(تم التحويل من مساعدة:جداول)

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

مساعدة

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

المواضيع

تواصل

حول

تسمح الجداول بتقديم المعلومات بشكل أحسن. في حالت ما إذا كنت تجيد استعمال 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>
تمّ الاسترجاع من "https://www.marefa.org/w/index.php?title=مساعدة:إنشاء_جدول&oldid=1208023"