الدرس العاشر : الجداول و تنسيقها في صفحات HTML (2)
درست اخي في الدرس الماضي كيف تضع جدول في لغة الـ html و كيف تنسقه ..
أنا فصلت الدرسين عشان اسهل لاني أدري أن هذيله الدرسين معقدات شوي ..
اليوم درسنا راح يركز على شيئين :
الاول : دمج الخلايا باستخدام الامرين colspan و rowspan
الثاني : الخلايا و تنسيقها
و راح نبدي بالثاني ..
بسم الله ..
كود PHP:
و مثل ما عودتكم راح تكون نتيجة الشفره بعد فتحها بالمستعرض كذا :
أنا فصلت الدرسين عشان اسهل لاني أدري أن هذيله الدرسين معقدات شوي ..
اليوم درسنا راح يركز على شيئين :
الاول : دمج الخلايا باستخدام الامرين colspan و rowspan
الثاني : الخلايا و تنسيقها
و راح نبدي بالثاني ..
بسم الله ..
أولاً : الخلايا و تنسقها
مثل ما عرفنا في الدرس الاول من دروس الجداول أنه عدد الخلايا يتحدد بعدد تكرار الامر كود PHP:
و لكن السؤال الان : هل من الممكن أن تضيف عناصر html داخل الامر كود PHP:
؟؟ الاجابه : اوف كورس ممكن ممكن تضيف أي حاجه سواء كلام أو صوره .. الخ
مثل ما عرفنا في الدرس الاول من دروس الجداول أنه عدد الخلايا يتحدد بعدد تكرار الامر كود PHP:
<td>
و لكن السؤال الان : هل من الممكن أن تضيف عناصر html داخل الامر كود PHP:
<td>
؟؟ الاجابه : اوف كورس ممكن ممكن تضيف أي حاجه سواء كلام أو صوره .. الخ
تنسيق الخلايا مثل تنسيق الجداول فيه خصائص .. بس الفرق بينهم انه الاول يعمم على الجدول ككل بينما الثاني يعمم على خليه وحده بس .. الخليه ممكن تكون صف أو عمود ..
بداية الخصائص الي ممكن تضيفها لــ الخلايا :
1/ خاصية المحاذاه الافقيه
و تستخدم لمحاذاة الكائنات التي داخل الامر كود PHP:
محاذاة أفقياً
و تستخدم كالتالي :
كود PHP:
طبعا مع الالتزام بتغيير المتغير xxx الى احد القيم التاليه :
center = الوسط
left = اليسار
right = لليمين
بداية الخصائص الي ممكن تضيفها لــ الخلايا :
1/ خاصية المحاذاه الافقيه
و تستخدم لمحاذاة الكائنات التي داخل الامر كود PHP:
<td>
محاذاة أفقياً
و تستخدم كالتالي :
كود PHP:
<td align="xxxxx">
طبعا مع الالتزام بتغيير المتغير xxx الى احد القيم التاليه :
center = الوسط
left = اليسار
right = لليمين
2/ خاصية المحاذاه الرأسيه
و تستخدم لمحاذاة الكائنات التي داخل امر الخليه محاذاه رأسيه
و تستخدم كالتالي :
كود PHP:
طبعا مع الالتزام بتغيير المتغير yyyyy الى احد القيم التاليه :
bottom = القاع
middle = الوسط
top = الاعلى
baseline = تبعاً للخط الاساسي او خط القاعده
و تستخدم لمحاذاة الكائنات التي داخل امر الخليه محاذاه رأسيه
و تستخدم كالتالي :
كود PHP:
<td align="yyyyy">
طبعا مع الالتزام بتغيير المتغير yyyyy الى احد القيم التاليه :
bottom = القاع
middle = الوسط
top = الاعلى
baseline = تبعاً للخط الاساسي او خط القاعده
3/ خاصية الطول width
و تستخدم كالتالي : لا لا مب كل حاجه أنا بشرحها ..
هالمره بعطيك من دون مثال .. يعني أشرحلك بالكلام كيف تستخدم ..
تستخدمها مثل لما تستخدمها مع الجداول .. اذا ما تعرف كيف تستخدمها ارجع للدرس الماضي ..
و تستخدم كالتالي : لا لا مب كل حاجه أنا بشرحها ..
هالمره بعطيك من دون مثال .. يعني أشرحلك بالكلام كيف تستخدم ..
تستخدمها مثل لما تستخدمها مع الجداول .. اذا ما تعرف كيف تستخدمها ارجع للدرس الماضي ..
4/ خاصية العرض height
نفس الكلام هذي الخاصيه تستخدمها مثل لما تستخدمها مع الجداول .. بس طبعاً لا تنسى انته تتعامل مع الخلايا مب مع الجداول يعني تغير أمر الجداول الى امر الخلايا ..
نفس الكلام هذي الخاصيه تستخدمها مثل لما تستخدمها مع الجداول .. بس طبعاً لا تنسى انته تتعامل مع الخلايا مب مع الجداول يعني تغير أمر الجداول الى امر الخلايا ..
5/ خاصية لون الخلفيه
ههه لا تخافوا هالمره أنا بشرح ..
و نستخدمها كالتالي :
كود PHP:
طبعا مع الالتزام بتغيير المتغير cccc الى أحد اكواد الالوان ..
ههه لا تخافوا هالمره أنا بشرح ..
و نستخدمها كالتالي :
كود PHP:
<td bgcolor="ccccc">
طبعا مع الالتزام بتغيير المتغير cccc الى أحد اكواد الالوان ..
معلومات على الطاير :
1- تتكرر بعض الخصائص مع بعض الاوامر .. ما القصد من الجمله الماضيه ؟؟ القصد أوضحلك أنه اذا ما حطيت الخاصيه bgcolor لــ امر الخليه فــ انه الخليه تلقائيا راح تاخذ اللون الي انته حطيت لما نسقت الصفحه أو تحديداً الي موجود فـ الامر كود PHP:
2- من الممكن أنك تلاحظ حاجه لما تحط .. في بعض الكمبيوترات فيها عدة مستعرضات للانترنت ممكن أنك تلاحظ أنه قياس الجدول في المستعرض الاول يختلف عن المستعرض الثاني .. و ذلك لاختلاف التعامل مع الخاصيتين width و height و أيضا لاختلاف طريقة ترجمة شفرة الــ html من مستعرض لاخر .. و بالنسبه لهذا الامر فــ أنا من وجهة نظري أنك أفضل طريقه عشان تحل هذا النزاع تحط الخصائص width و height مع امر الجدول كود PHP:
1- تتكرر بعض الخصائص مع بعض الاوامر .. ما القصد من الجمله الماضيه ؟؟ القصد أوضحلك أنه اذا ما حطيت الخاصيه bgcolor لــ امر الخليه فــ انه الخليه تلقائيا راح تاخذ اللون الي انته حطيت لما نسقت الصفحه أو تحديداً الي موجود فـ الامر كود PHP:
<body>
2- من الممكن أنك تلاحظ حاجه لما تحط .. في بعض الكمبيوترات فيها عدة مستعرضات للانترنت ممكن أنك تلاحظ أنه قياس الجدول في المستعرض الاول يختلف عن المستعرض الثاني .. و ذلك لاختلاف التعامل مع الخاصيتين width و height و أيضا لاختلاف طريقة ترجمة شفرة الــ html من مستعرض لاخر .. و بالنسبه لهذا الامر فــ أنا من وجهة نظري أنك أفضل طريقه عشان تحل هذا النزاع تحط الخصائص width و height مع امر الجدول كود PHP:
<table>
ثانياً : خاصية دمج الخلايا
البعض الحين داخل نفسه يقول : أني أنا خرفت ليش حطيت هذي الخاصيه في جزء لوحدها من الدرس مع أنه ما في فرق بينها و بين الخصائص الثانيه ؟؟ الفرق أنه هذي الخاصيه معقده أكثر من الباقي .. شو يعني معقده ؟ الحين بنشوف
البعض الحين داخل نفسه يقول : أني أنا خرفت ليش حطيت هذي الخاصيه في جزء لوحدها من الدرس مع أنه ما في فرق بينها و بين الخصائص الثانيه ؟؟ الفرق أنه هذي الخاصيه معقده أكثر من الباقي .. شو يعني معقده ؟ الحين بنشوف
أولاً : دمج الصفوف .. او الدمج الافقي ..
و نستخدم فيه الامر colspan لكن كيف نحدد عدد الخلايا الي ندمجهم ؟؟ و هل بيكون الدمج كذيه فوضه ؟؟
نحدد عدد الخلايا عن طريق تحديد المتغير الذي يتعلق بالخاصيه colspan
اما بالنسبه للدمج فيكون بشكل منتظم .. يعني انته اذا سويت للخليه هذي دمج راح تندمج مع الي جنبها ..
و تستخدم هذي الخاصيه كالتالي :
كود PHP:
مع الالتزام بتغيير الــ n الى عدد الخلايا التي تريد أن تدمجها مع الخليه التي وضعت معها هذي الخاصيه .. طبعاً لا تنسى انه احنا نشتغل الحين أفقياً ..
و نستخدم فيه الامر colspan لكن كيف نحدد عدد الخلايا الي ندمجهم ؟؟ و هل بيكون الدمج كذيه فوضه ؟؟
نحدد عدد الخلايا عن طريق تحديد المتغير الذي يتعلق بالخاصيه colspan
اما بالنسبه للدمج فيكون بشكل منتظم .. يعني انته اذا سويت للخليه هذي دمج راح تندمج مع الي جنبها ..
و تستخدم هذي الخاصيه كالتالي :
كود PHP:
<td colspan="n">
مع الالتزام بتغيير الــ n الى عدد الخلايا التي تريد أن تدمجها مع الخليه التي وضعت معها هذي الخاصيه .. طبعاً لا تنسى انه احنا نشتغل الحين أفقياً ..
ثانياً : دمج الاعمده .. او الدمج العمودي
و نستخدم معاه الخاصيه rowspan و يطابق في مواصفاته الامر colspan
و يستخدم كالتالي :
كود PHP:
مثل ما اتفقنا نغير الــ 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]
[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
و سلامتكم .. ولا تنسوا أبي أشوف التطبيقات في المناقشه ..
تحياتي : الوليد الراشدي
__________________ الدرس التاسع : الجداول و تنسيقها في صفحات HTML (1 )
الدرس التاسع : الجداول و تنسيقها (1)
شباب تكفون ركزوا عندي
الجداول أصعب شي لكنها مفيده واجد بالاخص لما تسوي ستايل لمنتدى أو مجله ..
تابعوا عندي خطوه خطوه عشان تفهموا زين ..
أولاً : الاوامر الاساسيه لادراج جدول
شوفوا هالشفره ..
كود PHP:
<html>
<head>
<title> الجداول </title>
</head>
<body>
<table>
<tr>
<td> خليه </td> <td> خليه </td>
</tr>
<tr>
<td> خليه </td> <td> خليه </td>
</tr>
</table>
</body>
</html>
<head>
<title> الجداول </title>
</head>
<body>
<table>
<tr>
<td> خليه </td> <td> خليه </td>
</tr>
<tr>
<td> خليه </td> <td> خليه </td>
</tr>
</table>
</body>
</html>
وعند نسخ الشفره الى المفكره و من ثم استعراضها في المستعرض .. تكون النتيجه كذا :
شرح الشفره ..
شوفوا في ثلاث أوامر أساسيه عند وضع أي جدول الي هي ..
كود PHP:
<table>
= الامر الاساسي في ادراج الجداول و تندرج تحته باقي الاوامر
كود PHP:
<tr>
= أمر اضافة عمود و تندرج تحته أوامر الصفوف و الخلايا
كود PHP:
<td>
= امر اضافة الصف أو الخليه
ثانياً : الخصائص التي تستخدم في تنسيق (( الجدول ))
و راح نعددها واحد واحد و بعدين راح أعطيكم مثال يوضحها كلها ان شاء الله ,,
1/ الخاصية border
و هي لاضافة حدود للجدول .. و نستخدمها على هذا الشكل ..
كود PHP:
<table border="x">
طبعا مع تغيير المتغير x الى الرقم الذي يمثل حجم الحدود الذي تريدها للجدول ..
و هذا يعني أن حجم الحد سيكون 4 .. ولكن اذا كنا نريد نحط ما فيه حد شو نسوي ؟؟ الجواب : نحط بدل x الرقم 0
2/ خاصية العرض width
و تستخدم كالتالي :
كود PHP:
<table width="xxx">
و ممكن نغير الــ xxx الى حاجتين ..
الاولى :متغير يكون رقم كالتالي :
كود PHP:
<table width="400">
الثانيه : متغير يكون نسبه مئويه ..
<table width="75%">
2/ خاصية الارتفاع height
حالها حال خاصية العرض ممكن بالنسبه المئويه و ممكن بالارقام ..
ملاحظه : جميع القياسات التي تضعها في كل من خاصية الطول و العرض و الارتفاع و غيرها بالبكسل و ليست بالسنتي متر ..
نرجع لخاصيتنا ..
لاحظ كيف نكتبها ..
كود PHP:
<table height="100">
او
كود PHP:
<table height="20%">
الحين اخر حاجه ..
تطبيق عملي على كل الي قلناه اليوم ..
كود PHP:
<html>
<head>
<title> الجداول </title>
</head>
<body>
<table border="3" width="300" height="75%">
<tr>
<td> خليه </td> <td> خليه </td>
</tr>
<tr>
<td> خليه </td> <td> خليه </td>
</tr>
</table>
</body>
</html>
<head>
<title> الجداول </title>
</head>
<body>
<table border="3" width="300" height="75%">
<tr>
<td> خليه </td> <td> خليه </td>
</tr>
<tr>
<td> خليه </td> <td> خليه </td>
</tr>
</table>
</body>
</html>
و مثل ما تعودنا لازم تكون نتيجة الكود بعد نسخه الى المفكره و تغيير امتداده و تشغيله بالمستعرض مثل ما موضح فالصوره ..
لم ننتهي من الجداول الا و هذي البدايه بس ..
يـــــــــــــــــتــــ الجداول ــــــــــــــبـــ و تنسيقها (2) ــــــــــــــــع
للتذكير فقط : يجب حفظ حقوق الكاتب والمصدر عند نقل الدرس من هذه الدورة وتذكر أنه لا يجوز نسب المواضيع لغير كاتبها.
تحت طائلة المحاسبه في الدنيا و العقاب في الاخره ..
تحياتي : الوليد الراشدي