تصميم مواقع الانترنت من الصفر حتى الاحتراف - الصفحة 5

ملفي الشخصي · [ **09-20-2008** ]

اهلا بك اخي معتصم بالعكس تماما اخي الكريم مرورك ومتابعتك واضافاتك تسعدني كثيرا ..
وحتى نوضح انا وانت للاخوة المتابعين سويا اين تكمن مشكلة الجداول بنظرهم او بنظر المبتدئين بالنسبة للجداول الصغيرة ممكن ان تكمن المشكلة في توزيع التنسيق الكتابي داخل الجدول فمثلا ممكن ان تظهر كلمة في اعلى المربع والمربع الذي يليه تظهر الكلمة في وسط المربع والمربع الذي يليه في اسفل المربع وهكذا .. هذا لاننا لا نستعمل حاليا البرامج المحررة وانما نكتب الشيفرات بايدينا وهذه طبعا حلها في المعرّفات الخاصة واتقانها كمعرف الترويسة الخ..
ولكن الذي نقصده والصعوبة التي قد تواجه الاخوة هو في الجداول الكبيرة والتي نقصد بها تقسيم صفحة الويب ..
فانا عندما اصمم صفحة ويب يجب ان اقسمها الى الى عدة اقسام الجزء العلوي وفيه البنر مثلا وجدول يساري للقائمة وممكن ايضا قائمة يمينية وعدة تقسيمات في وسط الصفحة .. هنا يبدأ مشوار التفكر والتمعن والخطأ والاعادة .. فمثلا يأتي احدهم ليكتب في القائمة اليمينية وصلات تشعيبية للموقع ومن بعدها ينتقل للكتابة في وسط الصفحة يجد ان الكتابة لا تستجيب له في الكتابة من اعلى المكان المخصص وانه كلما نزل في الكتابة اكثر يلاحظ ان محتويات القائمة اليسارية التي دونها من قبل تنخفض مع مستوى الكتابة وهكذا دواليك ... عدة مشاكل كانت تواجهنا في البداية ..
اردت ان اورد هذه الملاحظات حتى يعلم الاخوة اين يجب التركيز في موضوع الجداول ..
واريد ان اطمئنهم ان لا يقلقوا ابدا من هذه الناحية ان شاء الله فهناك مفاجآت جميلة جدا جدا نقول فيها لمشاكل الجداول وداعا .. وانها اصبحت من الماضي ولكن بالتدرج ..
شكرا لك اخي مرة اخرى واشكر كل من مر بهذا الموضوع مطالعا او متدربا ..
وسنكمل ان شاء الله مع الجداول في الفقرات التالية .
تحياتي

ملفي الشخصي · [ **09-20-2008** ]

مشكورة اخت ياسمين واذا تحتاجي اي مساعده انا بالخدمه

ملفي الشخصي · [ **09-20-2008** ]

الاخ المحاسنة اهلا بك ،، يسعدني مرورك ،، بالتأكيد ان احتجت لمساعدة لن أتاخر في طلب المساعدة ..
شكرا لك .

الان لنعد الى الجداول :
سنقوم الان بتصميم جدول من عدة اسطر وعدة خلاية او خانات .. حتى نفهم تماما عمل ال المعرّف <tr> والمعرّف <td>.
قم بفتح مستند جديد كما في الخطوة الاولى والخطوة الثانية من بداية الموضوع .. وقم بنسخ الكود التالي وضعه في مستندك وقم بحفظه :

كود HTML:

<html dir="rtl"> <head> <title>جداول 2</title> </head> <body bgcolor="#C0CFEF"> <br> <div align="center"> <table border="2" width="400px"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </div> </body> </html>

الان قم بعمل ريفريش لمتصفحك حتى ترى النتيجة كهذه :
http://www.freewebtown.com/jordan_am/yasminah6.htm

لقد قمنا بإنشاء جدول من عدة اعمدة وعدة خلايا .. لنلقي نظرة مرة اخرى على الكود لنتعلم ما قمنا به ونتعلم بطريقة عملية اكثر على عمل كل معرّف مر معنا ..

اولا ابتدأنا المستند بكتابة شيفرة ال html ولاحظ معي الجديد بها :

كود HTML:

<html dir="rtl">

الجديد بها هو dir=rtl تخبر المستعرض أن الكتابة ستكون من اليمين إلى اليسار ..

ثم الhead وتضمن ال title

كود HTML:

<head> <title>جداول 2</title> </head>

ومن ثم ال body مع تحديد لون الخلفية :

كود HTML:

<body bgcolor="#C0CFEF">

ثم وضعت معرّف ال br اعطيت به فاصل من اعلى الصفحة حتى لايكون الجدول ملتصق على الحافة العلوية للصفحة .. ثم أعطيت أمر التوسط للجدول قبل أن ابدأ به " اي اني اريد الجدول في منتصف الصفحة فإشارة التوسط هذه ستحيط بكامل جدولي :

كود HTML:

<div align="center">

ثم ابتدأنا بإنشاء الجدول بإعطاء امر ال table وحددنا له ال border وهو الحد الخارجي للجدول اعطيناه القيمة 2 وايضا حددت له العرض اي المساحة التي سيشغلها الجدول في الصفحة وحددت القيمة في ال البكسل وهي 400px:

كود HTML:

<table border="2" width="400px">

ثم بدأت برسم اول سطر في الجدول باستدعاء المعرّف <tr>:

كود HTML:

<tr>

والان اريد تقسيم هذا السطر الى عدة خلايا اخترت تقسيمة الى ست خلايا فاستدعيت صاحب المهمة وهو المعرّف <td> وكتبته ست مرات متتالية :

كود HTML:

<td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td>

وكانت النتيجة انه قام بتقسيم السطر الى ست خلايا واخترت طبعا ان اكتب كل بداية معرف ونهاية على سطر حتى استطيع تمييز ان اردت المراجعة في شيء ولا تختلط علي الامور .. فكما قلنا سابقا ان لغة ال html لا تعترف بالمساحات الفارغة التي تتركها داخل المستند وانما تعترف بالشيفرة فقط وتقوم بتنفيذها .. طبعا تلاحظ اني اضفت الكيان الرمزي الاخ المحاسنة اهلا بك ،، يسعدني مرورك ،، بالتأكيد ان احتجت لمساعدة لن أتاخر في طلب المساعدة ..
شكرا لك .

الان لنعد الى الجداول :
سنقوم الان بتصميم جدول من عدة اسطر وعدة خلاية او خانات .. حتى نفهم تماما عمل ال المعرّف <tr> والمعرّف <td>.
قم بفتح مستند جديد كما في الخطوة الاولى والخطوة الثانية من بداية الموضوع .. وقم بنسخ الكود التالي وضعه في مستندك وقم بحفظه :

كود HTML:

<html dir="rtl"> <head> <title>جداول 2</title> </head> <body bgcolor="#C0CFEF"> <br> <div align="center"> <table border="2" width="400px"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </div> </body> </html>

الان قم بعمل ريفريش لمتصفحك حتى ترى النتيجة كهذه :
http://www.freewebtown.com/jordan_am/yasminah6.htm

لقد قمنا بإنشاء جدول من عدة اعمدة وعدة خلايا .. لنلقي نظرة مرة اخرى على الكود لنتعلم ما قمنا به ونتعلم بطريقة عملية اكثر على عمل كل معرّف مر معنا ..

اولا ابتدأنا المستند بكتابة شيفرة ال html ولاحظ معي الجديد بها :

كود HTML:

<html dir="rtl">

الجديد بها هو dir=rtl تخبر المستعرض أن الكتابة ستكون من اليمين إلى اليسار ..

ثم الhead وتضمن ال title

كود HTML:

<head> <title>جداول 2</title> </head>

ومن ثم ال body مع تحديد لون الخلفية :

كود HTML:

<body bgcolor="#C0CFEF">

ثم وضعت معرّف ال br اعطيت به فاصل من اعلى الصفحة حتى لايكون الجدول ملتصق على الحافة العلوية للصفحة .. ثم أعطيت أمر التوسط للجدول قبل أن ابدأ به " اي اني اريد الجدول في منتصف الصفحة فإشارة التوسط هذه ستحيط بكامل جدولي :

كود HTML:

<div align="center">

ثم ابتدأنا بإنشاء الجدول بإعطاء امر ال table وحددنا له ال border وهو الحد الخارجي للجدول اعطيناه القيمة 2 وايضا حددت له العرض اي المساحة التي سيشغلها الجدول في الصفحة وحددت القيمة في ال البكسل وهي 400px:

كود HTML:

<table border="2" width="400px">

ثم بدأت برسم اول سطر في الجدول باستدعاء المعرّف <tr>:

كود HTML:

<tr>

والان اريد تقسيم هذا السطر الى عدة خلايا اخترت تقسيمة الى ست خلايا فاستدعيت صاحب المهمة وهو المعرّف <td> وكتبته ست مرات متتالية :

كود HTML:

<td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td>

وكانت النتيجة انه قام بتقسيم السطر الى ست خلايا واخترت طبعا ان اكتب كل بداية معرف ونهاية على سطر حتى استطيع تمييز ان اردت المراجعة في شيء ولا تختلط علي الامور .. فكما قلنا سابقا ان لغة ال html لا تعترف بالمساحات الفارغة التي تتركها داخل المستند وانما تعترف بالشيفرة فقط وتقوم بتنفيذها .. طبعا تلاحظ اني اضفت الكيان الرمزي   الذي يعطيني فاصلة احب هذا الكيان واستعمله كثيرا فهو يساعدني في كثير من الاحيان ..

ثم اغلقت وسم ال <tr> معلنة انتهاء السطر الاول :

كود HTML:

</tr>

ثم ابتدأت برسم السطر الثاني مبتدأة بالمعرّ ف <tr> وايضا قسمته الى ست خانات كما في السطر الاول :

كود HTML:

<tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr>

وهكذا دواليك في جميع الاسطر .
حاول ان تصمم جدولا بنفسك بعدة اسطر وضع عدد الخانات في كل سطر يختلف عن الذي قبله وانظر النتيجة ..
اذا الان في هذا الشرح المبسط تعلمنا اكثر عن انشاء الجداول وقد تدربنا عليه معا اكثر الان سننتقل الى متعة تصميم الجداول بالالوان والايطارات والخلفيات وسندخل في معرّفات جديدة للجدول مهمة جدا جدا .

ملفي الشخصي · [ **09-20-2008** ]

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

كود HTML:

<html dir="rtl"> <head> <title>جدول3</title> </head> <body bgcolor="#C0C0C0"> <br><br><br> <div align="center"> <table border=2 bordercolor=red bordercolordark=#FFFF66 bordercolorlight=#00FF00 cellpadding=20px cellspacing=10px> <tr> <th bgcolor="#F9A800">column1</th> <th bgcolor="#E4CAFF">column2</th> <th bgcolor="#FFFF66">column3</th> <th bgcolor="#B7FFE2">column4</th> </tr> <tr> <td bgcolor="#FFE1A4">  </td> <td bgcolor="#FFE1A4">  </td> <td bgcolor="#FFE1A4">  </td> <td bgcolor="#FFE1A4">  </td> </tr> </table> </div> </body> </html>

ستظهر لك الصفحة التالية :
http://www.freewebtown.com/jordan_am/yasminah7.htm

في الفقرة التالية سأعود لشرح هذا التمرين ان شاء الله وتفصيل المعرّفات الجديدة .

ملفي الشخصي · [ **09-20-2008** ]

تمام التمام ,, ونحن بانتظار المزيد عن الجداول ,,

واتمنى ممن يريد اتقان الجداول ان لا يمر مرور الكرام

وان ينتبه لكل صغيرة وكبيرة هي ليست بتلك الصعوبة

وانما تحتاج الى دقة ,,

لك

ملفي الشخصي · [ **09-21-2008** ]

لا داعي للتعب فقط على موقع

http://www.googlepages.com

يمكنك من تصميم المواقع بدون html او فرنت بيج

مثل موقعي ****************************

والذي حذف من الادارة و لا اعرف ما السبب ؟؟؟؟

الادارة : يمنع وضع الروابط الخاصة والتي تحتوي مواضيع مشابهة لمحتويات موقع ومنتدى طقس الاردن

ملفي الشخصي · [ **09-22-2008** ]

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

ملفي الشخصي · [ **09-22-2008** ]

بسم الله الرحمن الرحيم ..
الاخ معتصم اهلا بك ... نعم هي تحتاج الى دقة وتكون نتائجها مذهلة ..
اهلا بك مجددا اخي الكريم ..
نعود الان لشرح الخطة السابقة بالتفصيل ..
لاحظ معي شكل الجدول الذي قمنا بتصميمه هنا ولاحظ انه جدول متباعد الاعمدة والخلايا ..
حسنا لو كنت معتاد على تصميم الجداول على سبيل المثال في الفرونت بيج واردت ان تنشأ جدول كهذا او تقسيم في صفحة متباعدة الاعمدة كهذه كيف لك ان تقوم بهذا التقسيم ان كنت لا تنظر الى التعليمات البرمجية للصفحة ؟؟ الامر سيكون غاية في الصعوبة ..
الذي قمت به اضافة بعض اوامر لترويسة الجدول تنطبق على كامل الجدول الذي اريد تصميمه داخل وسم معرّف <table> .. اي بمعنى اخر تحديد الستايل بشكل عام للجدول

كود HTML:

<table border=2 bordercolor=red bordercolordark=#FFFF66 bordercolorlight=#00FF00 cellpadding=20px cellspacing=10px bgcolor=#FFFFFF>

اولا قمنا بتحديد حجم قيمة ال border اي الحدود الخارجية او ايطار الجدول اردته بعرض 2 .. border=2
وطبعا اذا اردت ان يظهر التأثير على ال border فيجب ان تكون قيمته على الاقل رقم 1 فما فوق .. هذا طبعا لانك اذا اردت اخفاء حدود الجدول تكتب القيمة صفر داخل ال border فتختفي جميع حدود الجدول ولا تظهر عند عرض صفحتك على المتصفح .. :

ثم bordercolor=red تحدد لون الحدود الخارجية لكامل الجدول واعطبناها هنا اللون الاحمر .. يجب تحديد السمة border بالقيمة واحد او اكثر حتى تكون السمة bordercolor فعالة ... ويتم التعرف على هذه السمة ضمن مستعرض الانترنت فقط .

ثم حددنا سمة bordercolordark وهي تحدد لون الحدود اليميني السفلي للجدول منشئة بذلك تأثير ثلاثي الابعاد .. ويجب ايضا تحديد سمة ال border بالقيمة واحد او اكثر حتى تكون السمة bordercolordark فعالة ويتم ايضا التعرف عليها ضمن مستعرض الانترنت فقط .. حددتها انا هنا بقيمة اللون #FFFF66 وهو من مشتقات اللون الازرق .

ثم السمة bordercolorlight تحدد لون الحدود اليسرى العليا للجدول ، منشئة بذلك تأثير ثلاثي الابعاد ويجب ايضا تحديد السمة border بالقيمة واحد فما فوق حتى يتم التعرف على هذه السمة . حددتها هنا بقيمة اللون #00FF00 وهو لون من مشتقات اللون الاخضر .

ثم السمة cellpadding وهي تحدد مساحة الخلية مقدرة بعناصر الصورة اي بالبكسل pixels ويشار اليها بالرمز px .. اعطيتها هنا قيمة cellpadding=20px عشرين بكسل ..
حتى تتعلم جيدا على هذه السمة قم بالتجربة في متصفحك بحيث تلغي قيمة cellpadding واجعل قيمتها صفر وانظر الى النتيجة في متصفحك .. ستجد ان الجدول تحول الى جدول صغير جدا متلاصق الخلايا .. او زد في القيمة ستجد ان الخلايا كبرت اكثر وقفا للقيمة التي تضعها .

ثم السمة cellspacingوهي تحدد المساحة المحصورة بين الخلايا والاعمدة مقدرة ايضا بعناصر الصورة اي بالبكسل .. وهنا جعلتها بقيمة 10px .. فلو جعلنا قيمتها صفر مثلا لوجدنا الجدول تحول الى جدول عادي متلاصق الاعمدة والخلايا ولكن يبقى حجم الخلية كما هو اي كما حدتته في cellpadding السابقة .. قم ايضا بالتجربة في متصفحك حتى تتعرف على هذه السمة اكثر .

مازال لنا وقفة مع سمات عديدة وجديدة في ال border وتنسيق الجدول وانا افضل ان نتعلمها جميعا لاننا سنحتاجها فيما بعد في ملفات الستايل ان شاء الله .. في كل تمرين نعود بجديد .

الان لننتقل الى اضافة جديدة ايضا استعملناها في الجدول السابق وهي معرّف <th> :

كود HTML:

<tr> <th bgcolor="#F9A800">column1</th> <th bgcolor="#E4CAFF">column2</th> <th bgcolor="#FFFF66">column3</th> <th bgcolor="#B7FFE2">column4</th> </tr>

فبعد ان حددت المعرّف <tr> للسطر الاول من الجدول قمت باستبدال معرّف ال <td> الذي مر معنا سابقا بمعرّف جديد وهو <th> كما تلاحظ .. لاحظ ايضا اني اضفته فقط لخلايا السطر الاول من الجدول ثم في السطر الثاني عدت للمعرّف <td> ..
ال <th> هو تماما كمعرّف ال <td> يقوم برسم خلايا السطر ومحتويات الجدول .. ولكن ال <th> هي ستقوم بتشكيل الترويسات لجدولك لاحظ الكلمات في السطر الاول خرجت في المتصفح بشكل بارز والى المنتصف وبخط سميك .. من غير ان نستعمل ايا من تنسيق الخطوط فقط استعملنا المعرّف <th> وهو من يقوم بهذا العمل .. اذا هو يختص بعناوين الترويسة لجدولك ..
قم بالتجربة بأن تكتب كلمات في خلايا السطر الثاني والذي تركته لك فارغا حتى تعرف الفرق بين المعرّفين .. ستظهر لك الكتابة كلمات عادية جدا خالية من اي تنسيق .
ولاحظ ايضا في هذا التمرين اني قمت بتلوين كل خلية .. هي فقط باضافة عنصر bgcolor الى كل واحدة منها على حدة ..

كود HTML:

<th bgcolor="#F9A800">column1</th>

كود HTML:

<td bgcolor="#FFE1A4">  </td>

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

ملفي الشخصي · [ **09-22-2008** ]

اقتباس: المشاركة الأصلية كتبت بواسطة yasminah

الاخ ناصراهلا بك ..
المواقع التي تقدم ديزاين جاهز لموقعك كثيرة ومنذ اختراع شيء اسمه شبكة عنكبوتية ليس بجديد ..
الديزاين الذي يقدمه لك الموقع هو من تصميم اشخاص ولم يأتي من الهواء .. والاشخاص هؤلاء درسوا تصميم المواقع وقدموها مجانا لاشخاص لايرغبون بالتعلم وليس لديهم مزاج للتعلم .. ولكننا نحن هنا في هذه الفقرة نقدم ما نعلمه للاشخاص المحبين لهذا العلم .. والذي يفنون فيه سنوات دراسة .. حتى جاءماجاء اليك في الموقع المجاني ...

و لكنه يوفر الجهد و التعب بالاضافة الى انه يمكن نسخ كود html جاهز و بدون تعب بحيث يكون الكود مناسب

ملفي الشخصي · [ **09-23-2008** ]

الاخ ناصر اهلا بك مرة اخرى ..

الان لنتابع مع متعة الجداول .. واضافة بعض السمات الجديدة في الوسم <table> وكما قلت انه يهمني ان نتعلم كل ما يتعلق بالجداول وال border لعدة اسباب اولا لا ارغب ان ترى مع الايام اي سمة تشعر انها غريبة وانها لم تمر عليك لذلك احاول ادراج اكبر قدر مستطاع منها ومن ثم قلنا اننا نريد ان نتعرف على كل ذرات الجداول ان شاء الله .. ومن ثم هذه السمات ستحتاج اليها في تصميم موقعك مستقبلا ان شاء الله وسيعود اغلبها معنا في ملفات الانماط فيما بعد ..

سنعود الى نفس التمرين السابق ونضيف اليه بعض السمات الجديدة .. افتح مستند التمرين السابق ظلل كود وسم ترويسة ال <table> فقط وضع هذا الكود الجديد بلا منها :

كود HTML:

<table border=2 bordercolor=red bordercolordark=#FFFF66 bordercolorlight=#00FF00 cellpadding=20px cellspacing=10px bgcolor=#FFFFFF cols=4 frame=void>

تلاحظ اننا اضفنا ثلاث سمات جديدة هنا وهي على التوالي :
السمة التي اصبحت معروفة لديك bgcolor وهي خلفية الجدول بشكل عام واخترت لها القيمة #FFFFFF اللون الابيض حتى تظهر معي التعديلات القادمة .

ثم اضفت السمة cols وحددتها بقيمة 4 :

كود HTML:

cols=4

cols تعرف عدد الاعمدة في الجدول بشكل صريح ومسبق ويسمح تحديد هذه القيمة في ترويسة الجدول بأن يتم جلب الجدول بشكل اسرع وذلك لان المتصفح لن يحتاج الى قراءة كامل الجدول ليعرف حجمه . وطبعا في التمرين السابق كما ترى عدد الاعمدة هو اربعة .

ثم اضفنا السمة frame واعطيناها القيمة void :

كود HTML:

frame=void

السمة frame هي تمثل الحدود في الاتجهات الاربعة للجدول تسمح لك بالتحكم بالحد الخارجي للجدول باخفاء بعض اجزائه واظهار بعضها ولها عدة قيم اخترنا في البداية القيمة void تفيد بانه لايوجد حدود للجدول الخارجي قم بعمل ريفريش لمتصفحك حتى ترى النتيجة ستظهر كهذه :
http://www.freewebtown.com/jordan_am/yasminah8.htm

لاحظ معي اختفت الحدود الخارجية للجدول .
لنقم الان بتبديل القيمة void الى القيمة above هكذا :

كود HTML:

frame=above

قم بعمل ريفريش على متصفحك لترى النتيجة وتأثير قيمة ال above على جدولك ستظهر النتيجة كهذه :

http://www.freewebtown.com/jordan_am/yasminah9.htm

ظهر الحد العلوي للجدول فقط اذا القيمة above مهمتها اظهار الحد العلوي للجدول .

ايضا لنغير القيمة الى below :

كود HTML:

frame=below

قم بعمل ريفريش لمتصفحك ستظهر لك النتيجة كهذه :

http://www.freewebtown.com/jordan_am/yasminah10.htm

اختفت كل الحدود وظهر لي الحد الادنى فقط .
ايضا لنغير القيمة الى vSides:

كود HTML:

frame=vSides

اعمل ريفريش لمتصفحك لترى النتيجة ظهور الحدود اليمنى واليسرى للجدول واختفاء الباقي ..
لنسرد الان القيم وعمل كل واحدة منها وعليك ان تقوم باستبدالهم في مستندك وترى النتيجة :
القيمة hSides الحد الاعلى والادنى فقط .
القيمة vSides الحدود اليمنى واليسرى فقط .
القيمة lhs الحد الايسر فقط .
القيمة rhs الحد الايمن فقط .
القيمة box الحدود في الجهات الاربع .
القيمة border الحدود في الجهات الاربع مثل box وهي القيمة الافتراضية .
القيمة void لا يوجد حدود .
القيمة above الحد الاعلى فقط .
القيمة below الحد الادنى فقط .
قم بتجربتها جميعا وحفظها جيدا.

الان سنضيف سمة جديدة في كود ال table وهي rules :
قم فقط بتغيير ترويسة الجدول <table> واضف هذا الكود بدلا منه :

كود HTML:

<table border=2 bordercolor=red bordercolordark=#FFFF66 bordercolorlight=#00FF00 cellpadding=20px cellspacing=10px bgcolor=#FFFFFF cols=4 frame=box rules=none>

اضفنا الان عنصر جديد في نهاية الكود كما ترى وهو rules ان كانت frame السابقة تتحكم في حدود الجدول الخارجية فإن rules عملها هو التحكم في القواعد الداخلية لخلايا الجدول بحيث تشير الى جزء الحد المراد عرضه في الخلايا الداخلية تبعا للقيمة التي تضعها ،، انا هنا وضعت لها القيمة none :

كود HTML:

rules=none

عند عمل ريفريش لمتصفحك ستجد ان حدود الخلايا الداخلية اصبح كهذا :
http://www.freewebtown.com/jordan_am/yasminah11.htm

لاحظ ان ظهور الحدود للخلايا الداخلية اختلف واختفى ..
فالقيمة none المضافة الى السمة rules تعني لا حدود داخلية .
قم بتجربة القيم التالية بمستندك ومن ثم اعرضها بمتصفحك بعمل ريفريش حتى ترى التغيير وتعرف عمل كل قيمة منها :
القيمة none تعني لاحدود داخلية كما راينا .
القيمة rows يتم عرض حدود افقية .

كود HTML:

rules=rows

القيمة cols يتم عرض حدود راسية .
القيمة all يتم عرض جميع الحدود .
في النهاية اتمنى ان يكون الشرح كافي .. وقد اوصلت المعلومة بكل يسر وسهولة ..
وحتى ننتقل الى فقرة جديدة لكم مني اطيب التحايات .

الاخبــــار
إضافة خبر