X

نماذج وجداول اتش.تي.إم.إل

٤. أنشئ جدولًا للامتحانات النهائية

ورشة عمل

في هذه الورشة، ستتدرب على العمل مع "جداول اتش.تي.إم.إل" HTML tables من خلال إنشاء جدول امتحان نهائي لمجموعة من الطلاب.

نموذج "اتش.تي.إم.إل" The HTML boilerplate.


<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>جدول امتحانات التفاضل والتكامل النهائية</title>
 </head>
 <body>
 <!-- هنا تضع اكواد التطبيق -->
 </body>
</html>

الخطوة 1 :

في الدروس السابقة، تعلمت كيفية التعامل مع عنصر "الجدول" table لتمثيل "البيانات الجدولية" tabular data .

  • داخل عنصر "الجسم" body الخاص بك، قم بتضمين عنصر "الجدول" table .


<body>
 
 <table>
 </table>
 
</body>

الخطوة 2 :

لإضافة عنوان إلى "جدول" table، يمكنك استخدام عنصر "عنوان الجدول" table caption .

إليك مثال باستخدام عنصر caption :


<table>
 <caption>نتائج كرة القدم</caption>
</table>

  • داخل عنصر "الجدول" table الخاص بك، ضع عنصر "التسمية التوضيحية" caption بداخله النص التالي: درجات امتحان التفاضل والتكامل النهائي.


<body>
 
 <table>
  <caption>درجات امتحان التفاضل والتكامل النهائي</caption>
 </table>
 
</body>

الخطوة 3 :

بالنسبة للقسم الأول من الجدول، ستحتاج إلى تجميع "محتوى العنوان" header content الذي يمثل تسميات "الأعمدة" the column لاسم الطالب الأول واسم عائلته ودرجة الامتحان النهائي.

عنصر "رأس الجدول"، thead، يُستخدم لتجميع "محتوى رأس الجدول" the header content in a table.

إليك مثال باستخدام عنصر thead :


<table>
 <thead>
  <!--  محتوى رأس الصفحة يُكتب هنا  -->
 </thead>
</table>

  • أسفل عنصر "التسمية التوضيحية" caption، أضف عنصر "رأس الجدول" a table head .


<body>
 
 <table>
  <caption>درجات امتحان التفاضل والتكامل النهائي</caption>
  <thead>
  </thead>
 </table>
 
</body>

الخطوة 4 :

يتكون عنصر "رأس الجدول" the table head من عنصر "صف الجدول"، tr، الذي يحتوي على عناصر "خلية رأس الجدول"، th .

إليك مثال باستخدام عنصري tr و th لجدول رياضي:


<table>
 <thead>
  <tr>
   <th>فريق</th>
   <th>انتصارات</th>
   <th>خسائر</th>
  </tr>
 </thead>
</table>

  • داخل عنصر "رأس الصفحة" thead، أضف عنصر "صف" tr.

  • أضف ثلاثة عناصر th داخل عنصر tr الخاص بك.

  • يجب أن يحتوي العنصر th الأول على النص اسم العائلة. يجب أن يحتوي العنصر th الثاني على النص الاسم الأول. يجب أن يحتوي العنصر th الثالث على النص الدرجة.


<body>
 
 <table>
  <caption>درجات امتحان التفاضل والتكامل النهائي</caption>
  <thead>
   <tr>
    <th>اسم العائلة</th>
    <th>الاسم الأول</th>
    <th>الدرجة</th>
   </tr>
  </thead>
 </table>
 
</body>

الخطوة 5 :

بعد الانتهاء من "قسم الرأس" the head section ، حان الوقت لإضافة "جسم الجدول"، the table body tbody. سيمثل "جسم الجدول" The table body جميع أسماء الطلاب ودرجاتهم.

  • أضف عنصر "جسم الجدول" The table body إلى جدولك.


<body>
 
 <table>
  <caption>درجات امتحان التفاضل والتكامل النهائي</caption>
  <thead>
   <tr>
    <th>اسم العائلة</th>
    <th>الاسم الأول</th>
    <th>الدرجة</th>
   </tr>
  </thead>

  <tbody>
  </tbody>

 </table>
 
</body>

الخطوة 6 :

لإضافة "بيانات الطلاب" student data إلى الجدول the table، ستحتاج إلى استخدام عناصر "صف الجدول" the table row و"بيانات الجدول" the table data.

يُستخدم عنصر "بيانات الجدول"، The table data td، لإنشاء "خلية" a cell في الجدول.

فيما يلي مثال على استخدام عنصر td لجدول لاعبي الرياضة:


<tr>
 <td>1</td>
 <td>جون دو</td>
 <td>الولايات المتحدة</td>
</tr>

  • داخل عنصر "جسم الجدول" table body ، أضف عنصر "صف جدول"، a table row tr ، مع ثلاثة عناصر "بيانات جدول"، table data td .

  • يجب أن يحتوي عنصر "بيانات الجدول" table data الأول على اسم عائلة ديفيس .

  • يجب أن يحتوي عنصر "بيانات الجدول" table data الثاني على اسم أليكس .

  • يجب أن يحتوي عنصر "بيانات الجدول" table data الثالث على الدرجة 54 .


<body>
 
 <table>
  <caption>درجات امتحان التفاضل والتكامل النهائي</caption>
  
  <thead>
   <tr>
    <th>اسم العائلة</th>
    <th>الاسم الأول</th>
    <th>الدرجة</th>
   </tr>
  </thead>

  <tbody>
   <tr>
    <td>ديفيس</td>
    <td>أليكس</td>
    <td>54</td>
   </tr>
  </tbody>

 </table>
 
</body>

الخطوة 7 :

والآن حان الوقت لإضافة طالبين آخرين إلى المجموعة.

    باتباع نفس النمط المتبع في الخطوة السابقة، أضف "صفًا ثانيًا" a second row لجدول الطلاب. استخدم البيانات التالية لعناصر "بيانات الجدول" table data :

  • اسم العائلة: دو

  • الاسم الأول: سامانثا

  • الدرجة: 92

    • بالنسبة لـ "الصف الثالث" the third row من جدول الطلاب، استخدم البيانات التالية لعناصر "بيانات الجدول" table data :

  • اسم العائلة: رودريغيز

  • الاسم الأول: ماركوس

  • الدرجة: 88


<body>
 
 <table>
  <caption>درجات امتحان التفاضل والتكامل النهائي</caption>
  
  <thead>
   <tr>
    <th>اسم العائلة</th>
    <th>الاسم الأول</th>
    <th>الدرجة</th>
   </tr>
  </thead>

  <tbody>
   <tr>
    <td>ديفيس</td>
    <td>أليكس</td>
    <td>54</td>
   </tr>
   <tr>
    <td>دو</td>
    <td>سامانثا</td>
    <td>92</td>
   </tr>
   <tr>
    <td>رودريغيز</td>
    <td>ماركوس</td>
    <td>88</td>
   </tr>
  </tbody>

 </table>
 
</body>

الخطوة 8 :

والآن حان الوقت لإضافة طالبين آخرين إلى المجموعة.

    باتباع نفس النمط المتبع في الخطوة السابقة، أضف "صفًا رابعاً" a fourth row لجدول الطلاب. استخدم البيانات التالية لعناصر "بيانات الجدول" table data :

  • اسم العائلة: تومسون

  • الاسم الأول: جين

  • الدرجة: 77

    • بالنسبة لـ "الصف الخامس" the fifth row من جدول الطلاب، استخدم البيانات التالية لعناصر "بيانات الجدول" table data :

  • اسم العائلة: ويليامز

  • الاسم الأول: ناتالي

  • الدرجة: 83


<body>
 
 <table>
  <caption>درجات امتحان التفاضل والتكامل النهائي</caption>
  
  <thead>
   <tr>
    <th>اسم العائلة</th>
    <th>الاسم الأول</th>
    <th>الدرجة</th>
   </tr>
  </thead>

  <tbody>
   <tr>
    <td>ديفيس</td>
    <td>أليكس</td>
    <td>54</td>
   </tr>
   <tr>
    <td>دو</td>
    <td>سامانثا</td>
    <td>92</td>
   </tr>
   <tr>
    <td>رودريغيز</td>
    <td>ماركوس</td>
    <td>88</td>
   </tr>
   <tr>
    <td>تومسون</td>
    <td>جين</td>
    <td>77</td>
   </tr>
   <tr>
    <td>ويليامز</td>
    <td>ناتالي</td>
    <td>83</td>
   </tr>
  </tbody>

 </table>
 
</body>

الخطوة 9 :

القسم الأخير الذي يُضاف إلى الجدول هو عنصر "تذييل الجدول" the table foot tfoot . سيُستخدم عنصر "تذييل الجدول" The table foot لعرض "متوسط ​​درجات" the average grade جميع الطلاب في الجدول.

  • أضف عنصر tfoot إلى الجدول.

  • داخل عنصر tfoot ، أضف عنصر tr .

  • داخل عنصر tr ، أضف عنصرين td .

  • يجب أن يحتوي عنصر td الأول على النص المعدل التراكمي . ويجب أن يحتوي عنصر td الثاني على النص 78.8 .


<body>
 
 <table>
  <caption>درجات امتحان التفاضل والتكامل النهائي</caption>
  
  <thead>
   <tr>
    <th>اسم العائلة</th>
    <th>الاسم الأول</th>
    <th>الدرجة</th>
   </tr>
  </thead>

  <tbody>
   <tr>
    <td>ديفيس</td>
    <td>أليكس</td>
    <td>54</td>
   </tr>
   <tr>
    <td>دو</td>
    <td>سامانثا</td>
    <td>92</td>
   </tr>
   <tr>
    <td>رودريغيز</td>
    <td>ماركوس</td>
    <td>88</td>
   </tr>
   <tr>
    <td>تومسون</td>
    <td>جين</td>
    <td>77</td>
   </tr>
   <tr>
    <td>ويليامز</td>
    <td>ناتالي</td>
    <td>83</td>
   </tr>
  </tbody>

  <tfoot>
   <tr>
    <td>المعدل التراكمي</td>
    <td>78.8</td>
   </tr>
  </tfoot>

 </table>
 
</body>

الخطوة 10 :

جدولك شبه مكتمل، ولكن هناك شيء أخير يجب إضافته.

سيكون من الجيد لو أن عنصر td المستخدم لحساب المعدل التراكمي يمتد على عمودين بدلاً من عمود واحد فقط.

للقيام بذلك، يمكنك استخدام سمة colspan على عنصر td .

تحدد خاصية colspan عدد الأعمدة التي يجب أن تمتد عليها الخلية.

فيما يلي مثال على استخدام خاصية colspan لجدول رياضي:


<tr>
 <td colspan="3">مجموع النقاط</td>
</tr>

  • داخل وسم td الافتتاحي، أضف السمة colspan واضبطها على "2" .


<body>
 
 <table>
  <caption>درجات امتحان التفاضل والتكامل النهائي</caption>
  
  <thead>
   ...
  </thead>

  <tbody>
   ...
  </tbody>

  <tfoot>
   <tr>
    <td colspan="2">المعدل التراكمي</td>
    <td>78.8</td>
   </tr>
  </tfoot>

 </table>
 
</body>
وبهذا التغيير، يصبح جدولك جاهزاً!

حل التطبيق :


<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>جدول امتحانات التفاضل والتكامل النهائية</title>
 </head>
 <body>

  <table>
   <caption>درجات امتحان التفاضل والتكامل النهائي</caption>
   
   <thead>
    <tr>
     <th>اسم العائلة</th>
     <th>الاسم الأول</th>
     <th>الدرجة</th>
    </tr>
   </thead>
   
   <tbody>
    <tr>
     <td>ديفيس</td>
     <td>أليكس</td>
     <td>54</td>
    </tr>
    <tr>
     <td>دو</td>
     <td>سامانثا</td>
     <td>92</td>
    </tr>
    <tr>
     <td>رودريغيز</td>
     <td>ماركوس</td>
     <td>88</td>
    </tr>
    <tr>
     <td>تومسون</td>
     <td>جين</td>
     <td>77</td>
    </tr>
    <tr>
     <td>ويليامز</td>
     <td>ناتالي</td>
     <td>83</td>
    </tr>
   </tbody>

   <tfoot>
    <tr>
     <td colspan="2">المعدل التراكمي</td>
     <td>78.8</td>
    </tr>
   </tfoot>

  </table>

 </body>
</html>

معاينة التطبيق :