صمم موقعك الإلكتروني سريعاً خلايا الجداول - الدرس السابع

الجداول والصناديق

تعلمنا في الدرس السابق كيفية إنشاء الجداول وما هي خصائص الجداول وعلمنا أن الجدول يتكون من  صوف <tr> تحتوي خلايا وهي إما <td> أو <th> للرؤوس فهل لهذه الأوسمة خصائص؟
 الجواب: نعم وهي تقريبا نفس  خصائص وسم الجدول <table>

خصائص الأوسمة <tr> <th> <tr>:

1- dir : وهي لتحويل إتجاه النصوص داخل الوسم وتأخذ القيم  rtl أي من اليمين الى اليسار و ltr أي من اليسار الى اليمين وهي القيمة التلقائية للجدول.

2- bgcolor: لإعطاء الألوان إما الأساسية منها او بنظام الهكساديسمل راجع الدرس الثاني.

3- background: لجعل صورة معينة خلفية للجدول وهي مشابة لخاصية في  وسم الجسم.

4- width: لتحديد عرض (للخلية) فقط بالنسبة للصفحة (بنظام النسب المئوية او نظام البكيسل وهو التلقائي هنا).

5- height: لتحديد طول (للخلية  أو الصف) بالنسبة للصفحة (بنظام النسب المئوية او نظام البكيسل وهو التلقائي هنا).

6- colspan: لدمج الأعمده وهي للخلية فقط.

7- rowspan: لدمج الصفوفوهي للخلية فقط.

8- align : لتحديد موفع الجدول نسباً الى الصفحة ويأخذ القيم التالية (left, right, center).

لاحظ إستخدام الخاصية الأولى في إحدى الأوسمة كيف حددنا اتجاة النص داخلها من اليسار الى اليمين:

لاحظ الخاصية الثانية التي طبقناها على الصف الأول باللون الأحمر والصف الثاني باللون الأزرق وخليه داخل الصف الثالث باللون الاخضر:

لاحظ تطبيق الخاصية الرابعة والخامسة على الخلايا والصفوف:

لاحظ ان عرض خلية واحدة في الصف الثاني التي أخذت القيمة 100% من الصفحة أثرت على كل الجدول

بينما خاصية الطول التي وضعت هنا للصف الثالث بمقدار 50 بكسل اثر على صف واحد فقط بالتالي الصف الأول والثاني بقي على نفس طوله الأصلي

الأن لننتبه الى الخاصيتان السادسة والسابعة دمج الصفوف والأعمدة ولنراعي أن الدمج يعني التخلي عن بعض البيانات لاحظ التغير

لاحظ هنا عندما أردنا دمج خلية التي محتواها 1 والخلية التي محتواها أحمد إستخدمنا خاصية colspan اي دمج الأعمدة واخذت القيمة 2 اي نريد ان ندمج عامودين في هذا الصف ثم حذفنا الخلية التي تحتوي البيان أحمد.

ماذا عن دمج الصفوف؟

لاحظ أننا قمنا بدمج 3 صفوف لذك علينا أن نحذف الخلايا التي تحتوي الرقم 1 والرقم 2.

ومثل هذه الخصائص تستخدم لصنع جداول كهذا الجدول:

الى لقاء قريب....