X

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

٥. إنشاء جدول فهرس الكتب

مختبر

قصص المستخدم :

١. يجب عليك إنشاء عنصر جدول table يسرد معلومات الكتاب.

٢. يجب أن يحتوي جدولك على عنصر رأس الجدول "a table head" مع صف واحد بداخله.

٣. يجب أن يحتوي الصف "The row" الموجود في عنصر رأس الجدول "table head" على أربعة عناصر رأس جدول، مع نص العنوان و المؤلف و النوع و سنة النشر ، بهذا الترتيب.

٤. يجب أن يحتوي جدولك على عنصر جسم الجدول "a table body" مع خمسة صفوف "rows" على الأقل.

٥. يجب أن يحتوي كل صف "row" في جسم الجدول "table body" على أربعة عناصر بيانات "data" تعرض عنوان الكتاب ومؤلفه ونوعه وسنة نشره.

٦. يجب أن يحتوي جدولك على عنصر تذييل "a table footer" يحتوي على صف "row" واحد.

٧. يجب أن يحتوي الصف "The row" الموجود في عنصر تذييل الجدول "table footer" على عنصر بيانات جدول "a table data" يمتد على أربعة أعمدة "columns" ويحتوي على النص إجمالي الكتب: ع حيث يجب استبدال ع بعدد الكتب الموجودة في جدولك.

التطبيق :

الحل :


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

  <h1>كتالوج الكتاب</h1>

  <table>
   <thead>
    <tr>
     <th>العنوان</th>
     <th>المؤلف</th>
     <th>النوع</th>
     <th>سنة النشر</th>
    </tr>
   </thead>

   <tbody>
    <tr>
     <td>لغة البرمجة سوبرنوفا</td>
     <td>محمود فايد</td>
     <td>	لغات برمجة / تطوير برمجيات</td>
     <td>2010</td>
    </tr>
    <tr>
     <td>لغات البرمجة العربية</td>
     <td>محمد عادل يس</td>
     <td>أساسيات البرمجة / مقارنة لغات</td>
     <td>2022</td>
    </tr>
    <tr>
     <td>اللغة البرمجة العربية</td>
     <td>معاد مباركي</td>
     <td>	تطوير لغات برمجة / قواعد بيانات</td>
     <td>2015</td>
    </tr>
    <tr>
     <td>عن تصميم لغة البرمجة العربية</td>
     <td>وائل حسن</td>
     <td>تصميم لغات برمجة</td>
     <td>2013</td>
    </tr>
    <tr>
     <td>مقدمة إلى البرمجة</td>
     <td>عبد الفتاح عبد الرب المشرقي</td>
     <td>أساسيات البرمجة / خوارزميات</td>
     <td>2016</td>
    </tr>
   </tbody>

   <tfoot>
    <tr>
     <td  colspan="4">إجمالي الكتب: 5</td>
    </tr>
   </tfoot>              
  </table>
 </body>

</html>