عناصر صفحة الويب Body Tags جزء 2

عناصر صفحة الويب Body Tags
جزء 2 الجداول Table Tags

فيما تستخدم الجداول في صفحات الويب ..؟؟!! وكيف يتم بناء جدول على صفحة الويب بواسطة تعليمات الـ HTML..؟! ما هي عناصر الـ HTML المستخدمة في انشاء جدول على صفحة الويب..؟!وما هي السمات Attributes المستخدمة مع جداول صفحات الويب…؟؟!!

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

في هذا المقال نتعرف على :

الجداول في صفحات الويب
انشاء الجدول في HTML.
الجدوال والسمات Tables & Attributes.

الجداول في صفحات الويب

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

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

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

انشاء الجدول في HTML

تتم إضافة جداول إلى صفحة الويب من نوع HTML بواسطة مجموعة من الأوسمة الخاصة للجداول، أن الجداول كما متعارف عليه مكونه من صفوف Rows أعمدة Columns و لإنشاء جدول على صفحة الويب بواسطة أوسمة الـ HTML علينا ترتيب الأوسمة الخاصة ببناء الجدول لتكون الصفوف والأعمدة الخاصة بالجداول والأوسمة المستخدمة في إنشاء الجدول هي :

الوسم <table> وسم ثنائي للإعلان عن بناء جدول بداخل هذا الوسم سيتم بناء الصفوف والأعمدة.
وداخل الوسم <table> يتم بناء الصفوف بواسطة الوسم <tr> اختصار للـ Table Row وهو وسم ثنائي يقوم بالإعلان عن بناء صف .
ثم بداخل الوسم <tr> يتم بناء الاعمدة بواسطة الوسم <td> الذي هو اختصار للـ Table Data وهو وسم ثنائي يقوم بالإعلان بناء عمود.

في المثال التالي سنقوم بإنشاء جدول بسيط مكون 3 صفوف و3 أعمدة لاحظ طريقة ترتيب الـ Table Tags :

<table>
        <tr>
            <td>Course </td>
            <td>Hours </td>
            <td>An houre price  </td>
        </tr>
        <tr>
            <td>Python</td>
            <td>10 </td>
            <td>$30</td>
        </tr>
        <tr>
            <td>Swift</td>
            <td>5 </td>
            <td>$25</td>
        </tr>
    </table>

لتكون النتيجة

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

القسم الأول هو Heading يمثل عناوين الاعمدة ويعبر عنه بالوسم <thead> ويستخدم الوسم <th> للإعلان عن عنوان جديد أي عمود جديد.
والقسم الثاني Body يمتثل البيانات للجدول ويمثل بالوسم <tbody> .
والقسم الثالث هو Footer غالباً ما يمثل النتائج او اسفل الجدول ويمثل بالوسم <tfoot> .

لاحظ / ي طريقة الاستخدام لإنشاء جدول في صفحة الويب في المثال التالي:

<table>
        <caption>Your courses </caption>
        <thead>
            <th>course</th>
            <th>Price</th>    
        </thead>
        <tbody>
        <tr>
            <td>Python</td>
            <td>$300</td>  
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>$250</td>
        </tr>
        </tbody>
        <tfoot>
            <th >Total  price</th>
            <th> $550</th>
        </tfoot>
</table>

لتكون النتيجة

الجدوال والسمات Tables & Attributes

في الأمثلة السابقة نرى أن الجدول على صفحة الويب يظهر للمستخدم بدون حدود وغير واضح ولكي يظهر بطريقة مرتبة وواضحة للمستخدم، نستخدم السمات Attributes مع عناصر الـ HTML للتنسيق طريقة ظهور العناصر على صفحة الويب، لهذا تعتبر بعض السمات مهمة جداً في الجداول فهي ترتب طريقة عرض بيانات الجدول السمات أو الخصائص لها قيم تحدد عملها لنرى المثال التالي:

سوف نستخدم في هذا المثال السمة او الخاصية border لإضافة حدود للوسم و التي تأخذ قيمة عرض الحد وعند تطبيقها على وسم <table> سوف تقوم برسم حد لكامل الجدول وحد لكل خلية في الجدول.

و لدمج الخلايا في الجدول نستخدم السمات rowspans and colspans

حيث colspans حيث تقوم بالدمج الأفقي للخلايا وتقوم rowspans بالدمج العمودي للخلايا لاحظ /ي معي الجدول التالي:

<table border = "1">
        <thead>
            <th> Days/time   </th> 
            <th>8:00-9:30:00 am  </th>
            <th>9:30-10:00 am</th> 
            <th>12:00-1:30 pmm</th> 
            <th>1:30-2:00 pm</th> 

        </thead>
        <tbody>
        <tr>
            <th>Sunday  </th>
            <td colspan="2">Python</td>
            <td>HTML</td> 
            <td>CSS</td> 
        </tr>
        <tr>
            <th>Monday</th> 
            <td rowspan="3">HTML</td>
            <td rowspan="3">CSS</td>
            <td colspan="2">JavaScript</td>
        </tr>
        <tr>
            <th>Tuesday</th> 
            <td rowspan="2" colspan="2">Python</td>
        </tr>
        <tr>
            <th>Wednesday</th>   
        </tr>
        <tr>
            <th>Thursday</th> 
            <td colspan="2">JavaScript</td>
            <td>HTML</td>
            <td>CSS</td>  
        </tr>   
        </tbody>
        <tfoot >
           <th colspan="5">The sessions start on time, don't be late, please. Happy learning.</th>
        </tfoot>
    </table>

لتكون النتيجة

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

عناصر صفحة الويب Body Tags جزء 2 - الجداول Table Tags