السلام عليكم ورحمه الله
سوف نتناول الآن كيفيه عمل الجداول فى لغه الـ html
فى لغه html نقوم بإنشاء الصفوف المطلوبه للجدول وذلك عن طريق الوسم <tr>
كانت هذه محاوله بسيطه لتوضيح اساسيات استخدام لغه html لتصميم صفحات الإنترنت
وبإذن الله نبدأ من الشرح القادم فى استخدام css للتعديل على مظهر الصفحات التى قمنا بتصميمها فى الشروحات السابقه .. فإلى ذلك الحين ..
والسلام عليكم ورحمه الله وبركاته
سوف نتناول الآن كيفيه عمل الجداول فى لغه الـ html
نعرف جميعا ان الجدول يتكون من عده خلايا تشكل فى مجموعها صفوفا واعمده .
ونعرف ايضا ان كل عنصر يدرج فى صفحه html له التاج الذى يحدده .
فهل يمكنك ان تخمن ما هو التاج الخاص بإنشاء جدول ؟
نعم .. كما قد تكون توقعته إنه ببساطه شديده تاج <table> والتى تعنى بالعربيه جدول ..
هيا بنا نتعلم كيف نستخدمه ..
وكل صف نقوم بتحديد عدد الخلايا فيه عن طريق الوسم <td>
فتتكون الأعمده بالجدول بشكل تلقائى .. كما فى الشكل التالى :
ولذلك عند انشاء جدول نتبع التسلسل التالى :
جدول <table> ثم صف او اكثر <tr> ثم خليه او اكثر لكل صف <td>
وكل وسم فى نهايته كما تعلمنا وسم الإغلاق الخاص به
فيكون الشكل العام للكود كالتالى :
<table> فتح الجدول
<tr> ادراج صف
<td> ادراج خليه داخل الصف
</td> اغلاق كود الخليه
</tr> اغلاق كود الصف
</table> اغلاق الجدول
توجه الى برنامج notepad وقم بفتح صفحه كنت تعمل عليها من قبل او انشئ صفحه جديده كما تعلمنا من قبل
بين وسمى جسم الصفحه <body></body> قم بكتابه الكود التالى :
<table>اكتب هنا اى شئ .. اى نص تريد كتابته أو صوره او رابط كما تعلمنا فى الشرح السابق</table>
الآن احفظ الملف بالضغط على CTRL + S ولا تنسى ان يكون التشفير utf-8 اذا كانت اول مره تقوم بحفظه .. وشاهد النتيجه فى المتصفح..
هل توقعت هذه النتيجه ؟ الذى حدث اننا انشأنا جدول من خلال التاج <table> ولكننا لم نحدد اى صفوف او خلايا بداخل الجدول ولذلك قام المتصفح بشكل تلقائى بعمل خليه واحد يعرض فيها المحتوى المكتوب بين علامتى الفتح والإغلاق للجدول.
والسبب انك ربما لا ترى حدود الخليه اننا لم نحدد حجم معين لحد الخليه قام المتصفح بتحديد عرض تلقائى وهو 0
حسنا الآن قم بالتعديل على الكود السابق وتحديدا على تاج الفتح ليكون كالتالى :
<table border="5">
ثم احفظ وشاهد ..
الآن بدأت تتضح الصوره اليس كذلك ؟ ما قمنا بعمله هو تحديد عرض حدود الجدول لتكون 5 واذا قمت بالتعديل على هذا الرقم لأى رقم آخر سوف تشاهد ان عرض الحد للجدول يختلف حسب القيمه التى تحددها .
الآن لنعود الى الجدول
قلنا انه لإضافه صف جديد نستخدم التاج <tr>
قم بكتابه الكود التالى وشاهد نتيجته:
<table border="5">
<tr>
بسم الله الرحمن الرحيم
</tr>
</table>
هل حدث جديد ؟ بالطبع لا فنحن لم نحدد اى خلايا فى الجدول بعد وبالتالى يقوم المتصفح بعرض المحتويات فى خليه واحد .. إذن لنضع خلايا بداخل الصف ولتكن خليتان واحد سنكتب بها " هيا نتعلم " والثانيه نكتب بها " مبادئ تصميم المواقع "
سوف يكون الكود كالتالى :
<table border="4">
<tr>
<td>هيا نتعلم</td>
<td>مبادئ تصميم المواقع</td>
</tr> </table>
هكذا قمنا بعمل جدول بسيط يحتوى على صف واحد يحتوى على خليتين .
سوف نقوم الان بعمل جدول يحتوى على 3 صفوف وكل صف يحتوى على خليتين :
<table border="4">
<tr> الصف رقم 1
<td>هيا نتعلم</td>
<td>مبادئ تصميم المواقع</td>
</tr>
<tr> الصف رقم 2
<td>الخليه الأولى فى الصف الثانى</td>
<td>الخليه الثانيه فى الصف الثانى</td>
</tr>
<tr> الصف رقم 3
<td>الخليه الأولى فى الصف الثالث</td>
<td>الخليه الثانيه فى الصف الثالث</td>
</tr>
</table>
وبنفس الطريقه يمكن زياده عدد الصفوف فى الجدول وعدد الخلايا فى كل صف الى اى عدد نريد
تبقى لنا شئ اخير بخصوص الجداول وهو عرض الجدول ..
يمكن التحكم فى عرض الجدول الإجمالى عن طريق الرمز width وتعنى بالعربيه "العرض" وهو نفس الرمز الذى استخدمناه للتحكم فى عرض الصوره فى الشرح رقم 4
ويتم ذلك بطريقتين :
- تحديد عرض الجدول يدويا عن طريق ادخال قيمه محدده لعرض الجدول
- تحديد عرض الجدول كنسبه معينه من عرض الصفحه الإجمالى
الطريقه اليدويه :
<table border="3" width="300" >
<tr><td>أ</td> <td>ب</td> <td>ت</td> </tr>
<tr><td>ث</td> <td>ج</td> <td>ح</td> </tr>
</table>
هنا قمنا بتحديد العرض المطلوب للجدول بإدخال قيمه العرض
طريقه تحديد النسبه :
وهنا نقوم بتحديد نسبه معينه من اجمالى عرض الصفحه ككل - قد تكون فقط عشر عرض الصفحه فنحدد النسبه 10% او نصف عرض الصفحه بنسبه 50% او حتى جعل الجدول هو نفسه عرض الصفحه كاملا فتكون النسبه 100%
كالتالى :
<table border="3"
width="100%" >
<tr><td>محمد</td>
<td>مدحت</td>
<td>عادل</td>
</tr>
<tr><td>ادريس</td>
<td>بركات</td>
<td>ابراهيم</td>
</tr>
</table>
او لعرض الجدول بنصف عرض الصفحه يكون وسم الفتح للجدول :
<table border="3" width="50%" >
هذا ويمكن استخدام الرمزين الخاصين بالعرض والطول width و height
واللذان استخدمناهم قبل ذلك فى تحديد طول وعرض الصوره فى الشرح رقم 4
حيث يمكن استخدامهم مع وسوم الجداول : فتح الجدول <table> او فتح الصف <tr> أو الخليه <td>
وادعوك لتجربه كل ذلك بنفسك والتعلم من مشاهده النتيجه التى تظهر فى المتصفح ..
كانت هذه محاوله بسيطه لتوضيح اساسيات استخدام لغه html لتصميم صفحات الإنترنت
وبإذن الله نبدأ من الشرح القادم فى استخدام css للتعديل على مظهر الصفحات التى قمنا بتصميمها فى الشروحات السابقه .. فإلى ذلك الحين ..
والسلام عليكم ورحمه الله وبركاته
ليست هناك تعليقات:
إرسال تعليق