إعلان
دورة تطوير التطبيقات باستخدام لغة JavaScript في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp. تعلم الآن
دورة تطوير واجهات المستخدم في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية. تعلم الآن
تطوير تطبيقات باستخدام لغة بايثون في هذه الدورة ستتعلم أساسيات البرمجة بلغة بايثون وصولاً إلى التعامل مع أشهر أطر العمل (Flask و Django) و ستتعلم كيف تبني متجر إلكتروني يمكن للمستخدمين البيع و الشراء من خلاله. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة PHP في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة Ruby في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O. تعلم الآن
دورة علوم الحاسوب هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب. تعلم الآن

    HTML الجداول

    مفهوم الجدول

    الجدول ( Table ) يسمح لك بعرض المعلومات بشكل مرتب و مقسم لأعمدة و أسطر.
    في هذا الدرس ستتعلم كيف تنشئ جدول, كيف تضيف فيه أسطر, كيف تضيف فيه أعمدة و كيف تدمج الأعمدة و الأسطر مع بعضها.

    إضافة جدول في الصفحة

    لعرض جدول في الصفحة نستخدم الوسوم التالية لبنائه بالشكل الذي نريده:

    • <table> </table> هو الوسم الأساسي الذي يجب أن تضعه لإعلام المتصفح أنك تريد عرض البيانات بداخل جدول.
    • <tr> </tr> تستخدمه لإضافة سطر في الجدول.
    • <th> </th> تستخدمه لإضافة خانة في السطر تمثل عنوان, أي النص الذي تضعه فيها يظهر بخط عريض و في المنتصف.
    • <td> </td> تستخدمه لإضافة خانة في السطر تمثل معلومة عادية, أي النص الذي تضعه فيها يظهر كنصر عادي.

    معلومة تقنية

    بشكل عام, الوسوم التي ذكرناها هي التي تحتاجها لبناء الجدول و لكن عليك معرفة أن استخدامها لوحدها لا يجعل الجدول يظهر بشكل جيد في المتصفح و سبب ذلك أن المتصفح لا يظهر أي خطوط بين أسطر و أعمدة الجدول من تلقاء نفسه و إنما أنت من يمكنه فعل ذلك سواء بإضافة بعض خصائص HTML للجدول أو بواسطة كود CSS الذي يمكن استخدامه مع الجدول.

    بالتأكيد CSS توفر لك إمكانيات هائلة لتصميم الجدول و لكن بما أننا ندرس و نركز على ما توفره لنا لغة HTML فقط, سنتطرق للخصائص التي توفرها لنا هي فقط.


    في المثال التالي قمنا بإضافة جدول يتألف من 4 أسطر و كل سطر فيه 3 خانات.

    مثال

    <table>
    	<!-- هنا قمنا بتعريف السطر الأول في الجدول و بداخله وضعنا 3 خانات عبارة عن عناوين -->
    	<tr>
    		<th>ID</th>
    		<th>Name</th>
    		<th>Mark</th>
    	</tr>
    	<!-- هنا قمنا بتعريف السطر الثاني في الجدول و بداخله وضعنا 3 خانات عادية -->
    	<tr>
    		<td>1</td>
    		<td>Mhamad Harmush</td>
    		<td>A</td>
    	</tr>
    	<!-- هنا قمنا بتعريف السطر الثالث في الجدول و بداخله وضعنا 3 خانات عادية -->
    	<tr>
    		<td>2</td>
    		<td>Rima Houssayni</td>
    		<td>C</td>
    	</tr>
    	<!-- هنا قمنا بتعريف السطر الرابع في الجدول و بداخله وضعنا 3 خانات  عادية -->
    	<tr>
    		<td>3</td>
    		<td>Youssef Jabber</td>
    		<td>B</td>
    	</tr>
    </table>
    		

    جرب الكود

    خصائص الجدول

    هناك ثلاث خصائص يمكنك إضافتها للعمود لجعله يظهر بشكل أفضل و هي التالية:

    • border يمكنك استخدامها لإظهار خطوط الجدول, الرقم الذي نعطيه لها يمثل حجم الخطوط التي سيتم وضعها بين الأسطر و الأعمدة.
    • width يمكنك استخدامها لتحديد عرض الجدول بنفسك بدل جعل المتصفح يفعل ذلك, الرقم الذي نعطيه لها يمثل عرض الجدول.
    • height يمكنك استخدامها لتحديد طول الجدول بنفسك بدل جعل المتصفح يفعل ذلك, الرقم الذي نعطيه لها يمثل طول الجدول.

    سنضيف الخاصية border="1" في جميع الأمثلة التي نضعها حتى تظهر خطوط الجدول.


    ملاحظة

    إبتداءاً من الإصدار الخامس في HTML لم نعد نستخدم هذه الخصائص ابتداءاً لأننا أصبحنا نعدّل تصاميم الجداول بواسطة CSS و هي توفر الكثير من الخصائص التي يمكننا استخدامها لأجل ذلك. في هذا الدرس سنستخدم هذه الخصائص فقط ليكون الشرح أكثر وضوحاً.



    في المثال التالي قمنا بإظهار خطوط الجدول حجمها 1 بيكسل.

    المثال الأول

    <table border="1">
    	...
    </table>
    		

    جرب الكود



    في المثال التالي قمنا بجعل عرض الجدول 100% و طوله 150 بيكسل.

    المثال الثاني

    <table border="1" width="100%" height="150">
    	...
    </table>
    		

    جرب الكود

    دمج خانات الجدول

    في حال أردت دمج خانات الجدول فهناك خاصيّتين يمكنك استخدامهما لأجل ذلك:

    • colspan نستخدمها لدمج الخانات الموجودة على نفس السطر.
    • rowspan نستخدمها لدمج الخانات الموجودة على أكثر من سطر.

    ملاحظة: colspan و rowspan يمكن استخدامهما مع الوسم <th> و الوسم <td> فقط.


    في المثال التالي قمنا بدمج الخانة الأولى و الثانية الموجودتين في السطر الأول.

    المثال الأول

    <table>
    	<tr>
    		<!-- سيتم عرضها على خانتين وراء بعض 'A' هنا قلنا أن الخانة التي يوجد فيها الحرف -->
    		<td colspan="2">A</td>
    		<td>B</td>
    	</tr>
    	<tr>
    		<td>C</td>
    		<td>D</td>
    		<td>E</td>
    	</tr>
    </table>
    		

    جرب الكود



    في المثال التالي قمنا بدمج الخانة الثانية في السطر الأول مع الخانة الثانية الموجودة تحتها في السطر الثاني.

    المثال الثاني

    <table>
    	<tr>
    		<!-- سيتم عرضها على خانتين تحت بعض 'B' هنا قلنا أن الخانة التي يوجد فيها الحرف -->
    		<td>A</td>
    		<td rowspan="2">B</td>
    		<td>C</td>
    	</tr>
    	<tr>
    		<td>D</td>
    		<td>E</td>
    	</tr>
    </table>
    		

    جرب الكود



    في المثال التالي قمنا بدمج الخانة الثانية و الثالثة في السطر الثاني مع الخانة الثانية و الثالثة الموجودة تحتها في السطر الثالث.

    المثال الثالث

    <table>
    	<tr>
    		<td>A</td>
    		<td>B</td>
    		<td>C</td>
    	</tr>
    	<tr>
    		<!-- سيتم عرضها على خانتين في نفس السطر و خانتين تحتهما مباشرةً 'E' هنا قلنا أن الخانة التي يوجد فيها الحرف -->
    		<td>D</td>
    		<td colspan="2" rowspan="2">E</td>
    	</tr>
    	<tr>
    		<td>F</td>
    	</tr>
    </table>
    		

    جرب الكود

    وضع عنوان خاص للجدول

    إذا أردت وضع عنوان خاص للجدول, يمكنك كتابة العنوان بداخل الوسم <caption> </caption> مع الإشارة إلى أنه يجب وضع هذا الوسم كأول وسم في الجدول.


    في المثال التالي قمنا بوضع عنوان للجدول بواسطة الوسم <caption>.

    مثال

    <table>
    	<caption>Final semester marks</caption>
    	...
    </table>
    		

    جرب الكود

    إعلان

    Eqla3Tech.com

    شروحات مكتوبة حول لغات البرمجة و تقنية المعلومات باللغة العربية مقدمة من إقلاع تك.

    لغة جافا لغة ++C قواعد البيانات نظام ويندوز نظام لينكس الشبكات تقنية المعلومات الأمن السيبراني

    الدورات

    أدوات مساعدة

    الأقسام

    دورات
    مقالات أسئلة مشاريع كتب