الدرس الحادي عشر: المزيد حول الجداول دورة html

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

الدرس الحادي عشر: المزيد حول الجداول دورة html

مُساهمة من طرف Omar Mohamed في 2011-07-27, 1:05 pm

الدرس الحادي عشر: المزيد حول الجداول


عنوان الدرس "المزيد حول الجداول" يبدو مملاً بعض الشيء، لكن أنظر
للجانب الإيجابي، إذا تمكنت من إتقان إنشاء الجداول فلن يكون هناك أي شيء
في HTML لن تستطيع معرفته واستخدامه.



ماذا بقي إذاً؟


خاصيتان هما colspan وrowspan تستخدمان لإنشاء جداول رائعة ومتقنة.

Colspan هي اختصار "column span"، Colspan تستخدم في الوسم <td> لتحدد عدد الأعمدة التي ستتمدد لها الخلية:


مثال 1:




<table border="1">
<tr>
<td colspan="3">Cell 1</td>
</tr>
<tr>
<td>خلية 2</td>
<td>خلية 3</td>
<td>خلية 4</td>
</tr>
</table>





سيظهر بهذا الشكل في متصفحك



خلية 1
خلية 2 خلية 3 خلية 4



بتحديد colspan بالقيمة "3" قامت الخلية في الصف الأول بالتمدد لثلاثة أعمدة، ولو قمنا بوضع "2" لقيمة colspan ستتمدد لعمودين اثنين، وسيتعين علينا إضافة خلية أخرى للصف الأول حتى تصبح الأعمدة متساوية


مثال 2:




<table border="1">
<tr>
<td colspan="2">خلية 1</td>
<td>خلية 2</td>
</tr>
<tr>
<td>خلية 3</td>
<td>خلية 4</td>
<td>خلية 5</td>
</tr>
</table>





سيظهر بهذا الشكل في متصفحك



خلية 1 خلية 2
خلية 3 خلية 4 خلية 5



ما هي خاصية rowspan؟


كما ربما خمنت، rowspan تحدد عدد الصفوف التي ستقوم الخلية بالتمدد فوقها:


مثال 3:




<table border="1">
<tr>
<td rowspan="3">خلية 1</td>
<td>خلية 2</td>
</tr>
<tr>
<td>خلية 3</td>
</tr>
<tr>
<td>خلية 4</td>
</tr>
</table>





سيظهر بهذا الشكل في متصفحك



خلية 1 خلية 2
خلية 3
خلية 4



في المثال أعلاه أعطينا الخاصية rowspan القيمة "3"
للخلية 1، هذا يعني أن الخلية يجب أن تتمدد فوق ثلاث صفوف، الصف الذي تقع
فيه الخلية مع صفين آخرين أسفلها، الخلية 1 والخلية2 التان تقعان في نفس
الصف، بينما الخلية 3 والخلية أربع تشكلان صفين منفصلين.



هل تشعر بالحيرة؟ حسناً، الأمر ليس معقداً لكن من السهل أن تضيع في
التفاصيل في بعض الأحيان، لذلك من الأفضل أن ترسم الجدول أولاً على الورق
قبل أن تطبقه على HTML.



ربما لا تشعر بالحيرة، إذا قم بإنشاء جدولين واستخدام كل من colspan وrowspan بنفسك.



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


Omar Mohamed

عدد المساهمات 1578
نقاط التميز 7478
علم الدولة مصر
مزاجى مبسوط
عارضه احترام الموقع 100%
الجنس ذكر
تاريخ التسجيل 05/03/2010

معاينة صفحة البيانات الشخصي للعضو http://elmasryy.123.st

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: الدرس الحادي عشر: المزيد حول الجداول دورة html

مُساهمة من طرف medo elmasryy في 2011-08-05, 9:41 pm

جميييييييييييييييييييييل جدا شكرا لك

علي المجهود الروعة والموضوع المفيد




medo elmasryy

عدد المساهمات 211
نقاط التميز 231
علم الدولة مصر
مزاجى غير معروف
عارضه احترام الموقع 100%
الجنس ذكر
تاريخ التسجيل 05/08/2011

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: الدرس الحادي عشر: المزيد حول الجداول دورة html

مُساهمة من طرف Omar Mohamed في 2011-08-27, 5:50 pm




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


Omar Mohamed

عدد المساهمات 1578
نقاط التميز 7478
علم الدولة مصر
مزاجى مبسوط
عارضه احترام الموقع 100%
الجنس ذكر
تاريخ التسجيل 05/03/2010

معاينة صفحة البيانات الشخصي للعضو http://elmasryy.123.st

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى