Part 8 شرح الجداول في HTML Tables #برمجة #FSWD #HTML

أولًا: إنشاء جدول باستخدام <table>

الوسم الأساسي هو <table>، ودا بيحتوي على صفوف <tr>، وكل صف يحتوي على خلايا (أعمدة) <td> أو <th>.

✅ المكونات الرئيسية للجدول

مثال بسيط

<table border="1">
  <tr>
    <th>الاسم</th>
    <th>السن</th>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>25</td>
  </tr>
  <tr>
    <td>منى</td>
    <td>30</td>
  </tr>
</table>

الناتج

ثانيًا: تقسيم الجدول لأجزاء

مثال باستخدام التقسيم

<table border="1">
  <thead>
    <tr>
      <th>المنتج</th>
      <th>الكمية</th>
      <th>السعر</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>قلم</td>
      <td>10</td>
      <td>2 جنيه</td>
    </tr>
    <tr>
      <td>دفتر</td>
      <td>5</td>
      <td>10 جنيه</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">الإجمالي</td>
      <td>60 جنيه</td>
    </tr>
  </tfoot>
</table>

ثالثًا: دمج الخلايا

📌 colspan:

لدمج أكثر من عمود في خلية واحدة.

📌 rowspan:

لدمج أكثر من صف في خلية واحدة.

✅ مثال على colspan و rowspan

<table border="1">
  <tr>
    <th rowspan="2">الاسم</th>
    <th colspan="2">الدرجات</th>
  </tr>
  <tr>
    <th>رياضيات</th>
    <th>علوم</th>
  </tr>
  <tr>
    <td>سارة</td>
    <td>95</td>
    <td>90</td>
  </tr>
  <tr>
    <td>محمد</td>
    <td>88</td>
    <td>93</td>
  </tr>
</table>

هنا:

• الخلية “الاسم” تم دمجها صفّين باستخدام rowspan="2".

• “الدرجات” تم دمجها عمودين باستخدام colspan="2".

🔹 رابعًا: تنسيق الجدول بشكل مبدئي (بدون CSS)

ممكن تستخدم السمات التالية مباشرة داخل وسم <table> للتنسيق المبدئي:

| السمة             | الوظيفة                   |
| ----------------- | ------------------------- |
| `border="1"`      | لإظهار الحدود             |
| `cellpadding="5"` | مسافة داخل الخلية         |
| `cellspacing="0"` | مسافة بين الخلايا         |
| `width`, `align`  | للتحكم في العرض والمحاذاة |

<table border="1" cellpadding="5" cellspacing="0" width="100%">
  <tr>
    <th>المادة</th>
    <th>الدرجة</th>
  </tr>
  <tr>
    <td>لغة عربية</td>
    <td>95</td>
  </tr>
  <tr>
    <td>حاسب آلي</td>
    <td>98</td>
  </tr>
</table>

💡 ملخص سريع