الصفحة الرئيسية
الصفحة الرئيسيه المرجع الكامل كتب وبرامج مجانية المنتدي  مواقع هامه

الجداول المتداخله و المستديرة

في البدايه نتمي ان تكون قد فهمت ما سبق من أساسيات الجداول و الجداول المتقدمه و إذا لم تكن نرجوا ان تقوم بمراجعتهم مرة أخري ،في البدايه سنتكلم علي الجداول المتداخله ثم كيفيه إعطاء منظر جيد للجداول و زوايا مستديرة 

جدول داخل جدول

كيف يمكن ان تنشأ جدول بداخل جدول ؟ إن الإجابة علي هذا السؤال في غايه البساطة والسهوله فقط كل ما عليك إلا أن تحدد الجدول الكبير الذي سيحتوي بداخله الجدول الآخر كما تري

هذه هي الخليه الأولي في الجدول الكبير أما الخليه الآخرة فهي الموجوده باليسار .

هنا تري الجدول الآخر
و هذا الجدول بداخل الجدول الكبير

و لعمل الجدول داخل جدول يتطلب منك ان تقوم بكتابة الأوسم صحيحه و هذا هو الكود الخاص بعمل مثل هذا الجدول ( لاحظ أن كود الجدول الآخر بداخل الوسم )

<TABLE>
<TR>
<TD>هذه هي الخليه الأولي في الجدول الكبير أما الخليه الأخري فهي الموجود باليسار</TD>
<TD>

<TABLE>
<TR><TH>هنا تري الجدول الآخر</TH></TR>
<TR><TH>و هذا الجدول بداخل الجدول الكبير</TH></TR>
</TABLE>

</TD>
</TR>
</TABLE>

و تلاحظ أن الجدول الأول بداء بالوسم <TABLE> ثم تعريف الخلايا ثم جاء وسم الجدول الآخر أيضا بداء بالوسم <TABLE> و لم نقم بإنهاء وسم الجدول الأول بعد ثم قمنا بتحديد خلايا الجدول الآخر و إغلاق الوسم و بعدها قمنا بإغلاق الخلايا للجدول الرئيسي ثم قمنا بإغلاقه .


ربما تكون تعبت من العمل بالجداول حيث ان كل شيء مستقيم حتى الحواف والزوايا ولكن ما رأيك أن نعطي لها شكل جديد و جيد مثلا مارأيك أن نجعل حواف و زوايا الجدول مستديرة ؟ إنها فكرة رائعه وسهله لا تحتاج منك إلا بعض فنون الرسم البياني فقط والجداول ، الآن سأشرح لك ماذا أقصد علي هذا المثال

o   o
 

محتويات الخليه الأساسيه


 
o   o

o   o
 

محتويات الخليه الأساسيه


 
o   o

هذا هو الجدول الذي سنجعل زوايا مستديرة في البدايه يجب ان تكون الزوايه خلايا مستقله بذاتها ولا شيء بداخلها و لقد وضعت في كل زاويه من الزوايه "o" حتى يسهل عليك الأمر ، هناك أربع زوايا أذن نحن سنحتاج إلي أربع صور بشكل مربع . يكون موجود بها قوس ولكن كل قوس يكون بشكل مختلف لانهم كلهم يواجهوان زوايا مختلفة .

و يكون الكود لهذا الجدول كما يلي :-

<TABLE BORDER="0" WIDTH="200" CELLPADDING="0" CELLSPACING="0">
<TR BGCOLOR="#CC00CC">
<TH WIDTH="15">o</TH>
<TH WIDTH="170">&nbsp;</TH>
<TH WIDTH="15">o</TH>
</TR>

<TR BGCOLOR="#CC00CC">
<TH WIDTH="15">&nbsp;</TH>
<TH WIDTH="170" BGCOLOR="#CC3399">
Main Content cell
</TH>
<TH WIDTH="15">&nbsp;</TH>
</TR>

<TR BGCOLOR="#CC00CC">
<TH WIDTH="15">o</TH>
<TH WIDTH="170">&nbsp;</TH>
<TH WIDTH="15">o</TR>
</TABLE>

لا بد وان تكون قد قرأت وفهمت أساسيات الجداول و الجداول المتقدمه لكي تستطيع ان تفهم الكود السابق  كما يجب ان تتذكر ان الخلايا الفارغه يجب ان تحتوي علي &nbsp; لكي يظهروا ، و إذا قمت بإستخدام الكود العلوي فستلاحظ ان الجدول طويل جدا و لذلك لانه معرف علي حجم خط 3 للخليه كحجم إفتراضي  ولهذا كل ما عليط فعله هو ان تضع خاصية وسم الخط  حولها مثل هذا

<FONT SIZE="1">&nbsp;</FONT>

مثال لصورة زاويه مستديرة
الزاويه السفلي اليمني الزاويه السفلى اليسرى الزاويه العليا اليمنى

و الآن إلي محرر الرسومات أي برنامج يقوم بعمل صور ذات إمتداد gif يصلح لهذا ، كن متأكد من حجم الصورة التي ستقوم بإنشائها فلذلك ننصح دائما بأن تقوم بعمل الجدول في البدايه و تختار الألوان المناسبه ثم تقوم بإنشاء الصور و لقد إختارت حجم خلايا الجدول 15 × 15 و لذلك قمت بعمل صورة بنفس الحجم لعمل أقواس صغيرة لطيفة لكن يمكنك أن تختار انت ما تريد من أحجام .

فقط قم بعمل أقواس مستديرة بنفس لون خلفيه الجدول ( قم بعمل قوس واحد ثم قم بحفظ الصورة ثم قم بلف الصورة ستحصل علي الزوايه الآخرى ثم قم بحفظها ثم هكذا حتى تحصل علي الأقواس الأربع )

و الآن كل ما عليك فعله هو أن تضع الصور في المكان الصحيه في الخلايا للجدول و يجب ان تتذكر عدم وجود مسافات بين الخلايا وبعضها حتي تحصل علي الجدول متناسق .

و عند انتهاء من كل هذا ، سيصبح لديك جدول بهذا الشكل

 
 

محتويات الخليه الأساسيه


 
 

Big Thanks For http://www.yourhtmlsource.com

 

< الصفحة الرئيسيه | المرجع الكامل | الجداول >

 

المصدر العربي التعليمي للـHTML

¤  المحتويات 

البدايه هنا
أبدأ هنا ·
دروس سريعة للمبتدئين ·

الدروس المتخصصه
النص ·
الصور ·
الجداول ·
الأطر ·
النماذج ·

 
فهرس الجداول  ¤

> أساسيات الجداول
> الجداول المتقدمه

 

¤  Html4Arab صندوق الأدوات 

> إبحث في الموقع  Search


Html4Arab بحث المصدر العربي التعليمي لل HTML يأتيكم من [Atomz.com] بحث متقدم


أشترك في القائمة البريدية
لتحصل علي آخر آخبار
الموقع و التحديثات

أشترك إلغاء الإشتراك

> أخبر صديقك عن الموقع

هل أعجبت بموقعنا


أذن أضفنا إلي المفضله <


مستخدمين ال Netscape أضغط CTRL+D

 
" إعلانات "


برعاية شبكة هايل

^ أعلي^ للإعلان بالموقع اربط بموقعنا أتصل بنا

© 2002 Ahmed Salah