منتديات المدية للعلوم والثقـــــــــــــافة

عملية ادراج جدول 613623
عزيزي الزائر / عزيزتي الزائرة يرجي التكرم بتسجبل الدخول اذا كنت عضو معنا
او التسجيل ان لم تكن عضو وترغب في الانضمام الي اسرة المنتدي
سنتشرف بتسجيلك
شكرا عملية ادراج جدول 829894
ادارة
المنتدي
عملية ادراج جدول 103798
منتديات المدية للعلوم والثقـــــــــــــافة
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.
بحـث
 
 

نتائج البحث
 

 


Rechercher بحث متقدم

المواضيع الأخيرة
» مكافحة الحمام
عملية ادراج جدول Empty20/6/2020, 11:13 من طرف مى حمدى

» افضل شركة رش مبيدات بمكة
عملية ادراج جدول Empty20/6/2020, 10:37 من طرف مى حمدى

» خدمات تنظيف المنازل ابوظبي
عملية ادراج جدول Empty3/6/2020, 12:03 من طرف مى حمدى

» شركة مكافحة صراصير بمكة
عملية ادراج جدول Empty31/5/2020, 15:57 من طرف مى حمدى

» عيد سعيد للجميع
عملية ادراج جدول Empty24/5/2020, 01:06 من طرف Admin

» تنظيف بيوت ابوظبي
عملية ادراج جدول Empty18/5/2020, 08:47 من طرف مى حمدى

» تنظيف بيوت ابوظبي
عملية ادراج جدول Empty6/5/2020, 08:20 من طرف مى حمدى

» شركة عزل خزانات بمكة
عملية ادراج جدول Empty4/5/2020, 10:32 من طرف مى حمدى

» تهنئة بمناسبة عيد العمال
عملية ادراج جدول Empty2/5/2020, 02:22 من طرف Admin

أفضل 10 أعضاء في هذا الأسبوع

إعلانات تجارية


عملية ادراج جدول

اذهب الى الأسفل

عملية ادراج جدول Empty عملية ادراج جدول

مُساهمة من طرف Aya2016 في 13/2/2017, 17:00

لدرس العاشر: الجداول

الجداول تستخدم لعرض بيانات مجدولة مثل المعلومات التي تعرض بشكل منطقي من خلال أعمدة وصفوف.
هل هي صعبة؟

إنشاء الجداول في HTML قد يكون في البداية معقداً، لكن إذا بقيت هادئاً وراقبت ما تقوم به جيداً سترى أن الجداول بسيطة ومنطقية، تماماً كما هو كل شيء في HTML.

مثال 1:


<table>
 <tr>
<td>خلية 1</td>
<td>خلية 2</td>
 </tr>
 <tr>
<td>خلية 3</td>
<td>خلية 4</td>
 </tr>
</table>



سيظهر بهذا الشكل في متصفحك
خلية 1 خلية 2
خلية 3 خلية 4
ما الفرق بين <tr> و<td>؟

كما ترى في المثال أعلاه، هذا هو أكثر أمثلة HTML تعقيداً قمنا بعرضه في هذا الدرس حتى الآن، لنقم بتفكيك المثال وشرح كل وسم:

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

   وسم البداية <table> ووسم الإغلاق </table> يبدأ من بينهما الجدول وينتهي، منطقي.
   <tr> تعني "table row" وهي العنصر الذي تبدأ من خلاله الصفوف وتنتهي، لا زال الأمر منطقياً.
   <td> هي اختصار "table data". هذا الوسم يبدأ وينهي كل خلية في صفوف الجدول، كل هذا بسيط ومنطقي.

هذا ما يحدث في المثال الأول، الجدول يبدأ بوسم <table>، يتبعه وسم <tr> الذي يدل على بداية صف جديد، وهناك خليتان في هذا السطر: <td>خلية 1</td> و<td>خلية 2</td>، ثم نغلق الصف بوسم الإغلاق </tr> ونبدأ آخر <tr> الذي يحوي أيضاً خليتين، ثم نغلق الجدول </table>.

فقط لنوضح الأمر أكثر: الصفوف تظهر بشكل خط أفقي من الخلايا، والأعمدة على شكل خط رأسي من الخلايا:
خلية 1 خلية 2
خلية 3 خلية 4

خلية 1و خلية 2 تشكلان صفاً، خلية 1 وخلية 3 تشكلان عموداً

في المثال أعلاه الحدول يحوي صفين وعمودين، ويمكن للجدول أن يحوي عدداً لا نهائياً من الصفوف والأعمدة.

مثال 2:


<table>
 <tr>
<td>خلية 1</td>
<td>خلية 2</td>
<td>خلية 3</td>
<td>خلية 4</td>
 </tr>
 <tr>
<td>خلية 5</td>
<td>خلية 6</td>
<td>خلية 7</td>
<td>خلية 8</td>
 </tr>
 <tr>
<td>خلية 9</td>
<td>خلية 10</td>
<td>خلية 11</td>
<td>خلية 12</td>
 </tr>
</table>



سيظهر بهذا الشكل في متصفحك
خلية 1 خلية 2 خلية 3 خلية 4
خلية 5 خلية 6 خلية 7 خلية 8
خلية 9 خلية 10 خلية 11 خلية 12
هل هناك أية خصائص للجداول؟

بالطبع هناك خصائص للجداول، هناك مثلاً خاصية الإطار التي تستخدم لتحديد سمك الإطار حول الجدول:

مثال 3:


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



سيظهر بهذا الشكل في متصفحك
خلية 1 خلية 2
خلية 3 خلية 4

سمك إطار الجدول يحدد بمقياس البكسل (انظر الدرس التاسع)

وكما هو الحال مع الصور، يمكنك أن تحدد عرض الجدول بالكبسل أو بالنسبة المؤية لمقياس الشاشة:

مثال 4:


<table border="1" width="30%">



هذا المثال سيعرض في المتصفح جدولاً بعرض 30% من مقياس الشاشة، جرب ذلك بنفسك.
Aya2016
Aya2016
رئيس هيئة الإشراف
مراقب
مستشار المنتدى
رئيس هيئة الإشراف  مراقب  مستشار المنتدى

المساهمات : 194
نقاط : 30184
السٌّمعَة : 77
تاريخ التسجيل : 11/02/2017
الموقع : https://www.ouedkniss.com/plus/?wilaya=%2Cmedea

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى