تستخدم الجداول عاد ة لتنظيم مجموعة من البيانات المترابطة مع بعضها البعض ضمن الصفحة، كعلامات الطلاب، عروض الأسعار، قائمة من المنتجات، والعديد من المواضيع الأخرى.
وسومنا الجديدة في هذا الدرس:
وسومنا الجديدة في هذا الدرس:
وسم البداية <table> وسم النهاية </table>
مهمته وسم البداية لكل جدول.
وسم البداية <caption> وسم النهاية <caption>
وسم البداية <caption> وسم النهاية <caption>
مهمته يستخدم لإضافة تسمية الجدول والتي تظهر في أعلى الجدول.
وسم البداية <thead> وسم النهاية </thead>
وسم البداية <thead> وسم النهاية </thead>
مهمته لإضافة رأس للجدول ويتم وضعه بخط عريض تلقائيا في بداية الجدول.
وسم البداية <tbody> وسم النهاية </tbody>
وسم البداية <tbody> وسم النهاية </tbody>
مهمته لإعلام المتصفح ببداية جسم الجدول (المحتويات).
وسم البداية <tfoot> وسم النهاية </tfoot>
وسم البداية <tfoot> وسم النهاية </tfoot>
مهمته لإضافة تذييل للجدول، ويتم وضعه بخط عريض تلقائيا ف نهاية الجدول.
وسم البداية <tr> وسم النهاية </tr>
مهمته لإضافة سطر جديد للجدول (صف).
وسم البداية <th> وسم النهاية </th>
وسم البداية <th> وسم النهاية </th>
مهمته لإضافة خانة جديدة ضمن الرأس والتذييل فقط.
وسم البداية <td> وسم النهاية </td>
مهمته يستخدم لإضافة خانة جديدة ضمن السطر.
-لنأخذ مثال عن إضافة بعض الخواص للجدول :
حيث تمثل border عرض حواف الجدول، اما الـ width فهي نسبة عرض الجدول بالنسبة لعرض الصفحة الكلي وكما يمكن كتابتها بالبكسل (pixel)
-لنأخذ مثال عن إضافة بعض الخواص للجدول :
<table bgcolor="#00FF00" border = "1" width = "40%">
أمّا لكتابة الجدول ضمن الصفحة:
وسيكون الخرج (ما يظهر للمستخدم عند فتح الصفحة) على النحو التالي:
ومهمتك هذه المرة:
إنشاء صفحة لشركة تجارية لبيع اجهزة اللابتوب مثلا ويكون فيها اسم الشركة ومعلومات عنها وجدول يحتوي على 3 أعمدة:
الأول : وفيه اسم المنتج ومواصفاته.
الثاني : صورة المنتج.
الثالث : سعر المنتج.
مع مراعاة وضع الصور بالأحجام المناسبة، وكما يمكن إضافة روابط من الصورة (التي ضمن الجدول) إلى الموقع الخاص بالمنتج.
<html>
<head>
<title>A simple table</title>
</head>
<body bgcolor="#0066FF">
<B sytle="color:#FFFFFF"><h3>welcome to my facebook account marks:</h3></B>
<table bgcolor="#FFFF66"border="1" witdh="40%">
<caption><B style="color:#C00">facebook university</B></caption>
<thead>
<tr><th>subject</th><th>mark</th></tr>
</thead>
<tfoot>
<tr><th>total</th><th>75%</th></tr>
</tfoot>
<tbody>
<tr><td>likes</td><td>15%</td></tr>
<tr><td>comments</td><td>25%</td>
</tr> <tr><td>share</td><td>15%</td></tr>
<tr><td>friends</td><td>20%</td></tr>
</tbody>
</table>
</body>
</html>
ومهمتك هذه المرة:
إنشاء صفحة لشركة تجارية لبيع اجهزة اللابتوب مثلا ويكون فيها اسم الشركة ومعلومات عنها وجدول يحتوي على 3 أعمدة:
الأول : وفيه اسم المنتج ومواصفاته.
الثاني : صورة المنتج.
الثالث : سعر المنتج.
مع مراعاة وضع الصور بالأحجام المناسبة، وكما يمكن إضافة روابط من الصورة (التي ضمن الجدول) إلى الموقع الخاص بالمنتج.
إرسال الوظائف:
ضع ملف الكود و الصور في ملجد ثم اضغطه باستخدام برنامج Winrar واحفظ الملف باسمك الكامل ثم ارسله الى الايميل التالي: اضغط هنا
او يمكنك نسخ الايميل من هنا "k-alhumsi@hotmail.com" ولصقه في المتصفح الخاص بك
الشهادة تعطى فقط للاشخاص الذين أتموا الوظائف بغض النظر اذا فيها أخطاء ام لا
Tags:
دورة HTML