حب الى الابد
الجداول XHTML Tables Fxbgnt11
حب الى الابد
الجداول XHTML Tables Fxbgnt11
حب الى الابد
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

حب الى الابد

والله نورتِ المنتدي من جديد يـ{زائر}.

 
الرئيسيةالتسجيلأحدث الصوردخول

ادارة المنتدي: اهـلا ومرحــبا بك معنا نورتنا بزيارتك الجميلة وزودت شوقنا ولهفتنا ع مشاركاتك ومواضيعك اذا كانت هذه هية زيارتك الاولي فيتوجب عليك التسجيل لتكون عضو معنا وتتمتع بكل مميزات العضوية المجانية  (اضغط هنا للتسجيل) اما اذا كنت قمت بالتسجيل مسبقا فيتوجب عليك الدخول بكتابة اسمك والرقم السري.  شكرا.ً


 

 الجداول XHTML Tables

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

™المدير العـام™
™المدير العـام™
medo


عدد مساهماتى : 5740
انا ذكر
مزاجي : الحمدلله
انا من : مصر
احترامك لقوانين المنتدي :
الجداول XHTML Tables Left_bar_bleue100 / 100100 / 100الجداول XHTML Tables Right_bar_bleue

نشاطك فى المنتدي :
الجداول XHTML Tables Left_bar_bleue100 / 100100 / 100الجداول XHTML Tables Right_bar_bleue

عدد نقاط التميز : 9968
عدد التقيمات : 15
تاريخ التسجيل : 17/08/2007
وسام1 : الجداول XHTML Tables Deign_11
وسام2 : الجداول XHTML Tables Sl2vbo
وسام3 : الجداول XHTML Tables 3h210
وسام4 : الجداول XHTML Tables Q1q0-710
توقيع المنتدي : توقيع المنتدي

الجداول XHTML Tables Empty
مُساهمةموضوع: الجداول XHTML Tables   الجداول XHTML Tables I_icon_minitime15.05.09 11:07

:g:4:
:sleep:

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


اولا معنى كلمة جدول ببساطة.

هى عبارة عن صفوف, وحقول, وخلاية.

وايضا يمكن اضافة مايعرف بإسم table headers او رؤوس الجدول


رؤوس الجدول ليست الا مجرد خلاية داخل الصفوف, يتم جعل الخط بها عريض, ومحازى للوسط.
انظر المثال التالى فهو يحتوى على ثلاث صفوف فارغة

كود:

الكود:


[table align=center]
[tr][/tr]
[tr][/tr]
[tr][/tr]
[/table]




ما رأيكم بأن نضيف حقلين لكل صف؟

كود:

الكود:


[table align=center]
[tr]
رأس الجدول 1
رأس الجدول 2
[/tr]
[tr]
[td]حقل أ[/td]
[td]حقل ب[/td]
[/tr]
[tr]
[td]حقل د[/td]
[td]حقل ه[/td]
[/tr]
[/table]




قبل الدخول فى امور اخرى هناك اشياء يجب توضيحها

وان شاء الله الصورة التالية توضحها.

الجداول XHTML Tables Tables

بعد ان تستوعب ماهو موضح بالصورة تابع التالى.

فى بعض الأحيان لا نريد نفس العدد من الخلاية لكل صف.

مثلا الصف الأول به ثلاث خلاية, ونريد الصف الثانى فقط ان يكون به خليتين.

كيف يتم ذلك؟

هذا يسمى دمج الخلاية او Merging Cells

ويتم الأمر عن طريق الخاصية colspan التى يتم اضافتها لأحد الصفوف.

انظر الكود التالى كإجابة على السؤال الذى طرحناه.
(الكود التالى لتوضيح دمج الخلاية بالنسبة للصفوف)

كود:

الكود:


[table align=center]
[tr]
[td]خلية 1[/td]
[td]خلية 2[/td]
[td]خلية 3[/td]
[/tr]
[tr]
[td]خلية 1[/td]
[td colSpan=2]خلية 2 و 3 معا![/td]
[/tr]
[tr]
[td]خلية 1[/td]
[td]خلية 2[/td]
[td]خلية 3[/td]
[/tr]
[tr]
[td colSpan=3]خلية 1 و 2 و 3 معا![/td]
[/tr]
[/table]




عاين الكود الأخير بنفسك.

ولنلقى نظرة صغيرة على اختلاف قيمة الخاصية colspan فى الصف الثانى والرابع.

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

وفى الصف الرابع حددنا قيمتها 3 لأننا نريد جعل الخلية تساوى 3 خلاية.

اتمنى تكون الصورة اصبحت واضحة الأن.


اذن ماذا عن دمج الخلاية بالنسبة للحقول؟

بمعنى اخر, ماذا اذا اردنا ان نجعل احد الحقول يحتوى على خليتين فقط, فى حين ان كل حقل اخر يحتوى على 3 خلاية؟

بنفس الطريقة التى تم شرحها فى المثال الأخير لكن بإستخدام الخاصية rowspan

كالمثال التالى مثلا

كود:

الكود:


[table align=center border=1]
[tr]
[td rowSpan=2]خلية 1[/td]
[td]خلية 2[/td]
[td rowSpan=4]خلية 3[/td]
[/tr]
[tr]
[td]خلية 2[/td]
[/tr]
[tr]
[td]خلية 1[/td]
[td]خلية 2[/td]
[/tr]
[tr]
[td]خلية 1[/td]
[td]خلية 2[/td]
[/tr]
[/table]


هذا كان بالنسبة للحقول والصفوف والخلاية الخاصة بالجدول.

يمكنك ايضا تقسيم الجدول الى منطقة رأس Table Header
ومنطقة النهاية (زيل الجدول) Table Footer
ومنطقة جسد الجدول Table Body

كالتالى كامثال (اقرأ التعليقات داخل الكود)



كود:

الكود:


[table align=center]


[tr]
[td]رأس الجدول 1[/td]
[td]رأس الجدول 2[/td]
[td]رأس الجدول 3[/td]
[/tr]



[tr]
[td]زيل الجدول 1[/td]
[td]زيل الجدول 2[/td]
[td]زيل الجدول 3[/td]
[/tr]



[tr]
[td]محتوى الجدول 1[/td]
[td]محتوى الجدول 2[/td]
[td]محتوى الجدول 3[/td]
[/tr]

[/table]





اتمنى يكون الدرس بسيط واتضحت كل جوانبه.

واراكم بالدرس المقبل على خير بإذن الله.

الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://WwW.Lov4ever.yoo7.com
 
الجداول XHTML Tables
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» خاتمة دورتين الـ XHTML و الـ CSS
» تعلم الـ XHTML من الصفر
» اساسيات بناء صفحة XHTML
» دورة كاملة من الالف الى الياء فى لغة xhtml والشرح صوت وصورة
» الجداول الإلكترونية Excel ( دوره متكامله)

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
حب الى الابد :: .::{الركن التعليمي}::. :: حب الى الابد للدورات التعليمة ا love forever to instruction sessions :: دورة XHTML-
انتقل الى:  
عفواً يمنع النسخ للزوار
المواضيع الأخيرة
» مطوية (فَلَنُنَبِّئَنَّ الَّذِينَ كَفَرُوا بِمَا عَمِلُوا وَلَنُذِيقَنَّهُمْ مِنْ عَذَابٍ
الجداول XHTML Tables I_icon_minitime27.05.17 12:19 من طرف عزمي ابراهيم عزيز

» مطوية (مَنْ أَرْضَى اللَّهَ بِسَخَطِ النَّاسِ كَفَاهُ اللَّهُ النَّاسَ)
الجداول XHTML Tables I_icon_minitime03.05.17 10:24 من طرف عزمي ابراهيم عزيز

» مطوية (إِنَّ الْإِنْسَانَ لَفِي خُسْرٍ)
الجداول XHTML Tables I_icon_minitime08.04.17 20:52 من طرف عزمي ابراهيم عزيز

» مطوية (وَأَوْفُوا بِعَهْدِ اللَّهِ إِذَا عَاهَدْتُمْ)
الجداول XHTML Tables I_icon_minitime07.04.17 8:14 من طرف عزمي ابراهيم عزيز

» مطوية (لاَ تَسُبُّوا الأَمْوَاتَ)
الجداول XHTML Tables I_icon_minitime03.04.17 17:15 من طرف عزمي ابراهيم عزيز

» مطوية (وَجَعَلَ مِنْهَا زَوْجَهَا لِيَسْكُنَ إِلَيْهَا)
الجداول XHTML Tables I_icon_minitime31.03.17 9:30 من طرف عزمي ابراهيم عزيز

» مطوية (لَيْسَ مِنَّا مَنْ لَمْ يَرْحَمْ صَغِيرَنَا ويُوَقِّرْ كَبِيرَنَا)
الجداول XHTML Tables I_icon_minitime27.03.17 20:51 من طرف عزمي ابراهيم عزيز

» مطوية (وَلِيَبْتَلِيَ اللَّهُ مَا فِي صُدُورِكُمْ وَلِيُمَحِّصَ مَا فِي قُلُوبِكُمْ)
الجداول XHTML Tables I_icon_minitime24.03.17 14:37 من طرف عزمي ابراهيم عزيز

» مطوية (لا تَحْلِفُوا بِآبَائِكُمْ مَنْ حَلَفَ بِاللَّهِ فَلْيَصْدُقْ)
الجداول XHTML Tables I_icon_minitime17.03.17 14:54 من طرف عزمي ابراهيم عزيز

» مطوية (اتَّخَذُوا أَحْبَارَهُمْ وَرُهْبَانَهُمْ أَرْبَاباً مِنْ دُونِ اللَّهِ)
الجداول XHTML Tables I_icon_minitime13.03.17 16:04 من طرف عزمي ابراهيم عزيز

» مطوية (اللَّهُمَّ اسْتُرْ عَوَرَاتِنَا وَآمِنْ رَوَعَاتِنَا)
الجداول XHTML Tables I_icon_minitime10.03.17 8:19 من طرف عزمي ابراهيم عزيز

» مطوية (اللَّهُمَّ اسْتُرْ عَوَرَاتِنَا وَآمِنْ رَوَعَاتِنَا)
الجداول XHTML Tables I_icon_minitime10.03.17 8:18 من طرف عزمي ابراهيم عزيز

»  اذكار المسلم اليومية ، جميع اذكار المسلم اليومية ، كل اذكار المسلم اليومية
الجداول XHTML Tables I_icon_minitime28.09.13 13:27 من طرف @الجوكر@

» دورة كاملة من الالف الى الياء فى الاكسل والشرح صوت وصورة
الجداول XHTML Tables I_icon_minitime25.08.13 16:53 من طرف هشام العيسى

» حكم المباراة يقتل بسبب بطاقة صفرا
الجداول XHTML Tables I_icon_minitime11.05.13 12:45 من طرف @الجوكر@

» أسوأ 10 توقعات لم تحدث فى 2012
الجداول XHTML Tables I_icon_minitime10.05.13 17:01 من طرف @الجوكر@

» دعااااااااااااااااااء لو عرفتو معناااااااااااااااااه عمركو ماهتبطلو تقروة فى حياتكم
الجداول XHTML Tables I_icon_minitime10.05.13 16:03 من طرف @الجوكر@

» شوارع مصر بعد تنحى الرئيس حسنى مبارك " بالصور "
الجداول XHTML Tables I_icon_minitime10.05.13 15:33 من طرف @الجوكر@

» دروه كامله فى البور بوينت 2003 شرح مفصل من الالف الى الياء
الجداول XHTML Tables I_icon_minitime09.05.13 15:47 من طرف @الجوكر@

» الأستعمال الصحيح للماء ساعد جدا جدا فى أنقاص الوزن
الجداول XHTML Tables I_icon_minitime08.05.13 20:38 من طرف @الجوكر@

Hosted By : Ahla montada
Design & Managed By : Medo
افضل عرض للمنتدي اختار اعدادات الشاشة
1024X 768 pixels
تنبيه جميع المشاركات والمواضيع في  منتديات حب الى الابد  لا تعبر بالضرورة عن رأي إدارتها بل تمثل وجهة نظر كاتبها فقط .
by Mohamed Ebrahim © 2006-2013 by Lov4ever