الجداول (html)

بنكلنتون · 09-29-2007, 06:11 مساءً

السلام عليكم ورحمه الله وبركاته

نبدأ الدرس

بسم الله الرحمن الرحيم

طبعا الجداول من اهم الحاجات الموجوده فى لغه ال html

وكل المواقع تقريبا موجود فيها جداول

طيب واحنا فى اخر الدوره فى امتحان تصميم صفحه ويب

وعشان صفحتك تكون تمام

لازم تضع فيها جداول

ماشى ندخل فى المفيد

التعامل مع الجداول سهل مثلها مثل اى امر فى اللغه

المهم وسوم الجداول 3 وسوم لا رابع لها

اولهم الوسم الاتى

<TABLE>............................<‎/TABLE>

وهو وسم تعريف الجدول ومهم طبعا

طيب الوسم الثانى

<TR>................<‎/TR>

طبعا احنا عارفين ان اى جدول يتكون من صفوف

ده بأه وسم تعريف الصف اللى فى الجدول

<TD> ...................<‎/TD>

اللى فات ده وسم تعريف اجزاء صف الجدول(الخلايا)

تعرف بخلايا الجدول

طيب ببساطه وبلا لف ولا دوران

كيف اقوم بانشاء الجدول؟؟

طبعا اول شىء نكتب الوسم الاول

وهو وسم تعريف الجدول

<TABLE> ... <‎/TABLE> طيب كم عدد صفوف الجدول هنفترض انهم 2 صف نعمل ايه؟؟ نكتب وسم تعريف الصف بعدد الصفوف كالاتى <TR> ... <‎/TR><TR> ... <‎/TR> طيب كم عدد خلايا الصف مثلا كل صف يتكون من 3 خلايا وطبعا الوسم ده يكتب بين وسم تعريف الصف لانه جزء منه كالات <TABLE>

<TR>
<TD> البند الاول<‎/TD>
<TD> البند الثانى<‎/TD>
<TD> البند الثالث<‎/TD>
<‎/TR>

<TR>
<TD> 50 <‎/TD>
<TD> 60<‎/TD>
<TD> 70 <‎/TD>
<‎/TR>

<‎/TABLE>
طبعا يتضح من البيانات السابقه انه هذه اكواد جدول مكون من صفين والصف مكون من 3 خلايا

وهذا هو الجدول فقط ولكن دون خطوط له

طيب عاوزين خطوط فى خصائص كثيره لها نستخدمها مع وسم تعريف الجدول اللى

هو <TABLE> ... <‎/TABLE> وسوف اقوم بشرح اهمها هنا

اولا الخاصيه BORDER

هذا الخاصيه تحدد سمك حدود الجدول طيب لو ما عملناهاش بتكون 0 اى لا حدود كالاتى
‎<TABLE BORDER="3">‎ هذا مثال عادى
‎<TABLE BORDER="0">‎ هذه هى القيمه الافتراضيه حيث لا حدود

ثانيا الخاصيه HEIGHT

من الاسم واضح انها بتحدد طول الجدول بالبيسكل
‎<TABLE HEIGHT="150">‎

وممكن نحدد انسبه الارتفع بالنسبه للمتصفح كالاتى

‎<TABLE HEIGHT="90%">‎

ثالثا الخاصيه
WIDTH

تحدد عرض الجدول

وسهل طريقه هى الاتى

‎<TABLE WIDTH="600">‎

وتوجد طريق اخرى لتحديد نسبه العرض بالنسبه للنافذه

اللى يحبها يطلب فى الاستفسارات بس انا مش هضعها هنا

CELLSPACINGالخاصيه الرابعه
لتحديد المسافه بين الخلايا
كالاتى

‎<TABLE CELLSP

ACING="10">‎

BGCOLORرابعا الخاصيه

تستخدم لتحديد لون خلفيه الجدول

كالاتى

‎<TABLE BGCOLOR="#00FFFF">‎

خامسا الخاصيه

ALIGN

ووظيفتها تحديد المحاذاه

ومرت علينا قبل كذا

يعنى يمين والاه شمال

‎<TABLE ALIGN="Left">‎ده شمال
ALIGN="Right">‎ وده يمين

CELLPADDINGاخيرا الخاصيه

لتحديد حجم الهوامش
‎<TABLE CELLPADDING="10">‎

طيب هذه هى الخصائص المستخدمه مع وسم تعريف الجدول

ندخل على وسم تعريف الصف

طبعا وسم الصف

<TR> ... <‎/TR>

نستخدم معه الخاصيه

ALIGN

وشرحناها وطبعا القيمه الافتراضيه هى سنتر

يعنى فى الوسط

والخاصيه
BGCOLOR

شرحناها فوق

وهذى لو عاوزين لكل صف لون نضعها معه بنفس الكود السابق

طيب ندخل على وسوم الخلايا

وهى كتير

وانا مليت

راح اشرحها وامرى لله

اولا الخاصيه
ALIGN

شرحناها

WIDTHثانيا الخاصيه

شرحناها

HEIGHTثالثا الخاصيه

شرحناها

BGCOLORرابعا الخاصيه

شرحناها ودى لو عاوز لكل خليه لون يعنى لو فاضى ورايق

خامسا الخاصيه
COLSPAN

وهذى لدمج مجموعه خلايا

يعنى عاوز اكتب شىء ومش مكفيه خليه واحده فادمج مجموعه خلايا

عشان اعرف اكتب فى الوسع

وكودها

‎<TD COLSPAN="n">‎

وطبعا
N
هو عدد الخلايا التى سيتم دمجها

سادسا الخاصيه
VALIGN

وهذى لتحديد المحاذاه

وطبعا اكوادها

TOP لاعلى

MIDDLE للوسط

BOTTOM للقاع

واخيرا
ROWSPAN

لدمج الخلايا لكن عموديا وليس افقيا

راجع الشرح الافقى وانت تفهم

وبس انتهى

طبعا لاحظنا تكرار الاوسمه كتير

يعنى اللون مثلا

مع الجدول الون الجدول كله لون واحد

مع الصف كل صف يختص بلونه

مع الخلايا كل خليه لها لون

وانهينا الدرس
وبانتظار التطبيقات ان شاء الله

تحياتى لكم

اخوكم

ADMIN · 09-29-2007, 06:17 مساءً

مشكور وبارك الله فيك اخوي

بنكلنتون · 10-01-2007, 02:41 مساءً

اشكرك اخى على المرور

سهاف · 10-03-2007, 11:08 مساءً

تسلم بنكلتون ..
درسك رووووووووووعه و أسلوب شرحك أسهل ..
شكرا لك ..
بإنتظار جديدك..

سهاف · 10-04-2007, 01:59 صباحاً

و هذا تطبيق سريع ..
لا تدقق ..
دروس في بي سكربت دروس صفحات الأنماط الانسيابية دروس XML دروس صفحات الأنماط الانسيابية دروس FoxPro دروس قواعد بيانات دروس اتش تي أم أل دروس MySQL دروس دريم ويفر دروس سكيول

دروس في بي سكربت دروس صفحات الأنماط الانسيابية دروس XML دروس صفحات الأنماط الانسيابية دروس FoxPro دروس قواعد بيانات دروس اتش تي أم أل دروس MySQL دروس دريم ويفر دروس سكيول

بنكلنتون · 10-09-2007, 09:03 مساءً

حياك سهاف

تطيقك جميل

بس هل هو html

والاه فوتو شوب خخخخخخخخخخخخ

ابن الرافدين · 10-26-2007, 08:02 مساءً

جزاك الله الف خير

09-29-2007, 06:11 مساءً	#1 (permalink)
بنكلنتون عضو نشيط تاريخ التسجيل: Oct 2006 المشاركات: 128 معدل تقييم المستوى: 21	الجداول (html) السلام عليكم ورحمه الله وبركاته نبدأ الدرس بسم الله الرحمن الرحيم طبعا الجداول من اهم الحاجات الموجوده فى لغه ال html وكل المواقع تقريبا موجود فيها جداول طيب واحنا فى اخر الدوره فى امتحان تصميم صفحه ويب وعشان صفحتك تكون تمام لازم تضع فيها جداول ماشى ندخل فى المفيد التعامل مع الجداول سهل مثلها مثل اى امر فى اللغه المهم وسوم الجداول 3 وسوم لا رابع لها اولهم الوسم الاتى <TABLE>............................<‎/TABLE> وهو وسم تعريف الجدول ومهم طبعا طيب الوسم الثانى <TR>................<‎/TR> طبعا احنا عارفين ان اى جدول يتكون من صفوف ده بأه وسم تعريف الصف اللى فى الجدول <TD> ...................<‎/TD> اللى فات ده وسم تعريف اجزاء صف الجدول(الخلايا) تعرف بخلايا الجدول طيب ببساطه وبلا لف ولا دوران كيف اقوم بانشاء الجدول؟؟ طبعا اول شىء نكتب الوسم الاول وهو وسم تعريف الجدول <TABLE> ... <‎/TABLE> طيب كم عدد صفوف الجدول هنفترض انهم 2 صف نعمل ايه؟؟ نكتب وسم تعريف الصف بعدد الصفوف كالاتى <TR> ... <‎/TR><TR> ... <‎/TR> طيب كم عدد خلايا الصف مثلا كل صف يتكون من 3 خلايا وطبعا الوسم ده يكتب بين وسم تعريف الصف لانه جزء منه كالات <TABLE> <TR> <TD> البند الاول<‎/TD> <TD> البند الثانى<‎/TD> <TD> البند الثالث<‎/TD> <‎/TR> <TR> <TD> 50 <‎/TD> <TD> 60<‎/TD> <TD> 70 <‎/TD> <‎/TR> <‎/TABLE> طبعا يتضح من البيانات السابقه انه هذه اكواد جدول مكون من صفين والصف مكون من 3 خلايا وهذا هو الجدول فقط ولكن دون خطوط له طيب عاوزين خطوط فى خصائص كثيره لها نستخدمها مع وسم تعريف الجدول اللى هو <TABLE> ... <‎/TABLE> وسوف اقوم بشرح اهمها هنا اولا الخاصيه BORDER هذا الخاصيه تحدد سمك حدود الجدول طيب لو ما عملناهاش بتكون 0 اى لا حدود كالاتى ‎<TABLE BORDER="3">‎ هذا مثال عادى ‎<TABLE BORDER="0">‎ هذه هى القيمه الافتراضيه حيث لا حدود ثانيا الخاصيه HEIGHT من الاسم واضح انها بتحدد طول الجدول بالبيسكل ‎<TABLE HEIGHT="150">‎ وممكن نحدد انسبه الارتفع بالنسبه للمتصفح كالاتى ‎<TABLE HEIGHT="90%">‎ ثالثا الخاصيه WIDTH تحدد عرض الجدول وسهل طريقه هى الاتى ‎<TABLE WIDTH="600">‎ وتوجد طريق اخرى لتحديد نسبه العرض بالنسبه للنافذه اللى يحبها يطلب فى الاستفسارات بس انا مش هضعها هنا CELLSPACINGالخاصيه الرابعه لتحديد المسافه بين الخلايا كالاتى ‎<TABLE CELLSP ACING="10">‎ BGCOLORرابعا الخاصيه تستخدم لتحديد لون خلفيه الجدول كالاتى ‎<TABLE BGCOLOR="#00FFFF">‎ خامسا الخاصيه ALIGN ووظيفتها تحديد المحاذاه ومرت علينا قبل كذا يعنى يمين والاه شمال ‎<TABLE ALIGN="Left">‎ده شمال ALIGN="Right">‎ وده يمين CELLPADDINGاخيرا الخاصيه لتحديد حجم الهوامش ‎<TABLE CELLPADDING="10">‎ طيب هذه هى الخصائص المستخدمه مع وسم تعريف الجدول ندخل على وسم تعريف الصف طبعا وسم الصف <TR> ... <‎/TR> نستخدم معه الخاصيه ALIGN وشرحناها وطبعا القيمه الافتراضيه هى سنتر يعنى فى الوسط والخاصيه BGCOLOR شرحناها فوق وهذى لو عاوزين لكل صف لون نضعها معه بنفس الكود السابق طيب ندخل على وسوم الخلايا وهى كتير وانا مليت راح اشرحها وامرى لله اولا الخاصيه ALIGN شرحناها WIDTHثانيا الخاصيه شرحناها HEIGHTثالثا الخاصيه شرحناها BGCOLORرابعا الخاصيه شرحناها ودى لو عاوز لكل خليه لون يعنى لو فاضى ورايق خامسا الخاصيه COLSPAN وهذى لدمج مجموعه خلايا يعنى عاوز اكتب شىء ومش مكفيه خليه واحده فادمج مجموعه خلايا عشان اعرف اكتب فى الوسع وكودها ‎<TD COLSPAN="n">‎ وطبعا N هو عدد الخلايا التى سيتم دمجها سادسا الخاصيه VALIGN وهذى لتحديد المحاذاه وطبعا اكوادها TOP لاعلى MIDDLE للوسط BOTTOM للقاع واخيرا ROWSPAN لدمج الخلايا لكن عموديا وليس افقيا راجع الشرح الافقى وانت تفهم وبس انتهى طبعا لاحظنا تكرار الاوسمه كتير يعنى اللون مثلا مع الجدول الون الجدول كله لون واحد مع الصف كل صف يختص بلونه مع الخلايا كل خليه لها لون وانهينا الدرس وبانتظار التطبيقات ان شاء الله تحياتى لكم اخوكم من مواضيع بنكلنتون في المنتدى 'طلب هاك الترقيه مشكله بسيطه مشكله فى منتدايا عدنا بالهندسة العكسية .... للجادين فقط <a rel="nofollow" href="http://www.dartmediakuwait.com/adclick.php?n=a85a316d" target="_new"><img src="http://www.dartmediakuwait.com/adview.php?what=zone:107&source=MP3Q8&n=a85a316d" border="0" alt=""></a>

09-29-2007, 06:17 مساءً	#2 (permalink)
ADMIN .::+: Gulf Son :+::. تاريخ التسجيل: May 2005 الدولة: بلاد الخليج المشاركات: 45,666 معدل تقييم المستوى: 53	رد: الجداول (html) مشكور وبارك الله فيك اخوي من مواضيع ADMIN في المنتدى درس طريقة إدراج مقطع فيديو في مشروع العمل عن طريق الخامة Cinema 4D درس رسم حدقة العين [Hack] مراسلة الاعضاء باللغة Html من لوحة التحكم برنامج تحريك اسمك على شاشة جوالك روبي في المدرسة __________________ دليل مواقع ابن الخليج خدمة google page rank مقدمه من ابن الخليج خدمه اختصار الروابط الآن تستطيع جلب كل ستايلات المنتدى للمجلة ومن غير اي تدخل شخصي منك فقط بـ 120 ريال اطلب منتج بالضغط هنا "من هارون أمير المؤمنين إلى نقفور كلب الروم، قد قرأت كتابك يا ابن الكافرة، والجواب ما تراه دون أن تسمعه، والسلام" اين نحن من هذه الرساله؟

10-01-2007, 02:41 مساءً	#3 (permalink)
بنكلنتون عضو نشيط تاريخ التسجيل: Oct 2006 المشاركات: 128 معدل تقييم المستوى: 21	رد: الجداول (html) اشكرك اخى على المرور من مواضيع بنكلنتون في المنتدى طلب استايل كيف تصبح مبرمجا محترفا ؟ ادخل يا مبتدىء مطلوب مشرفين ومراقبين مشكله بسيطه البرمجة كيفية كتابتها و شرح كيفية استخدام الفيجول بيسك

10-03-2007, 11:08 مساءً	#4 (permalink)
سهاف :: مشرف :: :: قسم البرمجة :: تاريخ التسجيل: Jul 2007 المشاركات: 395 معدل تقييم المستوى: 190	رد: الجداول (html) تسلم بنكلتون .. درسك رووووووووووعه و أسلوب شرحك أسهل .. شكرا لك .. بإنتظار جديدك.. من مواضيع سهاف في المنتدى اكتب تجربتك وانجازك.. اصحابي ما انساهم .. كيف نربط برنامج الفلاش بقواعد بيانات php و mysql أبنائكم يتشاجرون ؟ ... إليكم الحل كذبة على نفسي كذبة

10-04-2007, 01:59 صباحاً	#5 (permalink)
سهاف :: مشرف :: :: قسم البرمجة :: تاريخ التسجيل: Jul 2007 المشاركات: 395 معدل تقييم المستوى: 190	رد: الجداول (html) و هذا تطبيق سريع .. لا تدقق .. من مواضيع سهاف في المنتدى أبنائكم يتشاجرون ؟ ... إليكم الحل ماذا سوف تقررلو كنت مكاني ؟؟ إختاروا انتم عنوانه تعال أنت حاكم ومسؤووووووول..لنتحاكم هل سألعب هذه الادوار كثيرا ..

الجداول (html)

منتديات شبكة ابن الخليج

اكثر الكلمات بحثاً

	Sitemap \| Archive \| Tag Could
	$موقع ولد الامارات - ينتهي الاعلان بتاريخ 20\8\2008$

		$شبكة مدينة الحب - ينتهي الإعلان بتاريخ 19\8\2008$
	$شبكة مملكتي - ينتهي الإعلان بتاريخ 8\8\2008$	$ملتقى الدعوة الاسلامي - ينتهي الإعلان بتاريخ 6\8\2008$

10-09-2007, 09:03 مساءً	#6 (permalink)
بنكلنتون عضو نشيط تاريخ التسجيل: Oct 2006 المشاركات: 128 معدل تقييم المستوى: 21	رد: الجداول (html) حياك سهاف تطيقك جميل بس هل هو html والاه فوتو شوب خخخخخخخخخخخخ من مواضيع بنكلنتون في المنتدى مشكله بالقروبات كيف اضيف موقعى لمحرك البحث جوجل؟؟ عدنا بالهندسة العكسية .... للجادين فقط مشكله فى منتدايا كيف تصبح مبرمجا محترفا ؟ ادخل يا مبتدىء

10-26-2007, 08:02 مساءً	#7 (permalink)
ابن الرافدين اسرة ابن الخليج تاريخ التسجيل: Oct 2006 الدولة: بلاد الرافدين المشاركات: 5,071 معدل تقييم المستوى: 1520	رد: الجداول (html) جزاك الله الف خير من مواضيع ابن الرافدين في المنتدى جديد لأسترجاع الملفات المحذوفة حتى بعد فورمات Search and Recover™ 4 برنامج الفوتوشوب الغني عن التعريف ... الإصدار السابع مفتاح للكاسبر سكاي لغاية عام 2008 Diskeeper 2007 Professional Premier Edition v11.0 Build 686 Retail **لولا الحـــــــــــــــب** __________________ . شكرا شوشو عاشت الايادي الطيبه ماتقصرين فيكي كل كل الخير

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

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

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
تاريخ الـ Html	ADMIN	دروس برمجة مواقع	4	01-12-2008 03:05 صباحاً
هل تواجهك مشكلة في تحديث صفحات الـ html .. هنا الحل	همـ المشاعر ــس	سكربتات وادوات تطوير المواقع	9	09-04-2007 02:08 صباحاً
الطريق إلى تصاميم خالية من الجداول	ADMIN	دروس برمجة مواقع	7	08-18-2007 02:30 صباحاً
[product]إضافة الجداول في المواضيع والمشاركات[محدث]	كرم العربي	هاكات وشروحات vBulletin 3.[6-5].X	8	05-26-2007 08:49 مساءً
ادوات لاصحاب المواقع	ADMIN	سكربتات وادوات تطوير المواقع	5	04-17-2006 09:51 صباحاً