شرح دورة الـ 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>
 وستظهر كالتالى فى التطبيق:-




ونتابع المزيد فى الدرس التاسع