THE Professional
الدرس الثامن في HTML : الجداول (2) 613623
عزيزي الزائر / عزيزتي الزائرة يرجي التكرم بتسجبل الدخول اذا كنت عضو معنا
او التسجيل ان لم تكن عضو وترغب في الانضمام الي اسرة المنتدي
سنتشرف بتسجيلك
شكرا الدرس الثامن في HTML : الجداول (2) Screen
ادارة منتدي THE Professional الدرس الثامن في HTML : الجداول (2) Screen
THE Professional
الدرس الثامن في HTML : الجداول (2) 613623
عزيزي الزائر / عزيزتي الزائرة يرجي التكرم بتسجبل الدخول اذا كنت عضو معنا
او التسجيل ان لم تكن عضو وترغب في الانضمام الي اسرة المنتدي
سنتشرف بتسجيلك
شكرا الدرس الثامن في HTML : الجداول (2) Screen
ادارة منتدي THE Professional الدرس الثامن في HTML : الجداول (2) Screen
THE Professional
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.


 
الرئيسيةأحدث الصورالدرس الثامن في HTML : الجداول (2) Ez8fzالتسجيلدخول


 
  
 




   
       
       
   
   
       

       
   

       
       
   

       
 

         
       




     



  •    
       
        تذكرني؟   




       
 





                     

أقسام المساعدة
منتدى المحترف يدعم : 

قسم المساعدة

مع التحية -- الإدارة :
المواضيع الأكثر نشاطاً
بحث عن كيفية
أسئلة دينية مدهشة !! رائعة و أجوبتها
تحميل Camtasia Studio 8
كيف يمكنك انشاء موقع جديد احترافي !!
كيفية تغيير لون الفيس بوك !!
نكت جزائرية تاع ضحك
الأخلاق في الاسلام
موقع جوجل لاختصار الروابط
طريقة معرفة عمر حاسوبك
تحميل لعبة GTA Vice City !!
المواضيع الأخيرة
» الابداع العربي فخر المنتديات العربيه ( تصميمك مجانا )www.ibda3araby.com
الدرس الثامن في HTML : الجداول (2) Emptyالسبت مارس 14 2015, 17:43 من طرف انا حر

» تقنية جديدة خاصة بالصور الشخصية
الدرس الثامن في HTML : الجداول (2) Emptyالأربعاء مارس 12 2014, 19:08 من طرف Admin

» خبر : مدونة المحترف للإعلاميــات
الدرس الثامن في HTML : الجداول (2) Emptyالإثنين فبراير 17 2014, 15:04 من طرف Admin

»  شعيب عليه السلام
الدرس الثامن في HTML : الجداول (2) Emptyالإثنين فبراير 17 2014, 14:56 من طرف Admin

» احاديث نبويــ شريفة ـــة
الدرس الثامن في HTML : الجداول (2) Emptyالإثنين فبراير 17 2014, 14:54 من طرف Admin

» قصة سيدنا لوط عليه السلام (فيديو)
الدرس الثامن في HTML : الجداول (2) Emptyالإثنين فبراير 17 2014, 14:54 من طرف Admin

» عصا سيدنا موسى (فيديو)
الدرس الثامن في HTML : الجداول (2) Emptyالإثنين فبراير 17 2014, 14:53 من طرف Admin

» كيف اقتبس مقطع من فيديو ؟؟؟؟؟؟
الدرس الثامن في HTML : الجداول (2) Emptyالإثنين فبراير 17 2014, 14:53 من طرف Admin

» موضوع هام
الدرس الثامن في HTML : الجداول (2) Emptyالإثنين فبراير 17 2014, 14:52 من طرف Admin

المواضيع الأكثر شعبية
شعيب عليه السلام
أجمل صور البحار في العالم §!
صور بي ام دابليو روعة BMW M6
تحضير نص الكتاب الالكتروني
تحميل لعبة GTA Vice City !!
تحضير وحدة المخدرات للسنة الثانية متوسط
نكت جزائرية تاع ضحك
أسئلة دينية مدهشة !! رائعة و أجوبتها
كيف يمكنك انشاء موقع جديد احترافي !!
الأخلاق في الاسلام
أفضل 10 فاتحي مواضيع
Admin
الدرس الثامن في HTML : الجداول (2) Vote_rcapالدرس الثامن في HTML : الجداول (2) Voting_barالدرس الثامن في HTML : الجداول (2) Vote_lcap 
Youssef Madrid
الدرس الثامن في HTML : الجداول (2) Vote_rcapالدرس الثامن في HTML : الجداول (2) Voting_barالدرس الثامن في HTML : الجداول (2) Vote_lcap 
Karima
الدرس الثامن في HTML : الجداول (2) Vote_rcapالدرس الثامن في HTML : الجداول (2) Voting_barالدرس الثامن في HTML : الجداول (2) Vote_lcap 
adda
الدرس الثامن في HTML : الجداول (2) Vote_rcapالدرس الثامن في HTML : الجداول (2) Voting_barالدرس الثامن في HTML : الجداول (2) Vote_lcap 
سر الجزائر
الدرس الثامن في HTML : الجداول (2) Vote_rcapالدرس الثامن في HTML : الجداول (2) Voting_barالدرس الثامن في HTML : الجداول (2) Vote_lcap 
Mohamed Ali
الدرس الثامن في HTML : الجداول (2) Vote_rcapالدرس الثامن في HTML : الجداول (2) Voting_barالدرس الثامن في HTML : الجداول (2) Vote_lcap 
Amine Madridi
الدرس الثامن في HTML : الجداول (2) Vote_rcapالدرس الثامن في HTML : الجداول (2) Voting_barالدرس الثامن في HTML : الجداول (2) Vote_lcap 
dentistemen
الدرس الثامن في HTML : الجداول (2) Vote_rcapالدرس الثامن في HTML : الجداول (2) Voting_barالدرس الثامن في HTML : الجداول (2) Vote_lcap 
younes chetouane
الدرس الثامن في HTML : الجداول (2) Vote_rcapالدرس الثامن في HTML : الجداول (2) Voting_barالدرس الثامن في HTML : الجداول (2) Vote_lcap 
hadile
الدرس الثامن في HTML : الجداول (2) Vote_rcapالدرس الثامن في HTML : الجداول (2) Voting_barالدرس الثامن في HTML : الجداول (2) Vote_lcap 







 

 الدرس الثامن في HTML : الجداول (2)

اذهب الى الأسفل 
كاتب الموضوعرسالة
Admin
Admin
Admin


الدرس الثامن في HTML : الجداول (2) Dz10
عدد المساهمات : 189
نقاط التميز : 19560
السٌّمعَة : 3
تاريخ التسجيل : 11/01/2014
العمر : 32
الموقع : https://theprofessional.forumalgerie.net

الدرس الثامن في HTML : الجداول (2) Empty
مُساهمةموضوع: الدرس الثامن في HTML : الجداول (2)   الدرس الثامن في HTML : الجداول (2) Emptyالجمعة يناير 24 2014, 14:01

أهلاً وسهلاً بك إلى الدرس الثامن من دروس HTML. نتابع معاً في هذا الدرس الحديث عن الجداول. وأنا أفترض أنك قد أنهيت الدرس السابق بنجاح، وأن لديك الآن فكرة جيدة جداً عن الجداول وكيفية إنشائها والتعامل مع خصائصها ومع الصفوف وخصائصها. ونكمل الآن من حيث توقفنا، أي مع خصائص الخلايا.
هل تذكر ما قلناه عن عدد الخلايا في الصف الواحد؟ إن عدد الخلايا المطلوب يتحدد من خلال كتابة الوسوم <TD> ... <‎/TD> مرات بنفس العدد المطلوب. ومن الممكن أن تحتوي الخلية على أي عنصر من عناصر لغة HTML : نصوص، رسوم، قوائم، وصلات تشعبية، بل وحتى جداول. (نعم، تستطيع إدراج جدول داخل جدول آخر)
 
لنسترجع معا المثال الذي قمنا بالتدرب عليه في الدرس السابق، فسوف نكمل هذا الدرس معه. وهو جدول صغير مكون من ثلاثة صفوف وعمودين (أي خليتين في كل صف).
<TABLE>
اقتباس :

<TR>

اقتباس :

<TD> Data <‎/TD>
<TD> Data <‎/TD>

<‎/TR>

<TR>

اقتباس :

<TD> Data <‎/TD>
<TD> Data <‎/TD>

<‎/TR>

<TR>

اقتباس :

<TD> Data <‎/TD>
<TD> Data <‎/TD>

<‎/TR>
<‎/TABLE>
 
أما الخصائص المستخدمة مع الخلايا، فهذا جدول بها:
ALIGN
تحدد محاذاة النص الموجود في الخلية أفقياً، والقيم المستخدمة هي Left, Center, Right
VALIGN
تحدد المحاذاة العمودية للنص، وهو يأخذ القيم Top, Middle, Bottom, Baseline
WIDTH
تحدد عرض الخلية، وذلك بكتابة القيمة المباشرة للعرض المطلوب بالبيكسل، أو بكتابة رقم يمثل النسبة المئوية. ويكفي تحديد العرض للخلايا في أحد الصفوف لكي يتم تطبيقه على كل الخلايا في كل الصفوف.
HEIGHT
تحدد الإرتفاع المطلوب للخلية في الصف، وذلك بالطرق المباشرة أو النسبية. وقيامك بتحديد ارتفاع إحدى الخلايا في الصف يؤدي إلى تطبيقه على كل الخلايا فيه.
BGCOLOR
تحدد لون خلفية الخلية
COLSPAN
يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها أفقياً
‎<TD COLSPAN="n">‎
حيث n هو عدد الخلايا التي سيتم دمجها
ROWSPAN
يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها عمودياً (أي أسفلها).
‎<TD ROWSPAN="n">‎
وبالطبع n هو عدد الخلايا التي سيتم دمجها

 
وقبل أن نستمر، يبدو لي أن هناك بعض الملاحظات المهمة التي ينبغي ذكرها:

  • كما تلاحظ هناك خصائص تتكرر مع جميع الوسوم. خذ مثلاً الخاصية BGCOLOR. كيف يتم التعامل معها إذا كررت مع جميع الوسوم؟ بكل بساطة يتم تطبيق اللون المحدد مع وسم الخلية، فإذا لم يكن محدداً يطبق اللون المحدد مع وسم الصف، فإذا لم يوجد يطبق اللون المحدد مع وسم الجدول. وإذا لم يكن هذا محدداً بدوره يتم إعتماد لون خلفية الصفحة المحدد في الوسم <BODY>.


  • الملاحظة الثانية تتعلق بالخصائص WIDTH, HEIGHT. يختلف أسلوب التعامل مع هذه الخصائص من متصفح لآخر، بل وتختلف أيضاً طريقة تفسير القيم المحددة معها وخصوصاً فيما يتعلق بالنسب المئوية. (راجع الموضوع: الوسوم الخاصة والمتصفحات ).
    وبدون الخوض في تفاصيل هذه الإختلافات التي لن تؤدي إلا إلى المزيد من الإشكالات لديك... وبعد التجربة يبدو أن أفضل طريقة للتعامل مع هذه الخصائص هي قيامك بتحديد العرض (وكذلك الإرتفاع إذا أردت ذلك) للجدول ككل من خلال الوسم <TABLE>. ثم استخدام هذه الخصائص في وسوم الخلايا وتحديد العرض المطلوب لكل خلية على حده في الصف الأول، والارتفاع المطلوب لكل صف في الجدول.
    وهذه برأيي أفضل طريقة تضمن بها أفضل مشاهدة للجدول لجميع زوار موقعك.


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

    <TABLE BORDER="5">

    اقتباس :

    <TR>

    اقتباس :

    <TD> Data <‎/TD>

    <‎/TR>

    <TR>

    اقتباس :

    <TD> Data <‎/TD>
    <TD> Data <‎/TD>

    <‎/TR>

    <TR>

    اقتباس :

    <TD> Data <‎/TD>

    <‎/TR>

    <‎/TABLE>


    لأن هذا ما ستحصل عليه:
    Data
    DataData
    Data

    لقد بقي مكان الخلايا المحذوفة محجوزاً كما لو أنها لم تحذف. أما الخلايا الباقية فظلت محتفظة بنفس خصائصها، أي أننا لم نستفد من عملية الحذف. والحقيقة أن الطريقة المثلى لذلك هي أن تقوم بدمج الخلايا معاً وذلك باستخدام الخصائص COLSPAN, ROWSPAN.






إذن لنقم بإعادة كتابة شيفرة الجدول مع استخدام هذه الخصائص:
‎<TABLE BORDER="5">‎
اقتباس :

<TR>

اقتباس :

<TD COLSPAN="2"> Data <‎/TD>

<‎/TR>

<TR>

اقتباس :

<TD> Data <‎/TD>
<TD> Data <‎/TD>

<‎/TR>

<TR>

اقتباس :

<TD COLSPAN="2"> Data <‎/TD>

<‎/TR>
<‎/TABLE>
Data
DataData
Data

لاحظ أن العدد 2 هو عدد الخلايا التي قمنا بدمجها. ولاحظ أيضاً انني لم أقم بإعادة وسوم الخلايا المحذوفة لأننا أصلاً لا نحتاج لها بعد أن قمنا بالدمج. وكقاعدة أساسية: كل خلية يتم دمجها يجب بالمقابل حذف وسوم التعريف الخاصة بها. ما عدا تعريف الخلية الأساسية بالطبع.
مثال آخر: لنقم بدمج الخلايا الموجودة في العمود الأول
‎<TABLE BORDER="5">‎
اقتباس :

<TR>

اقتباس :

<TD ROWSPAN="3"> Data <‎/TD>
<TD> Data <‎/TD>

<‎/TR>

<TR>

اقتباس :

<TD> Data <‎/TD>

<‎/TR>

<TR>

اقتباس :

<TD> Data <‎/TD>

<‎/TR>
<‎/TABLE>
ومرة أخرى بعد تعريف خاصية الدمج العمودي، قمت بحذف تعريف الخلايا المدموجة من الصف الثاني والثالث. وهذا هو الجدول الناتج.
DataData
Data
Data




هناك نوع خاص من الخلايا التي يتم تعريفها باستخدام الوسوم <TH> ... <‎/TH> وهي اختصار Table Header أي ترويسة الجدول.
والفرق الوحيد بينها وبين <TD> ... <‎/TD> هو أن النص الذي تحتويه يظهر بخط أسود عريض ومحاذاته في منتصف الخلية بصورة إفتراضية. (ليس بالشيء المهم، كما أعتقد)، خاصة وأن الخصائص المستخدمة معها هي نفس خصائص <TD> وبنفس التفاصيل التي ذكرت.



الوسوم الأخيرة المستخدمة في الجداول هي <CAPTION> ... <‎/CAPTION> وهي تختص بإضافة عنوان رئيسي للجدول ككل. لذلك فهي عندما تكتب يتم وضعها مباشرة بعد الوسم <TABLE> وبصورة مستقلة وليس ضمن وسوم الصفوف أو الخلايا.
‎<TABLE BORDER="5">‎
    <CAPTION> Table Caption <‎/CAPTION>
اقتباس :

<TR>

اقتباس :

<TD> Data <‎/TD>
<TD> Data <‎/TD>

<‎/TR>

<TR>

اقتباس :

<TD> Data <‎/TD>
<TD> Data <‎/TD>

<‎/TR>

<TR>

اقتباس :

<TD> Data <‎/TD>
<TD> Data <‎/TD>

<‎/TR>
<‎/TABLE>
Table Caption
DataData
DataData
DataData
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://theprofessional.forumalgerie.net
 
الدرس الثامن في HTML : الجداول (2)
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» الدرس السابع في HTML : الجداول (1)
» الدرس الثامن عشر في HTML : وسوم META ومحركات البحث
» الدرس التاسع في HTML : الإطارات (1)
» الدرس العاشر في HTML : الإطارات (2)
» الدرس الحادي عشر في HTML : الإطارات (3)

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
THE Professional :: .•:*¨`*:•. ][ شروحـآت ][.•:*¨`*:•. :: لغات البرمجة HTML-
انتقل الى: