كيفية استخدام الجداول في عرض البيانات باستخدام HTML

تمت الكتابة بواسطة: عبد الحكيم

تارخ آخر تحديث: 19 ديسمبر 2024

محتوى المقال

كيفية استخدام الجداول في عرض البيانات باستخدام HTML

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

ما هي الجداول في HTML؟

الجداول في HTML هي هياكل تستخدم لعرض البيانات في صفوف وأعمدة. يتم تعريف كل جدول باستخدام وسم <table>، ويتم تنظيم محتواه باستخدام وسوم مثل <tr> (للصفوف) و<td> (لأعمدة البيانات) و<th> (لعناوين الأعمدة). الجداول مفيدة للغاية عندما تحتاج إلى عرض معلومات منظمة مثل القوائم الزمنية، الجداول المالية، أو حتى جداول الحصص.

كيفية إنشاء جدول أساسي في HTML

لإنشاء جدول أساسي في HTML، يجب عليك استخدام العناصر الأساسية التالية:

  • <table>: يمثل بداية الجدول.
  • <tr>: يمثل صفًا من البيانات داخل الجدول.
  • <td>: يمثل خلية بيانات داخل الصف.
  • <th>: يمثل عنوان عمود.

مثال على جدول بسيط

لنبدأ بإنشاء جدول بسيط يحتوي على 3 أعمدة و3 صفوف. إليك كيفية إنشاء هذا الجدول:

<table border="1">
    <tr>
        <th>الاسم</th>
        <th>العمر</th>
        <th>المدينة</th>
    </tr>
    <tr>
        <td>أحمد</td>
        <td>25</td>
        <td>الرياض</td>
    </tr>
    <tr>
        <td>سارة</td>
        <td>22</td>
        <td>جدة</td>
    </tr>
    <tr>
        <td>خالد</td>
        <td>30</td>
        <td>الدمام</td>
    </tr>
</table>

في هذا المثال:

  • قمنا بإنشاء جدول يحتوي على 3 صفوف و3 أعمدة.
  • تم استخدام <th> لتمثيل عناوين الأعمدة: "الاسم"، "العمر"، و"المدينة".
  • تم استخدام <td> لتمثيل القيم في الصفوف، مثل "أحمد"، "25"، و"الرياض".

إضافة الحدود والتنسيقات إلى الجداول

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

إضافة CSS لتنسيق الجداول

لنقم الآن بتنسيق الجدول باستخدام CSS. يمكنك إضافة الأنماط داخل ملف CSS خارجي أو بين وسوم <style> داخل <head>.

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
    }
</style>

الآن تم تحسين الجدول ليبدو أكثر جاذبية وتناسقًا:

  • border-collapse: collapse: يدمج حدود الخلايا معًا لإعطاء مظهر أكثر تنظيماً.
  • padding: 8px: يضيف مسافة داخل كل خلية لتحسين قابلية القراءة.
  • text-align: left: يضمن محاذاة النص إلى اليسار داخل كل خلية.

دمج الخلايا باستخدام colspan وrowspan

في بعض الأحيان، قد تحتاج إلى دمج خلايا متعددة في الجدول. يمكنك استخدام خاصيتي colspan وrowspan لتحقيق ذلك.

استخدام colspan لدمج الأعمدة

خاصية colspan تتيح لك دمج عدة أعمدة في خلية واحدة. لنقم بإنشاء مثال حيث يحتوي الجدول على خلية تمتد على عمودين:

<table border="1">
    <tr>
        <td colspan="2">دمج عمودين</td>
    </tr>
    <tr>
        <td>البيانات 1</td>
        <td>البيانات 2</td>
    </tr>
</table>

استخدام rowspan لدمج الصفوف

خاصية rowspan تتيح لك دمج عدة صفوف في خلية واحدة. إليك مثال يوضح كيفية دمج صفين:

<table border="1">
    <tr>
        <td rowspan="2">دمج صفين</td>
        <td>البيانات 1</td>
    </tr>
    <tr>
        <td>البيانات 2</td>
    </tr>
</table>

إضافة التسميات التوضيحية والتذييل إلى الجداول

يمكنك تحسين قابلية الجدول للقراءة بإضافة تسميات توضيحية أو تذييل الجدول. تستخدم <caption> لإضافة عنوان للجدول، و<tfoot> لإضافة تذييل في نهاية الجدول.

مثال على إضافة <caption> و<tfoot>

<table border="1">
    <caption>جدول الحضور الشهري</caption>
    <thead>
        <tr>
            <th>اسم الطالب</th>
            <th>الحضور</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>أحمد</td>
            <td>90%</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>إجمالي الحضور</td>
            <td>85%</td>
        </tr>
    </tfoot>
</table>

الخلاصة

يعتبر استخدام الجداول في HTML وسيلة فعالة لعرض البيانات المنظمة. من خلال معرفة كيفية استخدام العناصر الأساسية مثل <table>، <tr>، <td>، و<th>، يمكنك إنشاء جداول بسيطة أو معقدة لعرض البيانات بطريقة واضحة ومنظمة. لا تنس تخصيص الجداول باستخدام CSS وإضافة ميزات متقدمة مثل دمج الخلايا وإضافة التسميات التوضيحية لتحسين المظهر وقابلية الاستخدام.

طور مهاراتك: مقالات يجب قراءتها في البرمجة

مقالات ذات صلة

كيفية معالجة الملفات المرفوعة في PHP
كيفية إدارة وحفظ الملفات باستخدام مكتبة os في Python
كيفية استخدام PHP لإنشاء تقارير Excel
كيفية استخدام حلقة FOR في PHP
تقريب الأرقام العشرية باستخدام دالة round() في Python

البرمجة

كيفية إنشاء دوال مخصصة في PHP
كيفية إضافة صور وفيديوهات إلى صفحات HTML
التعرف على تعدد الأشكال (Polymorphism) في PHP
كيفية استخدام حلقة FOR في PHP
كيفية إنشاء ملفات PDF باستخدام PHP
استخدام الحزم الأمنية في PHP
استخدام PDO و MySQLi للتعامل مع قواعد البيانات في PHP