دروس كمبيوتر وصيانة دروس حاسب دروس مجلة  درس نيوك 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,316 مشاهده)
ربط قاعدة بيانات أكسس (MS Access) مع برنامج الفيجوال بيسك بطريقة(ODBC) (4,097 مشاهده)
الدرس الثالث : بعض تطبيقات الدوال في اكسل (3,063 مشاهده)
تعريف الاستعلام وطريقة عرضه في آكسس، أنواع الاستعلامات، نافذة تحديد الاستعلام! (2,384 مشاهده)
الدرس الثاني: بعض الحيل لتسهيل برنامج اكسل (2,280 مشاهده)
شرح طريقة استعمال الأوتلوك مع بريد الهوتميل (2,148 مشاهده)
تغيير لغة واجهة التطبيق من عربي الى انجليزي وبالعكس لـ Windows-based applications (2,116 مشاهده)
أنواع العلاقات وطريقة الربط بين الجداول. (1,909 مشاهده)
مقدمة عامة حول الاكسل وحيل خاصة بالاكسل (1,737 مشاهده)
أنشئ قاعدة بياناتك التي ستستند إليها في تعلم طريقة ربط الجداول والاستعلامات. (1,703 مشاهده)
الدرس الأول : عمل شريحة في البوربوينت (1,558 مشاهده)
دروس في الأوفيس الأكسس - Access0- (1,476 مشاهده)
دورة الأكسس: الدرس السادس : منوعات في أكسيس . (1,464 مشاهده)
كيفية حل مشاكل الانترنت اكسبلور Internet Explorer (1,447 مشاهده)
اضافه صوت ونص لخلفيه في باور بوينت (1,342 مشاهده)
شرح طريقة التجميع Grouping في برنامج الاكسل (1,306 مشاهده)
التعرف على مكونات الكمبيوتر (1,266 مشاهده)
برنامج Windows Movie Maker لتكوين أفلام (1,249 مشاهده)
درس تعريب المجلة (1,241 مشاهده)
دورة الأكسس: الدرس السادس : منوعات في أكسيس .0--- (1,234 مشاهده)
مقدمة في ربط قواعد البيانات داخل بيئة الـ .NET باستخدام الـ VB.NET (1,218 مشاهده)
كيف تجعل برنامجك أكثر تألقا وجمالا باستخدام أداة Active Skin (1,191 مشاهده)
ما هو المات لاب MATLAB؟ (1,158 مشاهده)
مقدمة عن لغة البيسك (1,121 مشاهده)
الفيجوال بيسك - مقدمة (1,081 مشاهده)
جديد مواد مع عشوائي
التحويل التلقائي للحروف ل- ل- ه إلى اسم الجلالة0---- (783 مشاهده)
النسبة المئوية لا تظهر بالخط العربي & الشدة وألف المد في لفظ الجلالة0---النسبة المئوية لا تظهر بالخط العربي & الشدة وألف المد في لفظ الجلالة0--- (483 مشاهده)
ضبط خيارات اللغة فى الـ Microsoft Word0--- (534 مشاهده)
استخدام لوحة المفاتيح في الـ Word0---- (703 مشاهده)
إضافة كلمة سر إلي ملفات الورد دون استخدام برامج0--- (783 مشاهده)
دمج المراسلات0-- (435 مشاهده)
وضع صورة كخلفية للنص0-- (559 مشاهده)
السماح للمستخدمين بتعديل أجزاء من ملف وورد محمي (Word2003)0--- (381 مشاهده)
كتابة الأرقام الكسرية ورموز المعادلات0-- (624 مشاهده)
درس كامل عن الدمج السهل من لوحة المفاتيح ف0-ي برنامج الـ Word (390 مشاهده)
دورة الأكسس: الدرس السادس : منوعات في أكسيس .0--- (1,234 مشاهده)
دورة الأكسيس : الدرس الرابع : العلاقات0---- (659 مشاهده)
أساسيات في Access0--0 (449 مشاهده)
تصميم تقرير لطباعة البيانات0---- (491 مشاهده)
تصميم نموذج استعراض البيانات‏0--تصميم نموذج استعراض البيانات‏0-- (470 مشاهده)
تصميم نموذج إدخال‎ ‎البيانات0--- (557 مشاهده)
إنشاء قوائم خاصة باستخدام الماكرو(1)0-- (435 مشاهده)
خطوات إنشاء الماكرو في تذييل النموذج (2)0-- (369 مشاهده)
خطوات إنشاء الماكرو في تذييل النموذج (1)0- (325 مشاهده)
استعلامات SQL في Access - تعديل الجداول وإضافة الحقول0- (460 مشاهده)
استعلامات SQL في Access - تحديث البيانات الجدولية0-- (415 مشاهده)
الاستعلامات الإجرائية -4 (استعلام الحذف)0--- (214 مشاهده)
الاستعلامات الإجرائية -2 (استعلام الإلحاق)0--- (294 مشاهده)
تصميم تقرير لطباعة الإجمالي0--- (321 مشاهده)
استعلامات التحديد Select Query مع أمثله (1)0--- (425 مشاهده)
اعلانات في الموقع على جميع الصفحات

الجداول (2)

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


هل تذكر ما قلناه عن عدد الخلايا في الصف الواحد؟ إن عدد الخلايا المطلوب يتحدد من خلال كتابة الوسوم <TD> ... <‎/TD> مرات بنفس العدد المطلوب. ومن الممكن أن تحتوي الخلية على أي عنصر من عناصر لغة HTML : نصوص، رسوم، قوائم، وصلات تشعبية، بل وحتى جداول. (نعم، تستطيع إدراج جدول داخل جدول آخر)
 
لنسترجع معا المثال الذي قمنا بالتدرب عليه في الدرس السابق، فسوف نكمل هذا الدرس معه. وهو جدول صغير مكون من ثلاثة صفوف وعمودين (أي خليتين في كل صف).


<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>

 

أما الخصائص المستخدمة مع الخلايا، فهذا جدول بها:
























ALIGN

تحدد محاذاة النص الموجود في الخلية أفقياً، والقيم المستخدمة هي Left, Center, Right

VALIGN

تحدد المحاذاة العمودية للنص، وهو يأخذ القيم Top, Middle, Bottom, Baseline

WIDTH

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

HEIGHT

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

BGCOLOR

تحدد لون خلفية الخلية

COLSPAN

يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها أفقياً


‎<TD COLSPAN="n">‎


حيث n هو عدد الخلايا التي سيتم دمجها

ROWSPAN

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


‎<TD ROWSPAN="n">‎


وبالطبع n هو عدد الخلايا التي سيتم دمجها


 

وقبل أن نستمر، يبدو لي أن هناك بعض الملاحظات المهمة التي ينبغي ذكرها:




  • كما تلاحظ هناك خصائص تتكرر مع جميع الوسوم. خذ مثلاً الخاصية BGCOLOR. كيف يتم التعامل معها إذا كررت مع جميع الوسوم؟ بكل بساطة يتم تطبيق اللون المحدد مع وسم الخلية، فإذا لم يكن محدداً يطبق اللون المحدد مع وسم الصف، فإذا لم يوجد يطبق اللون المحدد مع وسم الجدول. وإذا لم يكن هذا محدداً بدوره يتم إعتماد لون خلفية الصفحة المحدد في الوسم <BODY>.



  • الملاحظة الثانية تتعلق بالخصائص WIDTH, HEIGHT. يختلف أسلوب التعامل مع هذه الخصائص من متصفح لآخر، بل وتختلف أيضاً طريقة تفسير القيم المحددة معها وخصوصاً فيما يتعلق بالنسب المئوية. (راجع الموضوع: الوسوم الخاصة والمتصفحات ).
    وبدون الخوض في تفاصيل هذه الإختلافات التي لن تؤدي إلا إلى المزيد من الإشكالات لديك... وبعد التجربة يبدو أن أفضل طريقة للتعامل مع هذه الخصائص هي قيامك بتحديد العرض (وكذلك الإرتفاع إذا أردت ذلك) للجدول ككل من خلال الوسم <TABLE>. ثم استخدام هذه الخصائص في وسوم الخلايا وتحديد العرض المطلوب لكل خلية على حده في الصف الأول، والارتفاع المطلوب لكل صف في الجدول.
    وهذه برأيي أفضل طريقة تضمن بها أفضل مشاهدة للجدول لجميع زوار موقعك.



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


    <TABLE BORDER="5">



    <TR>



    <TD> Data <‎/TD>


    <‎/TR>

    <TR>



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


    <‎/TR>

    <TR>



    <TD> Data <‎/TD>


    <‎/TR>


    <‎/TABLE>



    لأن هذا ما ستحصل عليه:











    Data
    Data Data
    Data


    لقد بقي مكان الخلايا المحذوفة محجوزاً كما لو أنها لم تحذف. أما الخلايا الباقية فظلت محتفظة بنفس خصائصها، أي أننا لم نستفد من عملية الحذف. والحقيقة أن الطريقة المثلى لذلك هي أن تقوم بدمج الخلايا معاً وذلك باستخدام الخصائص COLSPAN, ROWSPAN.







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


‎<TABLE BORDER="5">‎



<TR>



<TD COLSPAN="2"> Data <‎/TD>


<‎/TR>

<TR>



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


<‎/TR>

<TR>



<TD COLSPAN="2"> Data <‎/TD>


<‎/TR>


<‎/TABLE>











Data
Data Data
Data


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


مثال آخر: لنقم بدمج الخلايا الموجودة في العمود الأول


‎<TABLE BORDER="5">‎



<TR>



<TD ROWSPAN="3"> Data <‎/TD>
<TD> Data <‎/TD>


<‎/TR>

<TR>



<TD> Data <‎/TD>


<‎/TR>

<TR>



<TD> Data <‎/TD>


<‎/TR>


<‎/TABLE>


ومرة أخرى بعد تعريف خاصية الدمج العمودي، قمت بحذف تعريف الخلايا المدموجة من الصف الثاني والثالث. وهذا هو الجدول الناتج.











Data Data
Data
Data






هناك نوع خاص من الخلايا التي يتم تعريفها باستخدام الوسوم <TH> ... <‎/TH> وهي اختصار Table Header أي ترويسة الجدول.
والفرق الوحيد بينها وبين <TD> ... <‎/TD> هو أن النص الذي تحتويه يظهر بخط أسود عريض ومحاذاته في منتصف الخلية بصورة إفتراضية. (ليس بالشيء المهم، كما أعتقد)، خاصة وأن الخصائص المستخدمة معها هي نفس خصائص <TD> وبنفس التفاصيل التي ذكرت.






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


‎<TABLE BORDER="5">‎
    <CAPTION> Table Caption <‎/CAPTION>



<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>














Table Caption
Data Data
Data Data
Data Data



درس الجداول (2)

أضف هذه المادة في موقعك:
مواد مشابهة:
bالدرس الحادي عشر bالدرس الحادي عشر
الدرس الحادي عشر
(مرات المشاهدة: 60 مرات)
أشكال الجداول في الـHTML أشكال الجداول في الـHTML
أشكال الجداول في الـHTML
(مرات المشاهدة: 107 مرات)
الدرس التاسع الدرس التاسع
الدرس التاسع
(مرات المشاهدة: 39 مرات)
الإطارات (2) الإطارات (2)
الإطارات (2)
(مرات المشاهدة: 106 مرات)
الويب واللغة العربية الويب واللغة العربية
الويب واللغة العربية
(مرات المشاهدة: 108 مرات)
وسوم META ومحركات البحث وسوم META ومحركات البحث
وسوم META ومحركات البحث
(مرات المشاهدة: 109 مرات)
أنواع المتغيرات في الجافاسكريبت ج أنواع المتغيرات في الجافاسكريبت ج
أنواع المتغيرات في الجافاسكريبت ج
(مرات المشاهدة: 75 مرات)
 الخطــوط وكيفية تنسيقها الخطــوط وكيفية تنسيقها
الخطــوط وكيفية تنسيقها
(مرات المشاهدة: 101 مرات)
الدرس الثالث: العناصر والوسوم الدرس الثالث: العناصر والوسوم
الدرس الثالث: العناصر والوسوم
(مرات المشاهدة: 71 مرات)
الوصلات التشعبية2 الوصلات التشعبية2
الوصلات التشعبية2
(مرات المشاهدة: 66 مرات)
fot
جميع الحقوق محفوظة :Copyright © All rights reserved