Search

مساعدة:جدول

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

تسمح الجداول بتقديم المعلومات بشكل أحسن. في حالة ما إذا كنت تجيد استعمال 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 خلية 11/3 خلية 21/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 خلية 11/4 خلية 21/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
أرقامأعمارأوزان
12265
23387
31545
47095
565110
{| class="wikitable sortable" |-!أرقام!! أعمار !! أوزان|-|1||22||65|-|2||33||87|-|3||15||45|-|4||70||95|-|5||65||110|}

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

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

النتيجةقن Wikiقن HTML
الفرقةإناثذكور
12265
23387
31545
47095
565110
إجمالي205402
{| 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
yearFemaleMale
12265
23387
31545
47095
565110
إجمالي205402
{| 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:https://www.search.com.vn/wiki/index.php?lang=ar&q=مساعدة:جدول&oldid=63651463»
🔥 Top keywords: ريال مدريددوري أبطال أوروباالصفحة الرئيسيةمانشستر سيتيخاص:بحثنادي أرسنالنادي الهلال (السعودية)بايرن ميونخشيرين سيف النصرتصنيف:أفلام إثارة جنسيةسكسي سكسي لافرعرب العرامشهعبد الحميد بن باديسنادي برشلونةبرشلونة 6–1 باريس سان جيرمانمتلازمة XXXXدوري أبطال آسياالكلاسيكوكارلو أنشيلوتيأنطونيو روديغرإبراهيم ديازصلاة الفجرنادي العينيوتيوبملف:Arabic Wikipedia Logo Gaza (3).svgتصنيف:ممثلات إباحيات أمريكياتيوم العلم (الجزائر)قائمة أسماء الأسد في اللغة العربيةكريستيانو رونالدوميا خليفةسفيان رحيميحسن الصباحعثمان ديمبيليالدوري الإنجليزي الممتازآية الكرسيبيب غوارديولاريم علي (ممثلة)مجزرة مستشفى المعمدانيقائمة مباريات الكلاسيكو