إنشاء الجداول فى لغة html الجزء الأول

بعض صفحات الويب قد تحتاج إلى إنشاء جدول نضع فيه أنواع معينة من البيانات مثل المنتج وسعره وبلد التصنيع وغير ذلك من البيانات التى يستحسن تنظيمها داخل جدول.
لإنشاء جدول فى لغة html نحتاج إلى وسم الجدول <table> وبعد انتهاء عمل الجدول نقوم بإغلاق الجدول

</table>

• والجدول مقسم إلى صفوف rows  ولإنشاء داخل الجدول نحتاج إلى وسم <tr>  
• كل صف يحتوى على عدد من بيانات الجدول <table data     <td 

مثال:

<table>

     <tr>

          <td>name</td>

          <td>address</td>

     </tr>

     <tr>

          <td>khalid</td>

          <td> giza</td>

     </tr>

     <tr>

          <td>ali</td>

          <td>cairo</td>

     </tr>

</table>

ناتج المثال

نلاحظ أنه قد تم عمل جدول ولكن بدون إطار ويمكن إضافة الإطار كخاصية للجدول كالتالي:-

<table border="1px">

وناتج الجدول بعد إضافة الإطار كالتالي:-

يفضل عمل الإطار من خلال css  ويمكن التحكم فى عرض الجدول من خلال  الخاصية widthوذلك كالآتي:-

<style>

     table,td{

     border:1px solid black;

     width:50%

     }

 </style>

ناتج المثال كالتالي:-

نلاحظ ان خاصية width عن طريقها يمكن جعل عرض الجدول بنسبة 100 % من عرض الصفحة أو غير ذلك .