برمجةكورسات

تعلُّم لغة HTML – الدرس الخامس – الجداول

دروس بسيطة في لغة الويب HTML

(HTML7)  الجداول في HTML

إن كنت وصلت معنا إلى هذا الدّرس، فهذا يعني أنّك قد تجاوزت أهمّ المراحل في بناء صفحة ويب بواسطة لغة HTML، وبعد كلً ما أنجزناه في الدّروس السابقة؛ سوف نبدأ بتعلُّم الإضافات ذات المستوى الأعلى، ونبدأ اليوم من الجداول في HTML … تابعوا الدّرس وإيّاكم أن تُفوّتوا هذه الدروس بعد كل ما أنجزتموه.

تُنشَأ الجداول في HTML ضمن ال<body> و<body/>

  • لإنشاء الجداول في HTML يلزمُنا:

<table> </table> وهي الوسم الأصلي لإنشاء الهيكل، ثُمّ وداخله نبدأ بإنشاء السّطور والأعمدة ونستخدم في ذلك:

<tr> </tr> : لإنشاء سطر ضمن الجدول

<td> </td> : لإنشاء خليّة أو عمود ضمن السّطر

  • إضافة الخصائص على الجداول في HTML

إضافة إطار وتحديد عرضه: <table border=3>

تحديد عرض الجدول وطوله <TABLE WIDTH=” ” HEIGHT=” “>

المُحاذاة
‎<TABLE ALIGN=”Left”>‎
<“‎<TABLE ALIGN=”Right
<“TABLE ALIGN=” Center>

الألوان ‎<TABLE BGCOLOR=” “>‎

 

 

  •  إضافة خصائص لكل خلية أو عمود على حدى

تحديد عرض الجدول وطوله
<td/tr WIDTH=”” HEIGHT=””>
المحاذاة
‎<td/tr ALIGN=”Left”>‎
<td/tr ALIGN=”Right”>‎
<td/tr ALIGN=” Center”>
الألوان
‎<td/ tr BGCOLOR=””>‎

  • إضافة عنوان الجدول:

    ‎<TABLE>‎

<CAPTION> عنوان الجدول هُنا <CAPTION/>
‎</TABLE>‎

 

  • تطبيق للتوضيح:

سنُصمِّم  جدول برنامج المدرسة ليوم واحد،

الخطوات:

نفتح <table>
ولإنشاء السطر الأول (وهو سطر الحصص) نضع  <tr>
أما عن إنشاء الخانات في السطر (حصه أولى ……) نضع <td>
ثم نغلق الـ td ونغلق الـ tr ثم نغلق الـ table

التطبيق:

<html>
<body>
<table border=1>

<tr>
<td bgcolor= Pink > اليوم </td>
<td> الحصة الأولى </td>
<td> الحصة الثانية </td>
<td> الحصة الثالثة </td>
<td> الحصة الرابعة </td>
<td> الحصة الخامسة </td>
<td> الحصة السادسة </td>
</tr>

<tr >
<td bgcolor= Pink > الاحد </td>
<td> انكليزي </td>
<td> انكليزي </td>
<td> فيزياء </td>
<td> علوم </td>
<td> ديانة </td>
<td> كيمياء </td>
</tr>

</body>
</html>

  • الدمج بين الخلايا والسطور:


قد نحتاج أحياناَ إلى توحيد عمودين أو سطرين لأنهما يخدمان الأمر نفسه:

  1. COLSPAN: تستخدم لدمج الأعمدة
    ويتم الدمج بالطريقة التالية:
    نقوم بإنشاء خلية واحدة للخلايا المدموجة متجاهلين الخلايا الأخرى مهما كان عددها، ثم نكتب الخاصية  colspan، ونلحقها بعدد الخانات التي نريد دمجها، ثم نتابع عمل الجدول بإنشاء الخلايا  بعددها الأصلي،
    دعونا نضيف سطراً يدمج الخلايا السبع في جدولنا السابق:
    <td colspan=7><center> هذا البرنامج مؤقت </center> </td>
  2. Rowspan : تُستخدم لدمج الأسطر
    وتدمج الأعمدة بالطريقة السابقة ذاتها:
    نقوم بإنشاء سطر  واحد للخلايا المدموجة متجاهلين الأسطر  الأخرى مهما كان عددها، ثم نكتب الخاصية  Rowspan، ونلحقها بعدد الاعمدة التي نريد دمجها، ثم نتابع عمل الجدول بإنشاء الأسطر بعددها الأصلي.

 

تعلُّم لغة HTML – الدرس الخامس – الجداول

الجداول في HTML
الجداول في HTML، جدول معقد

 

الدروس السابقة: الدرس الأول ، الدرس الثاني ، الدرس الثالث ، الدرس الرّابع، الدرس الخامس.

 

 

 

 

هل أعجبك المقال؟

شاركونا آراءكم واقتراحاتكم

 

 

 

 

 


 

اقرأ أيضاً:

 

 

الوسوم

رامة

طالبة في كلية الآداب، مهتمة بالتكنولوجيا ونشرها، كالبرمجة والذكاء الصنعي.

مقالات ذات صلة

اترك تعليقاً

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

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.

زر الذهاب إلى الأعلى
إغلاق