الدرس العاشر : الجداول و تنسيقها (2)

الوليد الراشدي · #1 (**permalink**) 27-08-2008, 03:11 PM

الدرس العاشر : الجداول و تنسيقها (2)

السلام عليكم و رحمة الله و بركاته ..
درست اخي في الدرس الماضي كيف تضع جدول في لغة الـ html و كيف تنسقه ..
أنا فصلت الدرسين عشان اسهل لاني أدري أن هذيله الدرسين معقدات شوي ..
اليوم درسنا راح يركز على شيئين :
الاول : دمج الخلايا باستخدام الامرين colspan و rowspan
الثاني : الخلايا و تنسيقها
و راح نبدي بالثاني ..
بسم الله ..

أولاً : الخلايا و تنسقها
مثل ما عرفنا في الدرس الاول من دروس الجداول أنه عدد الخلايا يتحدد بعدد تكرار الامر

كود PHP:

  <td>

و لكن السؤال الان : هل من الممكن أن تضيف عناصر html داخل الامر

كود PHP:

  <td>

؟؟ الاجابه : اوف كورس ممكن ممكن تضيف أي حاجه سواء كلام أو صوره .. الخ

تنسيق الخلايا مثل تنسيق الجداول فيه خصائص .. بس الفرق بينهم انه الاول يعمم على الجدول ككل بينما الثاني يعمم على خليه وحده بس .. الخليه ممكن تكون صف أو عمود ..
بداية الخصائص الي ممكن تضيفها لــ الخلايا :
1/ خاصية المحاذاه الافقيه
و تستخدم لمحاذاة الكائنات التي داخل الامر

كود PHP:

  <td>

محاذاة أفقياً
و تستخدم كالتالي :

كود PHP:

  <td align="xxxxx">

طبعا مع الالتزام بتغيير المتغير xxx الى احد القيم التاليه :
center = الوسط
left = اليسار
right = لليمين

2/ خاصية المحاذاه الرأسيه
و تستخدم لمحاذاة الكائنات التي داخل امر الخليه محاذاه رأسيه
و تستخدم كالتالي :

كود PHP:

  <td align="yyyyy">

طبعا مع الالتزام بتغيير المتغير yyyyy الى احد القيم التاليه :
bottom = القاع
middle = الوسط
top = الاعلى
baseline = تبعاً للخط الاساسي او خط القاعده

3/ خاصية الطول width
و تستخدم كالتالي : لا لا مب كل حاجه أنا بشرحها ..
هالمره بعطيك من دون مثال .. يعني أشرحلك بالكلام كيف تستخدم ..
تستخدمها مثل لما تستخدمها مع الجداول .. اذا ما تعرف كيف تستخدمها ارجع للدرس الماضي ..

4/ خاصية العرض height
نفس الكلام هذي الخاصيه تستخدمها مثل لما تستخدمها مع الجداول .. بس طبعاً لا تنسى انته تتعامل مع الخلايا مب مع الجداول يعني تغير أمر الجداول الى امر الخلايا ..

5/ خاصية لون الخلفيه
ههه لا تخافوا هالمره أنا بشرح ..
و نستخدمها كالتالي :

كود PHP:

  <td bgcolor="ccccc">

طبعا مع الالتزام بتغيير المتغير cccc الى أحد اكواد الالوان ..

معلومات على الطاير :
1- تتكرر بعض الخصائص مع بعض الاوامر .. ما القصد من الجمله الماضيه ؟؟ القصد أوضحلك أنه اذا ما حطيت الخاصيه bgcolor لــ امر الخليه فــ انه الخليه تلقائيا راح تاخذ اللون الي انته حطيت لما نسقت الصفحه أو تحديداً الي موجود فـ الامر

كود PHP:

  <body>

2- من الممكن أنك تلاحظ حاجه لما تحط .. في بعض الكمبيوترات فيها عدة مستعرضات للانترنت ممكن أنك تلاحظ أنه قياس الجدول في المستعرض الاول يختلف عن المستعرض الثاني .. و ذلك لاختلاف التعامل مع الخاصيتين width و height و أيضا لاختلاف طريقة ترجمة شفرة الــ html من مستعرض لاخر .. و بالنسبه لهذا الامر فــ أنا من وجهة نظري أنك أفضل طريقه عشان تحل هذا النزاع تحط الخصائص width و height مع امر الجدول

كود PHP:

   <table>

ثانياً : خاصية دمج الخلايا
البعض الحين داخل نفسه يقول : أني أنا خرفت ليش حطيت هذي الخاصيه في جزء لوحدها من الدرس مع أنه ما في فرق بينها و بين الخصائص الثانيه ؟؟ الفرق أنه هذي الخاصيه معقده أكثر من الباقي .. شو يعني معقده ؟ الحين بنشوف

أولاً : دمج الصفوف .. او الدمج الافقي ..
و نستخدم فيه الامر colspan لكن كيف نحدد عدد الخلايا الي ندمجهم ؟؟ و هل بيكون الدمج كذيه فوضه ؟؟
نحدد عدد الخلايا عن طريق تحديد المتغير الذي يتعلق بالخاصيه colspan
اما بالنسبه للدمج فيكون بشكل منتظم .. يعني انته اذا سويت للخليه هذي دمج راح تندمج مع الي جنبها ..
و تستخدم هذي الخاصيه كالتالي :

كود PHP:

  <td colspan="n">

مع الالتزام بتغيير الــ n الى عدد الخلايا التي تريد أن تدمجها مع الخليه التي وضعت معها هذي الخاصيه .. طبعاً لا تنسى انه احنا نشتغل الحين أفقياً ..

ثانياً : دمج الاعمده .. او الدمج العمودي
و نستخدم معاه الخاصيه rowspan و يطابق في مواصفاته الامر colspan
و يستخدم كالتالي :

كود PHP:

  <td rowspan="n">

مثل ما اتفقنا نغير الــ n الى عدد الخلايا الي تريد تدمجهم مع الخليه الي احنا قاعدين نشتغل عليها .. طبعاً رأسياً ..
ملاحظه : الدمج الرأسي أو العمودي يكون للاسفل يعني اذا انته حطيت دمج رأسي فــ وحده من الخلايا راح تندمج تلقائي مع الي تحتها ..

آخيرا و ليس آخراً .. تطبيق عملي على كل هذا الكلام ..

كود PHP:

  <html> 
[right]<head> [/right]
 
[right]<title> الجداول </title> [/right]
 
[right]</head> [/right]
 
[right]<table border="3" width="300" height="200"> [/right]
 
[right]<tr> [/right]

<td colspan="3" bgcolor="ffffff#"> خليه 1 </td> 
[right]</tr>
<tr> 
<td> خليه 2 </td> <td> خليه 2 </td> 
</tr> 
<tr> 
<td rospan="2"> خليه 3 </td> 
</tr>
</table> 
</body> 
</html>[/right]

و مثل ما عودتكم راح تكون نتيجة الشفره بعد فتحها بالمستعرض كذا :

أسئلة الدرس ..
- هل يمكن اضافة علامات تنسيق الفقرات و العناوين الى احدى خلايا الجدول ؟؟

تطبيقات الدرس ..

- غير طول الجدول الي فالتطبيق الى 500

- و أيضاً غير محتوى الخليه 1 .. و اعمل داخلها قائمه عدديه راح يكون مكتوب فالقائمه التالي :

1- سلطنة عمان

2- الامارات العربيه المتحده

3- السعوديه

- و غير حجم الحدود و خليه 2

و سلامتكم .. ولا تنسوا أبي أشوف التطبيقات في المناقشه ..

تحياتي : الوليد الراشدي

الدرس العاشر : الجداول و تنسيقها (2)

دورة تعلم لغة الـ HTML