اغلق هذه النافذة  أنت غير مسجل بشبكة ابن الخليج; للتسجيل اضغط هنا; للمساعده وشرح طريقة التسجيل اضغط هنا

شبكة ابن الخليج

Sitemap | Archive | Tag Could
معهد مطور - ينتهي الإعلان بتاريخ 16\10\2008
التسجيلالبحثمشاركات اليوماجعل جميع المنتديات مقروءةالأرشيف

منتديات نظرة حب - ينتهي الاعلان بتاريخ 6\11\2008جديد برامج وأخبار الالعابالرَّقائق دعوة لترقيق القلوب - ينتهي الاعلان بتاريخ 6\11\2008
كل مايخص المرأة والمجتمعاجمل واروع الصورنغمات إنتظار الشادي - ينتهي الاعلان بتاريخ 6\11\2008

درس شامل وكامل عن لغة Html

مناقشة موضوع درس شامل وكامل عن لغة Html في دروس برمجة مواقع; الجداول تستخدم لعرض بيانات مجدولة مثل المعلومات التي تعرض بشكل منطقي من خلال أعمدة وصفوف. هل هي صعبة؟ إنشاء الجداول في HTML قد يكون في البداية معقداً، لكن إذا بقيت هادئاً وراقبت ما تقوم به جيداً سترى أ ...

العودة شبكة ابن الخليج> منتديات تعليمية> دروس برمجة مواقع

موضوع مغلق
 
LinkBackأدوات الموضوعطرق مشاهدة الموضوع
قديم 12-12-2007, 10:38 صباحاً   #11 (permalink)
.::+: Gulf Son :+::.

 
الصورة الرمزية ADMIN
 
تاريخ التسجيل: May 2005
الدولة: بلاد الخليج
المشاركات: 50,365
معدل تقييم المستوى: 53ADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيط
إرسال رسالة عبر مراسل ICQ إلى ADMINإرسال رسالة عبر مراسل MSN إلى ADMIN
الدرس العاشر: الجداول


الجداول تستخدم لعرض بيانات مجدولة مثل المعلومات التي تعرض بشكل منطقي من خلال أعمدة وصفوف.
هل هي صعبة؟

إنشاء الجداول في HTML قد يكون في البداية معقداً، لكن إذا بقيت هادئاً وراقبت ما تقوم به جيداً سترى أن الجداول بسيطة ومنطقية، تماماً كما هو كل شيء في HTML.

مثال 1:

كود PHP:
<table>
  <
tr>
    <
td>خلية 1</td>
    <
td>خلية 2</td>
  </
tr>
  <
tr>
    <
td>خلية 3</td>
    <
td>خلية 4</td>
  </
tr>
</
table
سيظهر بهذا الشكل في متصفحك

اقتباس:
خلية 1 خلية 2
خلية 3 خلية 4
ما الفرق بين <tr> و<td>؟

كما ترى في المثال أعلاه، هذا هو أكثر أمثلة HTML تعقيداً قمنا بعرضه في هذا الدرس حتى الآن، لنقم بتفكيك المثال وشرح كل وسم:

هناك ثلاث عناصر تستخدم لإنشاء أي جدول:

وسم البداية <table> ووسم الإغلاق </table> يبدأ من بينهما الجدول وينتهي، منطقي.
<tr> تعني "table row" وهي العنصر الذي تبدأ من خلاله الصفوف وتنتهي، لا زال الأمر منطقياً.
<td> هي اختصار "table data". هذا الوسم يبدأ وينهي كل خلية في صفوف الجدول، كل هذا بسيط ومنطقي.

هذا ما يحدث في المثال الأول، الجدول يبدأ بوسم <table>، يتبعه وسم <tr> الذي يدل على بداية صف جديد، وهناك خليتان في هذا السطر: <td>خلية 1</td> و<td>خلية 2</td>، ثم نغلق الصف بوسم الإغلاق </tr> ونبدأ آخر <tr> الذي يحوي أيضاً خليتين، ثم نغلق الجدول </table>.

فقط لنوضح الأمر أكثر: الصفوف تظهر بشكل خط أفقي من الخلايا، والأعمدة على شكل خط رأسي من الخلايا:

47.jpg

خلية 1و خلية 2 تشكلان صفاً، خلية 1 وخلية 3 تشكلان عموداً

في المثال أعلاه الحدول يحوي صفين وعمودين، ويمكن للجدول أن يحوي عدداً لا نهائياً من الصفوف والأعمدة.

مثال 2:

كود PHP:
<table>
  <
tr>
    <
td>خلية 1</td>
    <
td>خلية 2</td>
    <
td>خلية 3</td>
    <
td>خلية 4</td>
  </
tr>
  <
tr>
    <
td>خلية 5</td>
    <
td>خلية 6</td>
    <
td>خلية 7</td>
    <
td>خلية 8</td>
  </
tr>
  <
tr>
    <
td>خلية 9</td>
    <
td>خلية 10</td>
    <
td>خلية 11</td>
    <
td>خلية 12</td>
  </
tr>
</
table
سيظهر بهذا الشكل في متصفحك
اقتباس:
خلية 1 خلية 2 خلية 3 خلية 4
خلية 5 خلية 6 خلية 7 خلية 8
خلية 9 خلية 10 خلية 11 خلية 12
هل هناك أية خصائص للجداول؟

بالطبع هناك خصائص للجداول، هناك مثلاً خاصية الإطار التي تستخدم لتحديد سمك الإطار حول الجدول:

مثال 3:

كود PHP:
<table border="1">
  <
tr>
    <
td>خلية 1</td>
    <
td>خلية 2</td>
  </
tr>
  <
tr>
    <
td>خلية 3</td>
    <
td>خلية 4</td>
  </
tr>
</
table
سيظهر بهذا الشكل في متصفحك

47.jpg

سمك إطار الجدول يحدد بمقياس البكسل

وكما هو الحال مع الصور، يمكنك أن تحدد عرض الجدول بالكبسل أو بالنسبة المؤية لمقياس الشاشة:

مثال 4:

كود PHP:
<table border="1" width="30%"
هذا المثال سيعرض في المتصفح جدولاً بعرض 30% من مقياس الشاشة، جرب ذلك بنفسك.
المزيد من الخصائص

هناك خصائص كثيرة للجداول، هذان اثنان منها:

align: يحدد المحاذاة لمحتويات الجدول، أو الصف أو في الخلية، فمثلاً يمكن محاذاة النص إلى اليمين أو اليسار أو في المنتصف.
يحدد المحاذاة الرأسية لمحتويات الخلية، فيمكن محاذاة النص في الأعلى أو الأسفل أو المنتصف.

مثال 5:

كود:
<td align="right" valign="top">Cell 1</td>
ماذا يمكن أن أضع في الجداول؟

نظرياً يمكن أن تضع أي شيء في الجداول، النصوص والصور والروابط، لكن الجداول مخصصة لعرض البيانات مجدولة،، لذلك لا تستخدمها لوضع أي شيء لأنك تريد ببساطة أن تجعل الأشياء تظهر بجانب بعضها البعض،.

قبل سنوات معدودة كانت الجداول تستخدم غالباً كأداة للتصميم، لكن إذا أردت أن تتحكم بطريقة عرض النصوص والجداول هناك طريقة أفضل بكثير (تلميح: CSS) لكن هذا سنناقشه لاحقاً.

الآن قم بتطبيق ما تعلمته وصمم عدداً من الجداول بمختلف القياسات ومختلف الخصائص والمحتويات، هذا يمكن أن يبقيك مشغولاً لساعات.





من مواضيع ADMIN في المنتدى
نصائح مهمه
  1. إفحص الملف المرفق بأي برنامج مضاد للفيروسات
  2. قم بمراسلة المراقب عن أي مرفق يوجد به فيروس
  3. المنتدى غير مسوؤل عن مايحتويه المرفق من بيانات
__________________


يقول الامام مالك رحمه الله:
إنما هؤلاء أقوام أرادوا القدح في النبي صلى الله عليه وسلم فلم يمكنهم ذلك، فقدحوا في أصحابه حتى يقال رجل سوء ولو كان رجلاً صالحاً لكان أصحابه صالحين.

وقال أبو الوفا بن عقيل رحمه الله:
انظر كيف اختار لمرضه بيت البنت، واختار لموضعه من الصلاة الأب، فما هذه الغفلة المستحوذة على قلوب الرافضة عن هذا الفضل والمنزلة التي لا تكاد تخفى عن البهيم فضلا عن الناطق.

ADMIN غير متواجد حالياً  
قديم 12-12-2007, 10:41 صباحاً   #12 (permalink)
.::+: Gulf Son :+::.

 
الصورة الرمزية ADMIN
 
تاريخ التسجيل: May 2005
الدولة: بلاد الخليج
المشاركات: 50,365
معدل تقييم المستوى: 53ADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيط
إرسال رسالة عبر مراسل ICQ إلى ADMINإرسال رسالة عبر مراسل MSN إلى ADMIN
الدرس الحادي عشر: المزيد حول الجداول

الدرس الحادي عشر: المزيد حول الجداول

عنوان الدرس "المزيد حول الجداول" يبدو مملاً بعض الشيء، لكن أنظر للجانب الإيجابي، إذا تمكنت من إتقان إنشاء الجداول فلن يكون هناك أي شيء في HTML لن تستطيع معرفته واستخدامه.
ماذا بقي إذاً؟

خاصيتان هما colspan وrowspan تستخدمان لإنشاء جداول رائعة ومتقنة.

Colspan هي اختصار "column span"، Colspan تستخدم في الوسم <td> لتحدد عدد الأعمدة التي ستتمدد لها الخلية:

مثال 1:

كود PHP:
<table border="1">
  <
tr>
    <
td colspan="3">Cell 1</td>
  </
tr>
  <
tr>
    <
td>خلية 2</td>
    <
td>خلية 3</td>
    <
td>خلية 4</td>
  </
tr>
</
table
سيظهر بهذا الشكل في متصفحك

48.jpg

بتحديد colspan بالقيمة "3" قامت الخلية في الصف الأول بالتمدد لثلاثة أعمدة، ولو قمنا بوضع "2" لقيمة colspan ستتمدد لعمودين اثنين، وسيتعين علينا إضافة خلية أخرى للصف الأول حتى تصبح الأعمدة متساوية

مثال 2:

كود PHP:
<table border="1">
  <
tr>
    <
td colspan="2">خلية 1</td>
    <
td>خلية 2</td>
  </
tr>
  <
tr>
    <
td>خلية 3</td>
    <
td>خلية 4</td>
    <
td>خلية 5</td>
  </
tr>
</
table
سيظهر بهذا الشكل في متصفحك

49.jpg

ما هي خاصية rowspan؟

كما ربما خمنت، rowspan تحدد عدد الصفوف التي ستقوم الخلية بالتمدد فوقها:

مثال 3:

كود PHP:
<table border="1">
  <
tr>
    <
td rowspan="3">خلية 1</td>
    <
td>خلية 2</td>
  </
tr>
  <
tr>
    <
td>خلية 3</td>
  </
tr>
  <
tr>
    <
td>خلية 4</td>
  </
tr>
</
table
سيظهر بهذا الشكل في متصفحك

50.jpg

في المثال أعلاه أعطينا الخاصية rowspan القيمة "3" للخلية 1، هذا يعني أن الخلية يجب أن تتمدد فوق ثلاث صفوف، الصف الذي تقع فيه الخلية مع صفين آخرين أسفلها، الخلية 1 والخلية2 التان تقعان في نفس الصف، بينما الخلية 3 والخلية أربع تشكلان صفين منفصلين.

هل تشعر بالحيرة؟ حسناً، الأمر ليس معقداً لكن من السهل أن تضيع في التفاصيل في بعض الأحيان، لذلك من الأفضل أن ترسم الجدول أولاً على الورق قبل أن تطبقه على HTML.

ربما لا تشعر بالحيرة، إذا قم بإنشاء جدولين واستخدام كل من colspan وrowspan بنفسك.





من مواضيع ADMIN في المنتدى
نصائح مهمه
  1. إفحص الملف المرفق بأي برنامج مضاد للفيروسات
  2. قم بمراسلة المراقب عن أي مرفق يوجد به فيروس
  3. المنتدى غير مسوؤل عن مايحتويه المرفق من بيانات
__________________


يقول الامام مالك رحمه الله:
إنما هؤلاء أقوام أرادوا القدح في النبي صلى الله عليه وسلم فلم يمكنهم ذلك، فقدحوا في أصحابه حتى يقال رجل سوء ولو كان رجلاً صالحاً لكان أصحابه صالحين.

وقال أبو الوفا بن عقيل رحمه الله:
انظر كيف اختار لمرضه بيت البنت، واختار لموضعه من الصلاة الأب، فما هذه الغفلة المستحوذة على قلوب الرافضة عن هذا الفضل والمنزلة التي لا تكاد تخفى عن البهيم فضلا عن الناطق.
ADMIN غير متواجد حالياً  
موضوع مغلق

العبارات الدلالية
درس, شامل



الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
أدوات الموضوع
طرق مشاهدة الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG]متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة

المواضيع المتشابهه
الموضوعكاتب الموضوعالمنتدىمشاركاتآخر مشاركة
{كل شيء عن المواقع خاص لشبكة ابن الخليج}hsyدروس برمجة مواقع410-02-2008 11:21 صباحاً
أخطاء يقع فيها بعض الصائمين في رمضانADMINحوارات ثقافية عامة509-13-2008 02:54 صباحاً
[فهرس] مواضيع و دروس قسم Cinema 4D ( آخر تحديث 29/3/2007 )ADMINدروس Cinema 4D003-29-2007 08:35 صباحاً
الآن سنتعرف على الكثير من بلدان العالم وسبب إختيارها لألوان أعلامهاكرم العربيحوارات ثقافية عامة802-15-2007 05:04 صباحاً
الـــســـنن الــمــهــجـــورةADMINحوارات ثقافية عامة312-24-2005 04:35 مساءً


منتديات شبكة ابن الخليج

ثقافة بلاد الرافدين أحمد الزين شعر رومانسي كتب برمجة نبذة مختصرة عن معجم القاموس المحيط جداول المباريات الدوري الانجليزي الدوري الأسبانيالدوري الإيطاليالدوري البرتغالي TechArt جرائم العاب و مسابقات ثقافية نقش حنه ملف كامل للعناية بالبشرة اعشاب عالم حواء ديور متبلات ديكور سقف نقش حنه برامج نسخ الاسطوانات برامج كاملة ادوات الوصول الى الملفات برامج نسخ اساله افلام اجنبيه افلام مصرية افلام كورية مسلسلات عربية و عالمية فلم انمي العاب الكومبيوتر العاب المصارعه الحره اركيد العاب PS3 ثكنة كبيرة ترافيان لايت ويف صور الطيور كاميرات رقمية وتقنية صور Nokia 7610 العاب سامسونق نقش حنه دروس الحاسوب ومكوناته دروس Corel Bryce دروس فوتوشوب للمبتدئين دروس ايميج ريدي Adobe ImageReadyدروس افتر افكت Adobe After Effect تحميل adobe premiere برنامج adobe illustrator Adobe Photoshop ملفات 3D Studio Max دروس محترفين 3D Studio Max دروس swish متوسطة دروس صفحات الأنماط الانسيابية دروس بوربوينت دروس نوفل لينكس و يونكسوندوز WINDOWS دروس كوبول نقش حنه vb3.6.4 مكتبة هاكات قسم ستايلات vBulletinمجلة المنتديات mkPortalقسم ستايلات مجلة المنتديات mkPortal Stylesسكربتات وادوات تطوير المواقعمشاكل وحلول الـ مواقع شراء منتديات فوتوشوبCinema 4Dخامات فوتوشوبفرش فوتوشوباكشن فوتوشوباشكال فوتوشوبمنتديات اماراتيةدليل مواقعاكتشف شخصيتكاخبارموسوعة الأطفالبوربوينتtorrentاختصار الروابطPageRankتوقيع لاميلكصانع القليترGlitter


الساعة تعتمد على توقيت جرينتش +3. الساعة الآن 10:46 صباحاً.
Search Engine Optimization by vBSEO 3.1.0

Valid XHTML 1.0 Transitional Valid CSS!Powered by vBulletin® Version 3.7.1,
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd
Feeds:   XML   JS   RSS   RSS Feed