التخطي إلى المحتوى
شرح دورة الـ HTML للمبتدئين – الدرس الثامن
 الجداول بغه الــhtmlوسنتعلم فى  هذا الدرس كيفيه عمل “الجداول” و أستخدامها في صفحات الويب .
 الجداول مخصصة لعرض البيانات مجدولة …

ولنبدأ بتعريف بسيط للوسوم الخاصه  بالجداول  وتكون كالتالى:-

 وهذا بمعنى انه لتعريف جدول داخل الصفحة نستخدم الوسم <table>
و لاضافة صف داخل الجدول نستخدم الوسم <tr>
و لاضافة خلية داخل الصف نستخدم الوسم <td>

وبعد هذا  يتوضح ان الصف تابع للجدول و الخلية تابعة للصف و يمكنك انشاء جدول متعدد الصفوف و الحلايا
مثال:-

<table>
 <tr>
<td>خلية 1</td>
<td>خلية 2</td>
 </tr>
 <tr>
<td>خلية 3</td>
<td>خلية 4</td>
 </tr>
</table>
وستظهر  فى  التطبيق كالتالى :-

 

فالخلية 1و الخلية 2 تشكلان صفاً، خلية 1 وخلية 3    تشكلان عموداً ,,,,,,,,,,,
هناك خصائص للجداول ، هناك مثلاً خاصية الإطار التي تستخدم لتحديد سمك الإطار حول الجدول:-

 
 <"table border="1>
   <tr>
  <td>خلية 1</td>
  <td>خلية 2</td>
   </tr>
   <tr>
  <td>خلية 3</td>
  <td>خلية 4</td>
   </tr>
 </table>
 
ومن الخواص الاخرى :_
align:- يحدد المحاذاه لمحتويات الجدول او الصف او فى الخليه‘فمثلا يمكن محاذاه النص الى اليمين او اليسار او المنتصف
<td align="right" valign="top"> Cell </td>
 وايضا هناك خاصيتان هما 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>

وستظهر كالتالى فى التطبيق:-

 

عن الكاتب

التعليقات

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Shares