الصفحة الرئيسية
الصفحة الرئيسيه المرجع الكامل كتب وبرامج مجانية المنتدي  مواقع هامه

الجداول المتقدمة

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

فهرس الصفحة

[ خصائص الجدول | ALIGN | VALIGN | BGCOLOR  | WIDTH | HEIGHT | COLSPAN | ROWSPAN | CAPTION]

خصائص الخلايا

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

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

<TD ALIGN="LEFT">
<TD ALIGN="RIGHT">

right

Center

Left

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

‎<TR VALIGN="MIDDLE">‎
‎<TR VALIGN="TOP">‎
<TR VALIGN="BOTTOM">‎

bottom top middle


BGCOLOR لتحديد لون الخلفية للخلايا التي يتكون منها الصف. وهنا يتم تجاهل لون الخلفية المحدد ضمن وسم <TABLE> ويتم تطبيق اللون المحدد هنا في هذه الخاصيه .و تستطيع أيضا أختيار اللون أما بالأسماء أو عن طريق الHEX كود

‎<TR BGCOLOR="#4682B4">‎
‎<TR BGCOLOR="#0099CC">‎

هذا هو لون خلفيه الجدول الأساسي    

كما تستطيع ايضا ان تضع صورة في الخلفيه للخلايا

‎<TR BGCOLOR="face.gif">‎

كما يمكنك أن تكتب فوق الصورة

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

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

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

<TD COLSPAN="n">‎

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

<tr>
<td colspan="3">هاي أنا هنا أكثر وسعا </td>
</tr>
<tr>
<td align="center">يا اللعنه </td>
<td align="center">نحن </td>
<td align="center">لا !!!</td>
</tr>

هاي أنا هنا أكثر وسعا
يا اللعنه نحن لا !!!


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

<TD ROWSPAN="n">‎
وبالطبع n هو عدد الخلايا التي سيتم دمجها

<TABLE BORDER="1" ALIGN="RIGHT" WIDTH="200">
<TR>
<TH ROWSPAN="2">مممم<BR>واو</TH>
<TH>الجزء العلوي</TH>
</TR>
<TR><TH>الجزء السفلي</TH>
</TR>
</TABLE>

مممممم....‍‍‍‍
واووو

الجزء العلوي
الجزء السفلي

CAPTION

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

‎<TABLE>‎
<CAPTION> عنوان الجدول هنا</CAPTION>
<TD>بيانات</TD>
<TD>الجدول</TD>
<tr>
<TD>تضع</TD>
<TD>هنا </TD>
</tr>
</table>

عنوان الجدول هنا

بيانات

الجدول
تضع هنا

 

الدرس التالي»»»

< الصفحة الرئيسيه | المرجع الكامل | الجداول >

 

المصدر العربي التعليمي للـHTML

¤  المحتويات 

البدايه هنا
أبدأ هنا ·
دروس سريعة للمبتدئين ·

الدروس المتخصصه
النص ·
الصور ·
الجداول ·
الأطر ·
النماذج ·

 
فهرس الجداول  ¤

> أساسيات الجداول
> الجداول المتداخله والمستديرة

 

¤  Html4Arab صندوق الأدوات

> إبحث في الموقع  Search


Html4Arab بحث المصدر العربي التعليمي لل HTML يأتيكم من [Atomz.com] بحث متقدم


أشترك في القائمة البريدية
لتحصل علي آخر آخبار
الموقع و التحديثات

أشترك إلغاء الإشتراك

> أخبر صديقك عن الموقع

هل أعجبت بموقعنا


أذن أضفنا إلي المفضله <


مستخدمين ال Netscape أضغط CTRL+D

 
" إعلانات "


برعاية شبكة هايل

^ أعلي^ للإعلان بالموقع اربط بموقعنا أتصل بنا

© 2002 Ahmed Salah