الاخ سنو اشكرك فعلا لتثبيتك الموضوع .. 
واتمنى للجميع الاستفادة ..
توقفنا سابقا مع تمرين صفحة منسقة بالجداول استعملنا بها بعض السمات التي مرت معنا واضفنا اليها شيء جديد وهو تداخل الجداول .. اي انني استطيع ان ابني جداول بداخل جدول وهذه مهمة جدا جدا لان لا يخلو تصميم من الجداول المتداخلة ..
لنشرح الكود السابق الذي استعملناه ..
قمنا بفتح مستند نصي بلغة ال html حددنا عنوان ال title ب The first page اقفلنا ال head
كود HTML:
<html>
<head>
<Title>The first page</Title>
</head>
افتتحنا ال body واخترنا الخلفية صورة فكان لا بد اذا من استعمال سمة background وقلنا انها خاصة للخلفياتت التي نستعمل بها صور .. وكانت الصورة اسم الصورة 1 وامتدادها هو jpg فوضعناها هكذا
1.jpg وضعناهم في داخل وسم ال body هكذا :
كود HTML:
<body background=1.jpg>
ثم بدأنا العمل بالجداول افتتحنا وسم الجدول table حددنا بداخله سمة ال border بعرض 2 ثم ال CELLSPACING وهي كما قلنا انها المساحة المحصورة بين الخلايا والاعمدة هنا جعلت قيمتها صفر اي انها خامدة ولا اريد استعمالها الان CELLSPACING=0 ثم ال CELLPADDING وهي تحدد مساحة الخلية كما راينا سابقا وحددتها هنا ب 15 .. CELLPADDING=15 وهي المسؤولة طبعا عن اعطائي هذا الفاصل الجميل المتناسق في مساحة الخلايا .. ثم حددت ال WIDTH وهو عرض الجدول وحدته بالنسبة المئوية من قيمة الصفحة فجعلته 90% من اجمالي قيمة الصفحة ..
ثم جعلت للجدول هذا خلفية صورة فكان لابد من استدعاء السمة BACKGROUND واخترت لها الصورة التي اسمها 9 وامتداها هو فتكون النتيجة هكذا BACKGROUND=9.jpg ثم حددت بعض جهات الحدود التي اريد اظهارها واعطائها الوانا فاخترت ال borderColorDark واعطيته لون #76B291 وال bordercolorlight واعطيته قيمة اللون #D1E1D8 ( راجع التمرين الخاص بهذه السمات ان كنت قد نسيتها لترى عمل كل منهما ) .. ثم حددت الاتجاه الداخلي لمحتويات الجدول بالتوسط align=center
ليصبح كود هكذا :
كود HTML:
<table BORDER=2 CELLSPACING=0 CELLPADDING=15 WIDTH="90%" BACKGROUND="9.jpg" borderColorDark="#76B291" bordercolorlight="#D1E1D8" align="center" >
ثم افتتحنا ال tr واتبعناها ب ال td
من غير ان نغلق ايا منهما ابتدائنا بداخلهما ببناء جدول جديد .. قريب من معطيات الجدول الاساسي الول لكن فيه بعض التغيير بالسمات التاية .. ال CELLPADDING هنا جعلت قيمتها ال 12 وال WIDTH جعلتها بالقيمة المئوية وقيمتها 100% اي التمدد الكلي داخل الجدول الاساسي بحيث يحتل المساحة كاملة وال BACKGROUND اخترت لها الصورة 1 وهي نفس الصورة التي استعملتها في الخلفية الاساسية للصفحة ..
ليصبح الكود هكذا :
كود HTML:
<table BORDER=2 CELLSPACING=0 CELLPADDING=12 WIDTH="100%" BACKGROUND="1.jpg" borderColorDark="#76B291" bordercolorlight="#D1E1D8" align="center" >
ثم افتتحت ال tr و td الخاصتين بالجدول هذا الاخير
ثم بداخلهما اخترت ان افتتح جدول اخر ويكون الجدول الثالث في الصفحة والجدول الثاني داخل الجدول الاساسي واخترت له نفس معطيات الجدول الاول وغيرت فقط ب نسبة ال CELLPADDING=10 جعلت قيمتها 10 والخلفية طبعا اخترت لها الصورة التي اسمها 3 وامتدادها jpg :
كود HTML:
<table BORDER=2 CELLSPACING=0 CELLPADDING=10 WIDTH="100%" BACKGROUND="3.jpg" borderColorDark="#76B291" bordercolorlight="#D1E1D8" align="center" >
ثم افتتحت للجدول الاخير tr و td
ثم افتتحت ال div حتى يحيط بالاشياء التي ساضعها في داخل هذا الجدول وحددت الاتجاه بداخله وهو التوسط
كود HTML:
<div align="center">
ثم افتتحت السمة <p> والتي ستحيط بكتلة النص الذي ساكتبه افتتحت وسم الخط font استدعيت السمة face لتحديد نوع الخط واخترته Chiller قد لايكون نوع الخط هذا موجود عندك في الجهاز فهو من الخطوط الاضافية التي قمت بانزالها وبالتالي فمن الممكن ان لا يراها جهازك لانها غير موجودة عندك .. قم باختيار نوعية خط موجودة في جهازك عوضا عنها .. ثم حجم الخط size حددته بالرقم 7 لون الخط color اعطيته قيمة #547562
اغلقت الوسم وكتبت كلمة jordan weather ثم قمت باقفال وسم الخط font ووسم ال p
كود HTML:
<p><font face="Chiller" size="7" color="#547562">jordan weathe</font></p>
بعد ذلك نفس العملية السابقة مع بعض التغييرات التي اخترتها في نوع الخط كتبت كلمة yasminah
كود HTML:
<font face="Edwardian Script ITC" size="7" color="#D79798">yasminah</font>
ثم ابتدات بفتح جدول اخر هذا الجدول بصورة العرض في متصفحك لن تراه لاني قمت باخفاء حددوه ال border جعلت قيمتها صفر فهو لن يظهر للعيان في حالة عرض الصفحة وجعلت عرضه 80% وال cellpadding جعلتها 40
كود HTML:
<table class="text01" width="80%" border="0" cellspacing="0" cellpadding="40" align="center">
بالنسبة للسمة class دعها الان ستمر معنا لاحقا ان شاء الله ولايهم حتى لو انك لم تضفها الى الجدول ..
ثم افتتحنا ال tr وال td الخاصة بالجدول الاخير داخل ال td حددنا الاتجاه وهو التوسط :
كود HTML:
<tr>
<td align="center">
ثم ادرجت الصورة داخل وسم img وحددت ارتفاع الصورة وعرضها ومن ثم اغلقت وسم ال td واتبعته باغلاق وسم ال rt واتبعته باغلاق وسم ال table الاخير :
كود HTML:
<img border="0" src="4.jpg" width="150" height="85"></td>
</tr>
</table>
بالنسبة لشرح وسوم الصور والصور سيمر معنا بالدرس التالي ان شاء الله بالتفصيل ..
والان ستبدأ عملية اغلاق الوسوم التي لم اغلقها بعد
ونبدأ باغلاقها بشكل عكسي اي الاخير نغلقه اولا كما رايت في اغلاق الوسم الاخير ..
نغلق ال td وال tr والtable الخاصتين بالجدول ما قبل الاخير
ونتبعها ايضا باغلاقات الجدول الذي قبله والذي قبله وهكذا حتى نتاكد من اقفال وسوم جميع الجداول التي قمنا بانشائها :
كود HTML:
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
عندما نفتح الجدول نضع ال table اولا ثم ال tr ثانيا ثم ال td ثالثا لكن في عملية الاغلاق تكون عكسية بحيث نغلق td اولا ثم ال tr ثانيا ثم ال table ثالثا هكذا ..
طبعا نصيحة لك دائما عندما تفتح وسوم حتى لاتضيع كم وسم يجب اغلاقه في النهاية قم من البداية بفتح الوسم واضف الى جانبه وسم الاغلاق ومن ثم باعد بينهما بالسبيس وضع المحتويات التي تريد بينهما وهكذا ..
الان انتهينا ان شاء الله من الجداول .. اتمنى ان تكون قد وصلت كاملة .. ومن لديه سؤال فاليتفضل ..
وسننتقل في الفقرة التالية الى موضوعين اخرين تماما وهو الوصلات التشعيبية والصور
تحياتي للجميع
العرض الشجري