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

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

الوسوم الأساسية للجداول في HTML

لإنشاء جدول في HTML، نستخدم مجموعة من الوسوم التي تتيح لنا تنظيم البيانات في صفوف وأعمدة. أهم هذه الوسوم:

  • <table>: وسم الجداول الرئيسي الذي يحتوي على جميع عناصر الجدول.
  • <tr>: يستخدم لتعريف صف في الجدول.
  • <th>: يستخدم لتعريف خلية رأس (عنوان) داخل الجدول.
  • <td>: يستخدم لتعريف خلية بيانات داخل الجدول.

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


<table>
    <tr>
        <th>الاسم</th>
        <th>العمر</th>
        <th>المدينة</th>
    </tr>
    <tr>
        <td>أحمد</td>
        <td>25</td>
        <td>القاهرة</td>
    </tr>
    <tr>
        <td>سارة</td>
        <td>30</td>
        <td>الإسكندرية</td>
    </tr>
</table>

شرح الكود

  • <table>: يحدد بداية ونهاية الجدول.
  • <tr>: يحدد بداية ونهاية صف.
  • <th>: يحدد خلايا الرؤوس (عناوين الأعمدة).
  • <td>: يحدد خلايا البيانات في الجدول.

إضافة حدود للجدول

لإضافة حدود حول خلايا الجدول، يمكنك استخدام CSS أو خاصية border داخل وسم <table>.

مثال على جدول مع حدود


<table border="1">
    <tr>
        <th>الاسم</th>
        <th>العمر</th>
        <th>المدينة</th>
    </tr>
    <tr>
        <td>أحمد</td>
        <td>25</td>
        <td>القاهرة</td>
    </tr>
</table>

إضافة حدود باستخدام CSS

لإضافة حدود باستخدام CSS، يمكنك كتابة الكود التالي:


<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
</style>

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

يمكنك دمج الخلايا أفقياً أو عمودياً باستخدام الخاصيتين colspan و rowspan.

مثال على دمج الخلايا أفقياً


<table border="1">
    <tr>
        <th colspan="2">الاسم</th>
        <th>العمر</th>
    </tr>
    <tr>
        <td colspan="2">أحمد</td>
        <td>25</td>
    </tr>
</table>

مثال على دمج الخلايا عمودياً


<table border="1">
    <tr>
        <th>الاسم</th>
        <th>العمر</th>
        <th>المدينة</th>
    </tr>
    <tr>
        <td rowspan="2">أحمد</td>
        <td>25</td>
        <td>القاهرة</td>
    </tr>
    <tr>
        <td>30</td>
        <td>الإسكندرية</td>
    </tr>
</table>

أفضل الممارسات في إنشاء الجداول

  • استخدام النصوص البديلة: استخدم نصوصًا في الرؤوس (<th>) لتوضيح البيانات.
  • الترتيب المنطقي للبيانات: اجعل البيانات في الجدول منطقية وسهلة الفهم بترتيب متسلسل.
  • تقليل حجم الجداول: حاول تقليل حجم الجداول المعقدة واستخدمها فقط عند الحاجة لتنظيم البيانات.

الخلاصة

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