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

توقفنا في«
الفصل السابق عند كيفيه إنشاء جدول وتعرفنا
علي وسوم و الخصائص الخاصه به و في هذا الفصل سنقوم بشرح خصائص الخلايا وبعض
الأشياء المتقدة في إستخدام الجداول .
خصائص الخلايا
ونتكلم الآن عن الخصائص المستخدمة مع وسوم الصف <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>
عنوان الجدول هنا
بيانات
|
الجدول |
تضع |
هنا |
الدرس التالي»»»

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