الدروس

  • جداول الـ HTML

    هذا الدرس سيكون حول الجداول. بما فيها من تعدد لخصائص الجداول واستخدام في صفحات الويب. فالجداول تعد من أقوى الأدوات التي تتضمنها الـ HTML وأكاد أجزم بأنه لا يوجد موقع في الإنترنت إلا ويستخدمها بصورة أو بأخرى. حيث أن وضع الجداول في صفحات الويب لا يقتصر على تلك القوائم من البيانات التي نحتاج لترتيبها في صفوف وأعمدة، بل يتعدى ذلك إلى استخدامها في تصميم الصفحات نفسها وتنظيمها، والتحكم بمظهرها بصورة قوية وفعالة لا يمكن أداؤها مهما استخدمنا من وسوم خاصة بتنسيق الصفحات. والحقيقة أنه اليوم أصبحت قليلة الاستعمال بعد الانتقال إلى استخدام الـ div والـ css الجديد عوضاً عن الجداول، وأصبحت تقتصر أكثر على إفراز المعلومات وجدولتها، ولكني أعتبرها الأسهل في التصميم على أية حال حتى وإن كانت ستعتبر قديمة .

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

    جداول الـ HTML
    تفاح 44%
    موز 23%
    برتقال 13%
    غيرها 10%

    أمثلة جربه بنفسك - أمثلة

    الجداول
    كيفية عمل الجداول في صفحة الـ HTML.

    حدود الجداول
    كيفية تحديد حدود الجدول مختلفة.

    (يمكنك الحصول على مزيد من الأمثلة في أسفل هذه الصفحة).


    جداول الـ HTML

    يتم تعريف الجداول بالوسم <table>.

    تقسّم الجداول إلى صفوف (باستخدام وسم تعريف الصف <tr>)، وتقسّم الصفوف إلى خلايا بيانات (باستخدام وسم تعريف الخلايا <td>).
    td تعني بيانات الجدول "table data" ، وتحمل محتوى الخليّة. الوسم <td> يمكن أن يحتوي على النصوص، الوصلات، الصور، والقوائم والنماذج والجداول الأخرى .. إلخ.

    مثال عمل جدول

    كود HTML:
    <table border="1">
      <tr>
        <td>الصف 1، الخلية 1</td>
        <td>الصف 1، الخلية 2</td>
      </tr>
      <tr>
        <td>الصف 2، الخلية 1</td>
        <td>الصف 2، الخلية 2</td>
      </tr>
    </table>

    وهنا كيف يظهر كود الـ HTML بالأعلى في المتصفّح:

    الصف 1، الخلية 1 الصف 1، الخلية 2
    الصف 2، الخلية 1 الصف 2، الخلية 2


    جداول الـ HTML وخاصية الحدود (Border)

    إذا لم تقم بتحديد خاصية الحدود، سيظهر الجدول بدون حدود، وقد يكون جيداً ولكن بعض الأوقات نحن بحاجة لوضع الحدود ظاهرة في الجدول.

    لإظهار الجدول مع الحدود، نقوم بإضافة الخاصية border كما بالمثال التالي:

    كود HTML:
    <table border="1">
      <tr>
        <td>الصف 1، الخلية 1</td>
        <td>الصف 1، الخلية 2</td>
      </tr>
    </table>

    لاحظ قيمة الـ border هي 1 وهي تحدد حجم الحدود.



    رؤوس عناوين جداول الـ HTML

    يتم تعريف معلومات العناوين الرأسية في الجداول بالوسم <th>.

    النص في العنصر th سيظهر غامق وسيكون في الوسط.

    كود HTML:
    <table border="1">
      <tr>
        <th>عنوان رأسي 1</th>
        <th>عنوان رأسي 2</th>
      </tr>
      <tr>
        <td>الصف 1، الخلية 1</td>
        <td>الصف 1، الخلية 2</td>
      </tr>
      <tr>
        <td>الصف 2، الخلية 1</td>
        <td>الصف 2، الخلية 2</td>
      </tr>
    </table>

    ويظهر الكود بالأعلى في المتصفح هكذا:

    عنوان رأسي 1 عنوان رأسي 2
    الصف 1، الخلية 1 الصف 1، الخلية 2
    الصف 2، الخلية 1 الصف 2، الخلية 2


    أمثلة المزيد من الأمثلة

    جداول بدون حدود
    كيفية عمل الجداول بدون حدود.

    عناوين الجدول الرأسية (Table Headers)
    كيفية عمل العناوين الرئسية في الجدول.

    جدول مع تعليق
    كيفية إضافة تعليق إلى الجدول.

    دمج خلايا الجدول بأكثر من صف/عمود
    كيفية تعريف خلايا الجدول الممتدة على أكثر من صف أو عمود.

    وسوم داخل الجدول
    كيفية إظهار العناصر داخل العناصر الأخرى.

    حاشية (بطانة) الخلايا (Cell padding)
    كيفية استخدام البطانة أو الهوامش (cellpadding) بين الخلايا لزيادة المسافة الفاصلة بين الحدود وبداية محتوى الخلايا.

    تباعد الخلايا (Cell spacing)
    كيفية استخدام التباعد (cellspacing) لزيادة المسافة بين كل خلية من خلايا الجدول.

    خاصية الإطار (frame)
    كيفية استخدام خاصية الإطار "frame" للتعامل مع الحدود حول الجدول.


    وسوم جدول الـ HTML

    الوسم الوصف
    <table> تعريف الجدول
    <th> تعريف رأس عنوان الجدول
    <tr> تعريف صفوف الجدول
    <td> تعريف خلايا الجدول
    <caption> تعريف تعليق الجدول
    <colgroup> تعريف مجموعة الأعمدة في الجدول للتهيئة
    <col /> تعريف قيم الخاصية لعمود أو أكثر في الجدول
    <thead> تجميع محتوى العناوين الرأسية في الجدول
    <tbody> تجميع محتوى الجسم في الجدول
    <tfoot> تجميع محتوى الذيل في الجدول