بحـث
المواضيع الأخيرة
أفضل 10 أعضاء في هذا الشهر
لا يوجد مستخدم |
دروس html --- الدرس الحادي عشر: المزيد حول الجداول
صفحة 1 من اصل 1
دروس html --- الدرس الحادي عشر: المزيد حول الجداول
عنوان الدرس "المزيد حول الجداول" يبدو مملاً بعض الشيء، لكن أنظر للجانب
الإيجابي، إذا تمكنت من إتقان إنشاء الجداول فلن يكون هناك أي شيء في 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 بنفسك.
dr_html-
عدد المساهمات : 65
نقاط : 26324
السٌّمعَة : 5
تاريخ الميلاد : 24/03/1980
تاريخ التسجيل : 20/01/2010
العمر : 44
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
2015-12-04, 12:30 من طرف المدير
» برنامج لجلب الشفرات من الإنترنت
2015-04-04, 18:50 من طرف GAUNE
» رسم لحداء الكات CAT
2014-08-29, 11:22 من طرف المدير
» حداء رياضي نيك NIKE
2014-08-29, 11:21 من طرف المدير
» رسم حداء رياضي إير ماكس nike air
2014-08-29, 11:18 من طرف المدير
» رسم لحداء أديداس متميز
2014-08-29, 11:18 من طرف المدير
» رسم حداء ماركة اديداس adidas
2014-08-29, 11:18 من طرف المدير
» رسم لحداء رياضي نيك دو لون نسائي
2014-08-29, 11:18 من طرف المدير
» الحداء الرياضي نيك nike
2014-08-29, 11:18 من طرف المدير