دروس كمبيوتر وصيانة دروس حاسب دروس مجلة  درس نيوك phpnuke الدروس دروس مسنجر MSN - yahoo - Gmail دروس منتديات vBulletin دروس الجوالات والهواتف دروس السي بنل cpanel دروس اكسس access دروس بيونت شوب برو - point shop pro دروس برمجة php - mysql دروس برامج منوعة software دروس ثري دي ماكس 3D max دروس جافا سكريبت JavaScript دروس دريم ويفر DreamWeaver دروس شبكات Networks دروس سويش - swish دروس فلاش - flash دروس فيجوال بيسك Visual Basic دروس فرونت بيج - frontpage دروس فوتوشوب photoshop دروس هكر hacker crack virus
توبيكات رمضان | رسايل رمضان | ثيمات رمضان | طبخات رمضانية | توبيكات رمضانية | صور عن رمضان | دعاء رمضان
احصائيات سريعة
اقسام على الموقع
دروس في أنظمة التشغيل | ماي سكيول - MySQL | لفيجوال بيسك - Visual Basic | المات لاب Matlab | اللينكس و اليونكس | الاسمبلي - ASSEMBLY | الاوتلوك - Outlook | البرمجة تحت اللنكس -Linux Programming | البرمجة تحت وندوز بواسطة دوال ال win API | البرمجة في بيئة الدوت نت .Net | التصمبم والرسوم | الدلفي - Delphi | الجافا - Java | السي - C | الصوت و الصورة | الوورد - Word | القسم العام للأوفيس | الكوبول - COBOL | control panel-ftp | اوراكل - Oracle | اكسل - Excel | تحميل الملفات | برامج متنوعة | برامج التصفح | برامج الحماية | برامج إنترنت | تعرّف على الويب | بوربوينت - Power Point | images | دروس : كمبيوتر وصيانة | دروس مجلة نيوك phpnuke | دروس مسنجر MSN - yahoo - Gmail | دروس منتديات vBulletin | دروس الجوالات والهواتف | دروس السي بنل cpanel | دروس اكسس access | دروس بيونت شوب برو - point shop pro | دروس برمجة php - mysql | دروس برامج منوعة software | دروس ثري دي ماكس 3D max | دروس تطوير المواقع والمنتديات | دروس جافا سكريبت JavaScript | دروس دريم ويفر DreamWeaver | دروس شبكات Networks | دروس سويش - swish | دروس فلاش - flash | دروس فلاش mx | دروس فى نظام الوندوز WINDOWS | دروس فىالباسكال - Pascal | دروس فيجوال بيسك Visual Basic | دروس فرونت بيج - frontpage | دروس فوتوشوب photoshop | دروس هكر hacker crack virus | سي ++ | سي شارب - #C | فيجوال سي ++ - ++ Visual C | قسم البرمجة العام | دروس فى لغة HTML
البحث في المواد

اكثر المحتويات زيارة
الدوال في الاكسل (6,375 مشاهده)
ربط قاعدة بيانات أكسس (MS Access) مع برنامج الفيجوال بيسك بطريقة(ODBC) (4,138 مشاهده)
الدرس الثالث : بعض تطبيقات الدوال في اكسل (3,091 مشاهده)
تعريف الاستعلام وطريقة عرضه في آكسس، أنواع الاستعلامات، نافذة تحديد الاستعلام! (2,402 مشاهده)
الدرس الثاني: بعض الحيل لتسهيل برنامج اكسل (2,298 مشاهده)
شرح طريقة استعمال الأوتلوك مع بريد الهوتميل (2,192 مشاهده)
تغيير لغة واجهة التطبيق من عربي الى انجليزي وبالعكس لـ Windows-based applications (2,154 مشاهده)
أنواع العلاقات وطريقة الربط بين الجداول. (1,928 مشاهده)
مقدمة عامة حول الاكسل وحيل خاصة بالاكسل (1,755 مشاهده)
أنشئ قاعدة بياناتك التي ستستند إليها في تعلم طريقة ربط الجداول والاستعلامات. (1,725 مشاهده)
الدرس الأول : عمل شريحة في البوربوينت (1,576 مشاهده)
دروس في الأوفيس الأكسس - Access0- (1,527 مشاهده)
كيفية حل مشاكل الانترنت اكسبلور Internet Explorer (1,489 مشاهده)
دورة الأكسس: الدرس السادس : منوعات في أكسيس . (1,468 مشاهده)
اضافه صوت ونص لخلفيه في باور بوينت (1,357 مشاهده)
شرح طريقة التجميع Grouping في برنامج الاكسل (1,322 مشاهده)
التعرف على مكونات الكمبيوتر (1,286 مشاهده)
دورة الأكسس: الدرس السادس : منوعات في أكسيس .0--- (1,275 مشاهده)
برنامج Windows Movie Maker لتكوين أفلام (1,265 مشاهده)
درس تعريب المجلة (1,247 مشاهده)
مقدمة في ربط قواعد البيانات داخل بيئة الـ .NET باستخدام الـ VB.NET (1,218 مشاهده)
كيف تجعل برنامجك أكثر تألقا وجمالا باستخدام أداة Active Skin (1,215 مشاهده)
ما هو المات لاب MATLAB؟ (1,171 مشاهده)
مقدمة عن لغة البيسك (1,129 مشاهده)
الفيجوال بيسك - مقدمة (1,089 مشاهده)
جديد مواد مع عشوائي
التحويل التلقائي للحروف ل- ل- ه إلى اسم الجلالة0---- (791 مشاهده)
النسبة المئوية لا تظهر بالخط العربي & الشدة وألف المد في لفظ الجلالة0---النسبة المئوية لا تظهر بالخط العربي & الشدة وألف المد في لفظ الجلالة0--- (491 مشاهده)
ضبط خيارات اللغة فى الـ Microsoft Word0--- (551 مشاهده)
استخدام لوحة المفاتيح في الـ Word0---- (719 مشاهده)
إضافة كلمة سر إلي ملفات الورد دون استخدام برامج0--- (790 مشاهده)
دمج المراسلات0-- (438 مشاهده)
وضع صورة كخلفية للنص0-- (566 مشاهده)
السماح للمستخدمين بتعديل أجزاء من ملف وورد محمي (Word2003)0--- (385 مشاهده)
كتابة الأرقام الكسرية ورموز المعادلات0-- (636 مشاهده)
درس كامل عن الدمج السهل من لوحة المفاتيح ف0-ي برنامج الـ Word (401 مشاهده)
دورة الأكسس: الدرس السادس : منوعات في أكسيس .0--- (1,275 مشاهده)
دورة الأكسيس : الدرس الرابع : العلاقات0---- (667 مشاهده)
أساسيات في Access0--0 (457 مشاهده)
تصميم تقرير لطباعة البيانات0---- (496 مشاهده)
تصميم نموذج استعراض البيانات‏0--تصميم نموذج استعراض البيانات‏0-- (481 مشاهده)
تصميم نموذج إدخال‎ ‎البيانات0--- (573 مشاهده)
إنشاء قوائم خاصة باستخدام الماكرو(1)0-- (443 مشاهده)
خطوات إنشاء الماكرو في تذييل النموذج (2)0-- (376 مشاهده)
خطوات إنشاء الماكرو في تذييل النموذج (1)0- (330 مشاهده)
استعلامات SQL في Access - تعديل الجداول وإضافة الحقول0- (466 مشاهده)
استعلامات SQL في Access - تحديث البيانات الجدولية0-- (421 مشاهده)
الاستعلامات الإجرائية -4 (استعلام الحذف)0--- (217 مشاهده)
الاستعلامات الإجرائية -2 (استعلام الإلحاق)0--- (301 مشاهده)
تصميم تقرير لطباعة الإجمالي0--- (329 مشاهده)
استعلامات التحديد Select Query مع أمثله (1)0--- (434 مشاهده)
اعلانات في الموقع على جميع الصفحات

الدرس السابع الجداول 2






الدرس السابع الجداول (1)


أهلاً وسهلاً بك إلى الدرس السابع من دروس HTML. هذا الدرس سيكون الأول من درسين حول الجداول. وقد فضلت تجزئتها إلى قسمين وذلك لأهمية هذا الموضوع وتعدد خصائص الجداول واحتمالات استخدامها في صفحات الويب.


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


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

هل أنت مستعد؟ إذن هيّا بنا…







بداية، إليك هذا الوصف البسيط للوسوم الأساسية الخاصة بالجداول













<TABLE>...<‎/TABLE> وسوم تعريف الجدول
<TR>...<‎/TR>

Table Row وسوم تعريف الصف في الجدول

<TD> Cell Data <‎/TD>

Table Data وسوم تعريف الخلايا في الصف وتعريف محتويات كل خلية



والآن لنتكلم بصورة أكثر دقة وتفصيلاً:

هذه هي الوسوم التي نبدأ بها لإدراج جدول مكون من خلية واحدة أو من مليون خلية… الأمر سيان


<TABLE> ... <‎/TABLE>


والآن بعد إدراج هذين الوسمين، هناك سؤالين ينبغي الإجابة عليهما. الأول: كم عدد الصفوف التي نريدها في الجدول؟ ثلاثة، أربعة، مائة؟ لا بأس، قم بإضافة الوسوم


<TR> ... <‎/TR>


بنفس عدد الصفوف التي تريدها. ولنفترض هنا أنها ثلاثة.


<TABLE>



<TR>
<‎/TR>

<TR>
<‎/TR>

<TR>
<‎/TR>


<‎/TABLE>


والسؤال الثاني هو، كم عدد الخلايا (أو الأعمدة) التي نريدها في كل صف؟
وهنا نضيف الوسوم


<TD> ... <‎/TD>


بنفس عدد الخلايا المطلوب. ومن البديهي أن نكتبها بين الوسوم <TR> ... <‎/TR> طالما أن الخلايا هي جزء من الصفوف. وهنا سأفترض أننا نريد خليتين في كل صف، وبذلك يجب تكرار كتابتها مرتين لكل صف.
وأذكرك أن النص الذي نريد إدراجه في الخلية يكتب ضمن هذين الوسمين.


<TABLE>



<TR>



<TD> Data <‎/TD>
<TD> Data <‎/TD>


<‎/TR>

<TR>



<TD> Data <‎/TD>
<TD> Data <‎/TD>


<‎/TR>

<TR>



<TD> Data <‎/TD>
<TD> Data <‎/TD>


<‎/TR>


<‎/TABLE>


هل اتضحت لك الصورة الآن. أنظر إلى نتيجة العمل التي حصلنا عليها.












Data Data
Data Data
Data Data

هناك شيء ما ينقص. بالطبع ... الحدود. انتظر قليلاً وستعرف الخاصية التي تقوم بإضافة الحدود للجدول وغيرها من الخصائص الأخرى. لأنني قبل أن أستمر أود أن ألفت نظرك لمسألة معينة في الجداول. وهي أن طريقة التعامل معها تتم على ثلاثة مستويات:





  • مستوى الجدول ككل



  • مستوى الصفوف ككل أو كل واحد على حده



  • مستوى الخلايا ككل أو كل واحدة على حده.



ولكل من هذه المستويات خصائصه التي ينفرد بها كما أن هناك خصائص مشتركة تستخدم مع كل الوسوم.






نبدأ بمناقشة الخصائص التي تستخدم مع الوسوم <TABLE> ... <‎/TABLE> وسأقوم أولاً بسردها لك، ومن ثم إدراج بعض الأمثلة التي توضحها.

 
























BORDER

تقوم هذه الخاصية بإضافة حدود للجدول وتحديد سماكتها، والقيمة الإفتراضية لها هي صفر أي لا حدود


‎<TABLE BORDER="5">‎
‎<TABLE BORDER="0">‎

WIDTH

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


‎<TABLE WIDTH="600">‎
‎<TABLE WIDTH="80%">‎

HEIGHT

لتحديد ارتفاع الجدول، ويكون تحديد هذا الإرتفاع من خلال قيمة مطلقة تحدد الإرتفاع بالبيكسل. أو قيمة نسبية تحدد ارتفاع الجدول بالنسبة لإرتفاع صفحة المتصفح


‎<TABLE HEIGHT="500">‎
‎<TABLE HEIGHT="100%">‎

CELLSPACING

لتحديد المسافة بين كل خلية من خلايا الجدول


‎<TABLE CELLSPACING="10">‎

CELLPADDING

لتحديد المسافة الفاصلة بين الحدود وبداية النص في كل خلية. أو لنقل: تحديد حجم الهوامش لخلايا الجدول.


‎<TABLE CELLPADDING="10">‎

ALIGN

لتحديد محاذاة الجدول أفقياً على الصفحة يميناً أو يساراً. وهو يأخذ القيم right, left


‎<TABLE ALIGN="Left">‎
‎<TABLE ALIGN="Right">‎

BGCOLOR

ويستخدم لتحديد لون الخلفية للجدول


‎<TABLE BGCOLOR="#00FFFF">‎

 

هذه هي الخصائص المستعملة مع الجدول. وسأقوم الآن بتطبيقها على المثال الوارد في بداية هذا الدرس وسأكتفي بكتابة وسم البداية أما باقي الوسوم فهي نفسها:


‎<TABLE BORDER="5">‎












Data Data
Data Data
Data Data






‎<TABLE BORDER="5" CELLPADDING="5">‎












Data Data
Data Data
Data Data






‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10">‎












Data Data
Data Data
Data Data






‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"‎
BGCOLOR="#FFFF00">‎












Data Data
Data Data
Data Data






‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"‎
BGCOLOR="#FFFF00" HEIGHT="300">‎












Data Data
Data Data
Data Data






‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"‎
BGCOLOR="#FFFF00" HEIGHT="300" WIDTH="75%">‎












Data Data
Data Data
Data Data







 


ونتكلم الآن عن الخصائص المستخدمة مع وسوم الصف <TR> ... <‎/TR> ولا بأس من تذكيرك أن عدد الصفوف في الجدول يتحدد بعدد هذه الوسوم. أما أهم الخصائص التي تضاف لهذا الوسم فهي:













ALIGN

لتحديد محاذاة النص أفقياً داخل الخلايا التي يتكون منها الصف، والقيم المحتملة لها هي Right, Left, Center والقيمة الإفتراضية هي Center

VALIGN

لتحديد المحاذاة العمودية للنص داخل خلايا الصف، وذلك إما للأعلى أو للأسفل أو في المنتصف أو على امتداد الخط الأساسي للخلية. وقيمها على التوالي هي: Top, Bottom, Middle, Baseline

BGCOLOR

لتحديد لون الخلفية للخلايا التي يتكون منها الصف. وهنا يتم تجاهل لون الخلفية المحدد ضمن وسم <TABLE> ويتم تطبيق اللون المحدد هنا.


ونعود الآن إلى جدولنا السابق لنطبق عليه هذه الخصائص من خلال الأمثلة التالية:


‎<TABLE BORDER="5" HEIGHT="300">‎
‎<TR ALIGN="Left">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR ALIGN="Right">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR ALIGN="Center">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>












Data Data
Data Data
Data Data






‎<TABLE BORDER="5" HEIGHT="300">‎
‎<TR VALIGN="Top">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR VALIGN="Bottom">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR VALIGN="Baseline">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>












Data Data
Data Data
Data Data






‎<TABLE BORDER="5" HEIGHT="300" BGCOLOR="#FFFFFF">‎
‎<TR BGCOLOR="#808080">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR BGCOLOR="#C0C0C0">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR>‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>












Data Data
Data Data
Data Data






‎<TABLE BORDER="0" HEIGHT="100%" WIDTH="100%">‎
‎<TR BGCOLOR="#808080">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR BGCOLOR="#C0C0C0">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR BGCOLOR="#FFFFFF">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>












Data Data
Data Data
Data Data





 


درس الدرس السابع الجداول 2

أضف هذه المادة في موقعك:
مواد مشابهة:
النماذج (1) النماذج (1)
النماذج (1)
(مرات المشاهدة: 32 مرات)
 للقوائم للقوائم
للقوائم
(مرات المشاهدة: 123 مرات)
إضافة الصور2 إضافة الصور2
إضافة الصور2
(مرات المشاهدة: 43 مرات)
ماهي الجافا سكريبتس وكيف تعمل ؟ ماهي الجافا سكريبتس وكيف تعمل ؟
ماهي الجافا سكريبتس وكيف تعمل ؟
(مرات المشاهدة: 137 مرات)
الصور والرسومات الصور والرسومات
الصور والرسومات
(مرات المشاهدة: 95 مرات)
الدرس الخامس الصور والرسومات1 الدرس الخامس الصور والرسومات1
الدرس الخامس الصور والرسومات1
(مرات المشاهدة: 177 مرات)
الدرس الثالث عش الدرس الثالث عش
الدرس الثالث عش
(مرات المشاهدة: 70 مرات)
الخطوط الخطوط
الخطوط
(مرات المشاهدة: 65 مرات)
الجداول |[( مقدمة )]| الجداول |[( مقدمة )]|
الجداول |[( مقدمة )]|
(مرات المشاهدة: 45 مرات)
مقدمة - درس HTML مقدمة - درس HTML
مقدمة - درس HTML
(مرات المشاهدة: 162 مرات)
fot
جميع الحقوق محفوظة :Copyright © All rights reserved