دورة تعليم HTML - الدرس التاسع الجداول 2

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

يتبقي اذآ في الجداول خاصيتان مهمتان جدآآ وهما ؟

خاصيتان هما 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 بنفسك.