مقدمة في HTML - تعلم HTML

شرح الجداول في HTML وطريقة تنسيقها باستخدام caption وthead وtbody وtfoot

في الدرس ده من كورس تعلم HTML من الصفر، هنتكلم عن عنصر مهم جدًا وهو HTML Tables أو الجداول، وهنعرف إزاي نستخدمها ونعمل تنسيق احترافي باستخدام عناصر زي <caption> و <thead> و <tbody> و <tfoot>، وكمان نستخدم colspan و rowspan و <colgroup>.

يعني إيه جدول في HTML؟

الجدول في HTML عبارة عن مجموعة من الصفوف (rows) والأعمدة (columns) بتعرض بيانات منظمة، زي جدول حضور، أو درجات الطلاب، أو قائمة أسعار.

العناصر الأساسية للجداول:

• <table>: وده العنصر الأساسي اللي بيحتوي على كل محتوى الجدول.
• <tr>: Table Row = صف داخل الجدول.
• <td>: Table Data = خلية بيانات عادية.
• <th>: Table Header = خلية عنوان عمود.

إضافة عنوان للجدول باستخدام <caption>

عنصر <caption> بيستخدم علشان نكتب عنوان واضح للجدول، وبيظهر فوق الجدول.

<table>
  <caption>قائمة الموظفين</caption>
  <tr>
    <th>الاسم</th>
    <th>القسم</th>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>المبيعات</td>
  </tr>
</table>

تنظيم الجدول باستخدام <thead> و <tbody> و <tfoot>

HTML بيدينا عناصر بتساعدنا نفصل بين أجزاء الجدول:

• <thead>: رأس الجدول – بيحتوي على عناوين الأعمدة.
• <tbody>: جسم الجدول – بيحتوي على الصفوف العادية.
• <tfoot>: تذييل الجدول – غالبًا بيكون فيه مجموع أو ملاحظات.

<table>
  <caption>نتائج الامتحانات</caption>
  <thead>
    <tr>
      <th>اسم الطالب</th>
      <th>الدرجة</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>منى</td>
      <td>85</td>
    </tr>
    <tr>
      <td>كريم</td>
      <td>90</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>المجموع</td>
      <td>175</td>
    </tr>
  </tfoot>
</table>

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

colspan – دمج الأعمدة

لو عايز خلية تاخد مكان أكتر من عمود، بتستخدم colspan:

<td colspan="2">إجمالي الدرجات</td>

rowspan – دمج الصفوف

لو خلية هتاخد مكان أكتر من صف، بنستخدم rowspan:

<td rowspan="2">تفاصيل إضافية</td>

التحكم في الأعمدة باستخدام <colgroup>

عنصر <colgroup> بيساعدك تتحكم في عرض الأعمدة أو لون الخلفية.

<table>
  <colgroup>
    <col style="background-color: #f2f2f2">
    <col style="background-color: #e0e0e0">
  </colgroup>
  <tr>
    <th>المنتج</th>
    <th>السعر</th>
  </tr>
  <tr>
    <td>موبايل</td>
    <td>5000</td>
  </tr>
</table>

وممكن تستخدم كمان span علشان تطبق نفس التنسيق على أكتر من عمود:

<col span="2" style="background-color: yellow">

ملاحظات مهمة

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

ملخص سريع

العنصر	الوظيفة
<table>	إنشاء جدول
<tr>	صف داخل الجدول
<td>	خلية بيانات
<th>	عنوان عمود
<caption>	عنوان الجدول
<thead>	رأس الجدول
<tbody>	محتوى الجدول
<tfoot>	تذييل الجدول
colspan	دمج أعمدة
rowspan	دمج صفوف
<colgroup>	تحديد خصائص الأعمدة

وكده نكون غطينا كل حاجة عن الجداول في HTML من أول ما تبدأ تكتب كود الجدول لحد ما تنسقه بشكل احترافي باستخدام عناصر HTML المتقدمة.