منتديات إجلجلي Agelgele
حللتم اهلا ونزلتم سهلا في مؤسسة فينكس تكنالوجي
منتديات إجلجلي Agelgele
حللتم اهلا ونزلتم سهلا في مؤسسة فينكس تكنالوجي
مؤسسة فينكس تكنالوجي ® Phoenix Technology
                      

العودة مؤسسة فينكس تكنالوجي ®



أهلا وسهلا بك في مؤسسة فينكس تكنالوجي ®
أهلا وسهلا بك زائرنا الكريم، إذا كانت هذه زيارتك الأولى للمنتدى، فيرجى التكرم بزيارة صفحة التعليمـــات، بالضغط هنا. كما يشرفنا أن تقوم بالتسجيل بالضغط هنا إذا رغبت بالمشاركة في المنتدى، أما إذا رغبت بقراءة المواضيع والإطلاع فتفضل بزيارة القسم الذي ترغب أدناه.


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

شاطر|


بيانات كاتب الموضوع
الدرس العاشر: الجداول HTML
كاتب الموضوعرسالة
المعلومات
الكاتب:
اللقب:

مستخدم مجتهد

الرتبه:
مستخدم مجتهد
الصورة الرمزية

énergie
البيانات
عدد المشاركات : 200

الإتصالات
الحالة:
وسائل الإتصال:

موضوع: الدرس العاشر: الجداول HTML الدرس العاشر: الجداول HTML Empty16/11/2014, 17:23

اذا احتوت المشاركة صورا - قم بالضغط عليها لعرضها بحجمها الطبيعي




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

هل هي صعبة؟

إنشاء الجداول في 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% من مقياس الشاشة، جرب ذلك بنفسك.

المزيد من الخصائص

هناك خصائص كثيرة للجداول، هذان اثنان منها:

  • align: يحدد المحاذاة لمحتويات الجدول، أو الصف أو في الخلية، فمثلاً يمكن محاذاة النص إلى اليمين أو اليسار أو في المنتصف.
  • يحدد المحاذاة الرأسية لمحتويات الخلية، فيمكن محاذاة النص في الأعلى أو الأسفل أو المنتصف.

مثال 5:

الكود:

   <td align="right" valign="top">Cell 1</td>
   


ماذا يمكن أن أضع في الجداول؟

نظرياً يمكن أن تضع أي شيء في الجداول، النصوص والصور والروابط، لكن الجداول مخصصة لعرض البيانات مجدولة،، لذلك لا تستخدمها لوضع أي شيء لأنك تريد ببساطة أن تجعل الأشياء تظهر بجانب بعضها البعض،.
قبل سنوات معدودة كانت الجداول تستخدم غالباً كأداة للتصميم، لكن إذا أردت أن تتحكم بطريقة عرض النصوص والجداول هناك طريقة أفضل بكثير (تلميح: CSS) لكن هذا سنناقشه لاحقاً.
الآن قم بتطبيق ما تعلمته وصمم عدداً من الجداول بمختلف القياسات ومختلف الخصائص والمحتويات، هذا يمكن أن يبقيك مشغولاً لساعات.















 الموضوع الأصلي : الدرس العاشر: الجداول HTML // المصدر : منتديات إجلجلي Agelgele // الكاتب:énergie


énergie ; توقيع العضو




المعلومات
الكاتب:
اللقب:
مؤسس الموقع
الرتبه:
مؤسس الموقع
الصورة الرمزية

Ǥlamorous
البيانات
رسالة SMS : الحمد لله علي كل حال
ذكر
الجمهورية الجزائرية الديموقراطية الشعبية
العمر : 33
عدد المشاركات : 1609

الإتصالات
الحالة:
وسائل الإتصال:
http://www.altwer.com

موضوع: رد: الدرس العاشر: الجداول HTML الدرس العاشر: الجداول HTML Empty28/11/2014, 16:13

اذا احتوت المشاركة صورا - قم بالضغط عليها لعرضها بحجمها الطبيعي




جزاك الله كل خيرا علي الموضوع















 الموضوع الأصلي : الدرس العاشر: الجداول HTML // المصدر : منتديات إجلجلي Agelgele // الكاتب:Ǥlamorous


Ǥlamorous ; توقيع العضو




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

استعرض الموضوع التالي استعرض الموضوع السابق الرجوع الى أعلى الصفحة

مواضيع مماثلة

» الدرس الحادي عشر: المزيد حول الجداول HTML
» الدرس العاشر: تمرير المتغيرات من خلال عنوان الموقع (URL)
» الدرس الثاني: ما هي HTML؟
» الدرس السابع: الخصائص HTML
» الدرس الثامن: الروابط HTML



الــرد الســـريـع
..
الرد السريع
هام جداً: قوانين المساهمة في المواضيع. انقر هنا للمعاينة



●[ جميع حقوق النشر للمواضيع الحصرية محفوظة © phoenix™ 2015 ]●
●[ جميع المواضيع تعبر عن رؤية صاحبها ولا تمت للإدارة بصلة ]●

تحويل وبرمجة الرسام