دروس في لغةhtml

درس كيفية اضافة خلفية للجدول والتحكم فى مساحة الجداول – الدرس الخامس عشر

السلام عليكم ورحمة الله وبركاته

فى هذا الدرس سوف نقوم ان شاء الله بشرح كيفية التحكم فى ابعاد الجدول الطول والعرض وايضا كيفية اضافة لون كخلفية للجدول والتحكم فى مساحة التباعد بين حدود الجدول وحدود الخلايا بداخلة
وبين حدود الخلايا وما يوجد بداخل الخلايا وايضا محاذاة ما بداخل الجدول الى اليمين واليسار والوسط

نبدأ الدرس
كيف نقوم بتحديد مساحة الجدول فى لغة HTML

يمكننا تحديد عرض وارتفاع الجدول باستخدام العنصر width للعرض والعنصر height للارتفاع
كالمثال التالى

1
2
3
4
5
6
7



<table border="1" width="350" height="200">
<tr>
<td>
محتوى الجدول
</td>
</tr>
</table>

هنا جعلنا عرض الجدول 350 بيكسل والارتفاع 200 بيكسل
وسيكون بهذا الشكل
محتوى الجدول
كيف نقوم بتحديد مساحة الخلية فى الجدول

نقوم بتحديد مساحة الخلية مثل الجدول بالضبط باستخدام العنصر width للعرض والعنصر height للارتفاع
كالكود التالى

1
2
3
4
5
6
7
8
9
10



<table border="1" width="350" height="200">
<tr>
<td width="250" height="200">
250*200
</td>
<td width="100" height="200">
100*200
</td>
</tr>
</table>

هنا قمنا بتحديد مساحة الخليتين الاولى بعرض 250 وارتفاع 200 والثانية 100 والارتفاع 200 كما هو مكتوب بداخل الخلاليا فى الجدول التالى
250*200 100*200
كيف يتم وضع لون كخلفية للجدول فى لغة HTML

يتم وضع لون كخلفية للجدول بواسطة العنصر bgcolor
كما هو فى المثال التالى

1
2
3
4
5
6
7



<table border="1" width="200" height="100" bgcolor="#ff0000">
<tr>
<td>
محتوى الجدول
</td>
</tr>
</table>

هنا كتبنا الوسم bgcolor واعطيناه القيمة #ff0000 وهو اللون الاحمر ويمكن كتابة red بدل من هذا الكود للون او يمكن كتابة اى لون آخر مثل blue او black وهكذا او التغيير فى كود اللون السداسى عشر كما تشاء حتى تحصل على الخلفية التى تريدها للجدول وهذا نتيجة المثال السابق
محتوى الجدول
كيف نقوم وضع لون خلفية للخلية بداخل الجدول

نقوم بهذا مثل الجدول باستخدام الوسم bgcolor

وهذا مثال

1
2
3
4
5
6
7
8



<table border="1" width="350" height="200" bgcolor="#ff0000">
<tr>
<td bgcolor="#ff0000">
</td>
<td bgcolor="#0000ff">
</td>
</tr>
</table>

فى هذا المثال جعلنا لون خلفية الجدول اخضر وقمنا بعمل خليتين احدهما باللون الاحمر والاخرى بالازرق كما فى الشكل التالى

كيف نقوم بعمل تباعد بين حدود الجدول وحدود الخلية

يمكننا عمل تباعد بين الجدول وحدود الخلية باستخدام العنصر cellspacing

مثال

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19




<table border="1" width="300" height="120" cellspacing="20">
<tr>
<td>
مدونة اليكس
</td>
<td>
مدونة اليكس
</td>
</tr>
<tr>
<td>
مدونة اليكس
</td>
<td>
مدونة اليكس
</td>
</tr>
</table>

هنا قمنا بكتابة العنصر cellspacing تابعا للوسم table واعطيناه القيمة 20 بيكسل ويمكنك تعديل انت القيمة كما تريد ولقد جعلناها كبيرة لكى يكون المثال واضج
وتكون هذه النتيجة
مدونة اليكس مدونة اليكس
مدونة اليكس مدونة اليكس
كيف نقوم بعمل تباعد بين حدود الخلية ومحتواها

يمكننا عمل تبادل بين حدود الخلية ومحتواها باستخدام العنصر cellpadding

ويستخدم كما فى المثال التالى

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18



<table border="1" width="300" height="120" cellpadding="20">
<tr>
<td>
مدونة اليكس
</td>
<td>
مدونة اليكس
</td>
</tr>
<tr>
<td>
مدونة اليكس
</td>
<td>
مدونة اليكس
</td>
</tr>
</table>

وهنا قمنا بما قمنا به فى المثال السابق كتبنا العنصر cellpadding واعطيناه القيمة 20
وتكون هذه النتيجة
مدونة اليكس مدونة اليكس
مدونة اليكس مدونة اليكس

ويمكننا استخدام العنصرين معا كما فى المثال التالى

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18



<table border="1" width="300" height="120" cellpadding="20" cellspacing="20">
<tr>
<td>
مدونة اليكس
</td>
<td>
مدونة اليكس
</td>
</tr>
<tr>
<td>
مدونة اليكس
</td>
<td>
مدونة اليكس
</td>
</tr>
</table>

وتكون بهذه النتيجة
مدونة اليكس مدونة اليكس
مدونة اليكس مدونة اليكس

يمكنك تجربتها وستظهر معك بشكل اوضح
كيف يمكننا تحديد محاذاة النص بداخل الجدول افقيا

يمكننا تحديد محاذاة النص بداخل الجدول باستخدام العنصر align
ويمكننا ايضا تحديد محاذاة الصور بنفس الطريقة التى سنشرحها
يتم كتابة الوسم align واعطاءه احد القيم التالية
right اى محاذاة لليمين
left محاذاة لليسار
center محاذاة للوسط

وهذا مثال

1
2
3
4
5
6
7
8
9
10
11
12
13



<table border="1" width="350" height="100">
<tr>
<td align="right">
يمين
</td>
<td align="center">
وسط
</td>
<td align="left">
يسار
</td>
</tr>
</table>

وتكون بهذا الشكل
يمين وسط يسار
كيف يمكننا تحديد محاذاة النص بداخل الجدول راسيا

يمكننا تحديد محاذاة النص بداخل الجدول راسيا باستخدام العنصر valign
ويستخدم معه القيم التالية
TOP اى محاذاة للاعلى
MIDDLE محاذاة للوسط
BOTTOM محاذاة لاسفل

ويكون الكود بهذا الشكل

1
2
3
4
5
6
7
8
9
10
11
12
13



<table border="1" width="350" height="100">
<tr>
<td valign="TOP">
اعلى
</td>
<td valign="MIDDLE">
وسط
</td>
<td valign="bottom">
اسفل
</td>
</tr>
</table>

ويكون بهذا الشكل
اعلى وسط اسفل

ويمكنك استخدام العنصرين معا align للمحاذاة افقيا و valign للمحاذاة راسيا

وهذا مثال على ذلك

1
2
3
4
5
6
7
8
9
10
11
12
13



<table border="1" width="350" height="100">
<tr>
<td align="right" valign="TOP">
اعلى اليمين
</td>
<td align="center" valign="MIDDLE">
وسط وسط
</td>
<td align="left" valign="bottom">
اسفل اليسار
</td>
</tr>
</table>

ويكون بهذا الشكل
اعلى اليمين وسط وسط اسفل اليسار

وبهذا نكون قد انتهينا من هذا الدرس وفى الدرس القادم ان شاء الله سوف نقوم بشرح الاطارات فى لغة HTML