الدرس الرابع: الجداول.. لصفحة أكثر تنظيما

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

وسومنا الجديدة في هذا الدرس:
وسم البداية <table> وسم النهاية </table>
مهمته وسم البداية لكل جدول.

وسم البداية <caption> وسم النهاية <caption>
مهمته يستخدم لإضافة تسمية الجدول والتي تظهر في أعلى الجدول.

وسم البداية <thead> وسم النهاية </thead>
مهمته لإضافة رأس للجدول ويتم وضعه بخط عريض تلقائيا في بداية الجدول.

وسم البداية <tbody> وسم النهاية </tbody>
مهمته لإعلام المتصفح ببداية جسم الجدول (المحتويات).

وسم البداية <tfoot> وسم النهاية </tfoot>
مهمته لإضافة تذييل للجدول، ويتم وضعه بخط عريض تلقائيا ف نهاية الجدول.

وسم البداية <tr> وسم النهاية </tr>
مهمته لإضافة سطر جديد للجدول (صف).

وسم البداية <th> وسم النهاية </th> 
مهمته لإضافة خانة جديدة ضمن الرأس والتذييل فقط.

وسم البداية <td> وسم النهاية </td> 
مهمته يستخدم لإضافة خانة جديدة ضمن السطر.


-لنأخذ مثال عن إضافة بعض الخواص للجدول :
<table bgcolor="#00FF00" border = "1" width = "40%"> 

حيث تمثل border عرض حواف الجدول، اما الـ width فهي نسبة عرض الجدول بالنسبة لعرض الصفحة الكلي وكما يمكن كتابتها بالبكسل (pixel)
أمّا لكتابة الجدول ضمن الصفحة:
<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 واحفظ الملف باسمك الكامل ثم ارسله الى الايميل التالي: اضغط هنا
او يمكنك نسخ الايميل من هنا "[email protected] " ولصقه في المتصفح الخاص بك

الشهادة تعطى فقط للاشخاص الذين أتموا الوظائف بغض النظر اذا فيها أخطاء ام لا

الدرس الرابع: الجداول.. لصفحة أكثر تنظيما Reviewed by Kamel Alhomsi on 11:04:00 ص Rating: 5

نرحب بتواصلك معنا

الاسم

بريد إلكتروني *

رسالة *

يتم التشغيل بواسطة Blogger.

اكتب كلمة البحث واضغط إنتري