الدرس التاسع: الجداول في HTML

مقدمة

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

إنشاء الجداول باستخدام HTML

بنية الجدول الأساسية

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

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

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

<table border="1">
  <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 border="1">: يُمثل العنصر الذي يحتوي على الجدول، مع خاصية border التي تضيف حدودًا حول خلايا الجدول.
• <tr>: يُمثل كل صف في الجدول.
• <th>: يُمثل رأس العمود، ويُستخدم لتحديد العناوين.
• <td>: يُمثل خلية البيانات في الصفوف.

خصائص colspan و rowspan

خاصية colspan

خاصية colspan تُستخدم لدمج خلايا في عمود واحد عبر عدة أعمدة. هذا يمكن أن يكون مفيدًا عند الحاجة لتجميع البيانات التي تمتد عبر أكثر من عمود واحد.

مثال على استخدام colspan

<table border="1">
  <tr>
    <th>الاسم</th>
    <th colspan="2">معلومات إضافية</th>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>25</td>
    <td>دمشق</td>
  </tr>
  <tr>
    <td>سارة</td>
    <td colspan="2">وظيفة: مهندسة</td>
  </tr>
</table>

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

• في الصف الأول، يتم دمج عنوان “معلومات إضافية” عبر عمودين.
• في الصف الثالث، يتم دمج خلية “وظيفة: مهندسة” عبر عمودين.

خاصية rowspan

خاصية rowspan تُستخدم لدمج خلايا في صف واحد عبر عدة صفوف. هذه الخاصية مفيدة لعرض البيانات التي تمتد عبر أكثر من صف واحد.

مثال على استخدام rowspan

<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>

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

• يتم دمج خلية “أحمد” عبر صفين، مما يعني أن اسم “أحمد” يمتد عبر كلا الصفين.

نصائح لتصميم الجداول بشكل فعّال

1. استخدام العناوين بوضوح: تأكد من أن رؤوس الأعمدة باستخدام <th> تكون واضحة ومفيدة لفهم البيانات في الجدول.
2. تنظيم البيانات بفعالية: استخدم colspan و rowspan بشكل مناسب لتنظيم البيانات وجعل الجدول أكثر وضوحًا.
3. تنسيق الجداول باستخدام CSS: يمكنك استخدام CSS لتحسين مظهر الجداول، مثل تغيير الألوان، الهوامش، والحدود، مما يجعلها أكثر جاذبية وسهولة في القراءة.

مثال على تخصيص الجداول باستخدام CSS

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

<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>

الخاتمة

في هذا الدرس، تعلمنا كيفية إنشاء الجداول في HTML باستخدام العناصر <table>, <tr>, <th>, و <td>. كما استعرضنا خصائص colspan و rowspan لدمج خلايا الجدول عبر الأعمدة والصفوف، مما يوفر مرونة أكبر في تنظيم البيانات.

في الدرس القادم، سنستعرض كيفية استخدام النماذج في HTML لجمع إدخالات المستخدمين، ونتناول العناصر الأساسية للنماذج مثل <form>, <input>, <select>, و <textarea>.