النتائج 1 إلى 3 من 3

الموضوع: {[html]}الدرس العاشر (الجداول 1)

  1. #1
    -{][ مدير التصاميم ][}- الصورة الرمزية احمد حسن
    تاريخ التسجيل
    Jun 2009
    العمر
    32
    المشاركات
    5,610
    معدل تقييم المستوى
    215245

    {[html]}الدرس العاشر (الجداول 1)


    هل هي صعبة؟
    إنشاء الجداول في HTML قد يكون في البداية معقداً، لكن إذا بقيت هادئاً
    وراقبت ما تقوم به جيداً سترى أن الجداول بسيطة ومنطقية،
    تماماً كما هو كل شيء في HTML.
    هناك ثلاث عناصر تستخدم لإنشاء أي جدول:
    - وسم البداية <table> ووسم الإغلاق </table>
    يبدأ من بينهما الجدول وينتهي، منطقي.
    - <tr> تعني "table row"
    وهي العنصر الذي تبدأ من خلاله الصفوف وتنتهي
    - <td> هي اختصار "table data".
    هذا الوسم يبدأ وينهي كل خلية في صفوف الجدول.
    مثال 1:
    كود HTML:
    <html>
    <head><title></title></head>
    <body>
    <table>
      <tr>
        <td>خلية 1</td>
        <td>خلية 2</td>
      </tr>
      <tr>
        <td>خلية 3</td>
        <td>خلية 4</td>
      </tr>
    </table>
    </body>
    </html>
    سيظهر بهذا الشكل في متصفحك




    لنقم بتفكيك المثال وشرح كل وسم:

    الجدول يبدأ بوسم <table>، يتبعه وسم <tr> الذي يدل على بداية صف جديد،
    وهناك خليتان في هذا السطر: <td>خلية 1</td> و<td>خلية 2</td>،
    ثم نغلق الصف بوسم الإغلاق </tr> ونبدأ آخر <tr> الذي يحوي أيضاً خليتين،
    ثم نغلق الجدول </table>.
    الصفوف تظهر بشكل خط أفقي من الخلايا، والأعمدة على شكل خط رأسي من الخلايا
    خلية 1و خلية 2 تشكلان صفاً، خلية 1 وخلية 3 تشكلان عموداً
    في المثال أعلاه الحدول يحوي صفين وعمودين،
    ويمكن للجدول أن يحوي عدداً لا نهائياً من الصفوف والأعمدة.
    مثال 2:
    كود HTML:
    <html>
    <head><title></title></head>
    <body>
    <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>
    </body>
    </html>
    سيظهر بهذا الشكل في متصفحك




    هل هناك أية خصائص للجداول؟

    بالطبع هناك خصائص للجداول، هناك مثلاً خاصية الإطار
    التي تستخدم لتحديد سمك الإطار حول الجدول:
    مثال 3:
    كود HTML:
    <html>
    <head><title></title></head>
    <body>
    <table border="1">
      <tr>
        <td>خلية 1</td>
        <td>خلية 2</td>
      </tr>
      <tr>
        <td>خلية 3</td>
        <td>خلية 4</td>
      </tr>
    </table>
    </body>
    </html>
    سيظهر بهذا الشكل في متصفحك




    سمك إطار الجدول يحدد بمقياس البكسل

    وكما هو الحال مع الصور، يمكنك أن تحدد طول وعرض الجدول بالكبسل أو بالنسبة المؤية لمقياس الشاشة:
    مثال 4:
    كود HTML:
    <table border="1" width="30%" height="25">
    هذا المثال سيعرض في المتصفح جدولاً بعرض 30% وطول 25% من مقياس الشاشة،جرب ذلك بنفسك
    سيكتب الكود كالتالي

    كود HTML:
    <html>
    <title>table</title>
    <body>
    <table border=6 width=30% height=25%>
    <tr>
    <td>data1</td>
    <td>data2</td>
    </tr>
    <tr>
    <td>data3</td>
    <td>data4</td>
    </tr>
    <tr>
    <td>data5</td>
    <td>data6</td>
    </tr>
    </<table>
    </body>
    </html>

    سيظهر بهذا الشكل في متصفحك






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







    سنكمل حديثنا عن الجداول في الدرس القادم

    التعديل الأخير تم بواسطة احمد حسن ; 10-10-2009 , الساعة 12:48






    [ Everyday ...I hope to learn today ... More than yesterday ]
    [ كل يوم أتمنى أن أتعلم أكثر من الأمس ]



  2. #2
    نائب رئيس المشناعة الصورة الرمزية M!XmAn
    تاريخ التسجيل
    Mar 2008
    المشاركات
    5,979
    معدل تقييم المستوى
    863342

    بارك الله فيك و منور قسمك


  3. #3
    -{][ مدير التصاميم ][}- الصورة الرمزية احمد حسن
    تاريخ التسجيل
    Jun 2009
    العمر
    32
    المشاركات
    5,610
    معدل تقييم المستوى
    215245

    اقتباس المشاركة الأصلية كتبت بواسطة m!xman مشاهدة المشاركة
    بارك الله فيك و منور قسمك
    الله يبارك فيك
    والقسم منور بوجودك
    وشكرا على المرور
    نورت صفحتي المتواضعة







    [ Everyday ...I hope to learn today ... More than yesterday ]
    [ كل يوم أتمنى أن أتعلم أكثر من الأمس ]



ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •