|
الدرس الخامس
الجدوال
تعد الجدوال من أقوى الأدوات التي تتضمنها لغة
HTML
ولا يوجد موقع على الانترنت اٍلاّ ويستخدمها بصورة أو بأخرى . ووضع الجداول
في صفحات ويب لا يقتصر على تلك القوائم من البيانات التي يحتاج لترتيبها في
صفوف وأعمدة , بل يتعدى ذلك الى استخدامها في تصميم صفحات نفسها وتنظيمها
والتحكم بمظهرها بصورة قوية وفعالة لا يمكن اداؤها مهما استخدمنا رسوم خاصة
بتنسيق الصفحات .
الجدول عبارة عن صفوف وأعمدة,
وتقاطع عمود Column
مع سطر Row
يدعى Cell
خلية والخلية يمكن أن تحتوي على أي
Object ( نص
– صورة – صوت .....).www.tartoos.com
يمكن أن يأخذ الجدول أي خلفية
وخلفيته تطغى على خلفية الصفحة . وكذلك كل خلية يمكن أن تأخذ خلفية وخلفية
الخلية تطغى على خلفية الجدول .
ان المؤثر المسؤول عن تعريف الجدول هو :
>
/TABLE
<
......>
TABLE
<
Table Row
مؤثر تعريف الصفحة في الجدول :
>
/TR
<
…..
>
TR
<
Table Data
مؤثر وتعريف الخلايا في الصف
< TD > Cell Data <
/TD >
وتعريف
محتويات كل خلية .
لنفرض أنه لدينا جدول مؤلف من
ثلاثة صفوف :
<
TABLE
>
< TR >
<
/TR
>
< TABLE
>
< TR >
<
TR >
< /TR >
<
TD > data < /TD >
< TR >
<
TD > data < /TD >
< /TR >
<
/TR >
<
/TABLE >
< TR >
<
TD > data < /TD >
< TD > data < /TD >
<
/TR >
< TR >
<
TD > data < /TD >
< TD > data < /TD > < /TABLE >
فرضنا أن
عدد الخلايا هو 2
في كل صف وبالتالي يكون
عدد
الأعمدة هو 2
.
BORDER
:
وهو بارامتر ل < TABLE >
مسؤول عن اٍضافة حدود للجدول وتحديد سماكتها والقيمة الإفتراضية لها هي صفر
أي لا حدود :
سماكة الحدود تقاس بالبيكسل
>
"5"=BORDER
TABLE
<
< TABLE BORDER =”0”>
WIDTH
:
وهذا البارامتر يستخدم لتحديد عرض الجدول
ككل , وهناك أسلوبين لتحديد العرض :
أسلوب مطلق أي بكتابة الرقم
الذي يمثل العرض بصورة مباشرة .
أسلوب نسبي أي كتابة رقم نسبي
مئوي يحدد عرض الجدول حسب عرض نافذة المتصفح . ( أي أن عرض الجدول سيختلف
باختلاف عرض نافذة المتصفح ) .
www.tartoos.com
<
TABLE WIDTH = “ 600 “ >
<
TABLE WIDTH= “ 60% “ >
HEIGHT
:
وهذا البارامتر مسؤول عن تحديد ارتفاع
الجدول من خلال قيمة مطلقة تحدد الارتفاع بالبيكسل . أو قيمة نسبية تحدد
ارتفاع الجدول بالنسبة لارتفاع صفحة المتصفح :
<
TABLE HEIGHT = " 400 " >
<TABLE HEIGHT = " 90% " >
اٍذاً عرض الجدول افتراضي حسب حجم النص في الخلايا . أما
لتحديد عرض الجدول نستخدم البارامترين السابقين
WIDTH
أو HEIGHT
.
CELLSPACING
: هذا البارامتر يحدد
المسافة بين الجدول :<
TABLE CELLSPACING = " 15 " >
CELLPADDING
:
لتحديد بعد العنصر عن حواف خلايا الجدول أي لتحديد المسافة الفاصلة بين
الحدود وبداية النص في كل خلية ( أي تحديد هوامش الخلايا ) :
< TABLE CELLPADDING = " 10 "
>
ALIGN
هذا البارامتر يحدد محاذاة الجدول أفقياً على الصفحة يميناً أو يساراً وهو
يأخذ القيم Center – Right –
Left :
<TABLE ALING = " Left " >
<TABLE
ALING = " Right " >
<TABLE ALING = " center" >
BG Color
:
يحدد لون خلفية الجدول
:
< TABLE BG
COLOR="#00ffff" >
خصائص المؤثر
<TR >
:
ALIGN
:
يقوم بتحديد النص أفقياً داخل الخلايا التي يتكون منها الصف والقيم المحتملة
لها هي Left –Right
Center
والقيمة الإفتراضية هي
Center
< TR ALIGN = "
Left " >
VALIGN
: وهذا البارامتر يحدد
المحاذاة العمودية للنص داخل الخلايا وذلك اٍما للأعلى أو للأسفل أو في
المنتصف , أو أعلى امتداد الخط الأساسي للخلية وله عدة قيم :TOP
– BOTTOM – MIDDLE – BASELINE
BGCOLOR
:
مسؤول عن تحديد لون الخلفية للخلايا التي يتكون منها الصف . وهنا يتم تجاهل
لون الخلفية المحدد ضمن المؤثر
< TABLE >
ويتم تطبيق اللون المحدد هنا
:< TR BG
COLOR = " # 808080 " >
البارمترات
المستخدمة مع الخلايا :
اٍنّ عدد الخلايا المطلوب في الصف الواحد يتحدد من خلال كتابة
المؤثر < TD > …. </TD >
عدة مرات بنفس العدد المطلوب , ومن الممكن أن تحتوي الخلية على أي عنصر من
عناصر HTML
: نصوص – رسوم – قوائم – وصلات تشعبية وجداول أيضاً ( نعم يمكن ادراج جدول
ضمن جدول ) .
ALIGN
:
هذا البارامتر يحدد
محاذاة النص الموجود في الخلية أفقياً , والقيم المستخدمة هي :
Right – Center – Left
:
<TD
ALIGN = " Left " >
VALING
: يحدد المحاذاة العمودية
للنص داخل الخلايا ويأخذ القيم :
TOP – MIDDLE – BOTTOM – BASELINE
<
TD VALIGN = " MIDDLE " >
WIDTH
:
يحدد عرض الخلية وذلك بكتابة القيمة
المباشرة للعرض المطلوب بالبيكسل أو بكتابة رقم يمثل النسبة المئوية , ويكفي
تحديد العرض للخلايا في أحد الصفوف لكي يتم تطبيقه على كل الخلايا في كل
الصفوف .
HEIGH
: يحدد الارتفاع المطلوب
للخلية في الصف وذلك بالطرق المباشرة أو النسبية . وتحديد ارتفاع الخلايا في
الصف يؤدي الى تطبيقه في كل الخلايا فيه .
<
TD WIDTH = " 300 " >
<
TD WIDTH = 30% " >
<
TD HEIGHT = " 500 " >
<
TD HEIGHT = " 90% " >
BGCOLOR
:
يحدد لون خلفية الخلفية
<
TD BGCOLOR = " 303030 " >
COLSPAN
:
يحدد عدد الأعمدة التي تمتد عليها الخلية أي يقوم بدمج الخلية مع العدد
المطلوب من الخلايا التي تليها أفقياً
<
TD COLSPAN =" n " >
حيث
n
عدد الخلايا التي سيتم دمجها .
ROWSPAN
: يحدد عدد الأسطر التي
تمتد عليها الخلية أي يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا
التي تليها عمودياً ( أي أسفلها )
<
TD ROWSPAN = " N " >
حيث
n
عدد الخلايا التي سيتم دمجها .www.tartoos.com
ملاحظات :
-
يختلف أسلوب التعامل مع البارامترات
WIDTH
و HEIGHT
من متصفح لآخر , بل وتختلف طريقة تفسير القيم المحددة معها وخصوصاً فيما
يتعلق بالنسبة المئوية .
لذلك أفضل طريقة للتعامل مع البارامترات هي تحديد العرض وكذلك
الارتفاع للجدول ككل من خلايا المؤثر
< TABLE >
ثم استخدام هذه البارامترات مع مؤثرات الخلايا وتحديد العرض المطلوب لكل خلية
والارتفاع المطلوب لكل صف .
-
هناك نوع خاص من الخلايا التي يتم تعريفها من خلال المؤثر
< TH > …</TH >
وهو اختصار ل Table headie
والفرق الوحيد بينها وبين
< TD
> هو أن النص الذي يحتويه
يظهر بخط أسود عريض ومحاذاته في منتصف الخلية بصورة افتراضية .
-
المؤثر
<
CAPTION > …< /CAPTION >
وهو مختص باٍضافة عنوان رئيسي للجدول ككل , لذلك فهو عندما يكتب يتم وضعه
مباشرة بعد المؤثر
< Table >
وبصورة مستقلة وليس ضمن مؤثرات الصفوف أو الخلايا .
<
TABLE BORDER = " 5 " >
<
CAPTION > Table caption </CAPTION > .
-
BACKGROUND
لوضع خلفية للصفحة ( صورة ) .
> " اسم
الصورة "
=
BACKGROUND
BODY
<
-
BACKGROUND
لوضع صورة كخلفية للجدول :
> " اسم
الصورة " = BACKGROUND
TABLE
<
- BACKROUND
لوضع صورة كخلفية للخلية :
> " اسم
الصورة " =
TD BACKROUND
<
www.tartoos.com
|
