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

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

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

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

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

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

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

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

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>

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

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