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

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

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

نبدأ الدرس

كيف نقوم بتحديد مساحة الجدول فى لغة 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 كما هو مكتوب بداخل الخلاليا فى الجدول التالى

كيف يتم وضع لون كخلفية للجدول فى لغة 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

كلمات البحث الواردة:

• كيف يتم اضافة النصوص الى الجدول
• كيفية التحكم بحدود الجدول وخلفية الخلايا
• طريقة تحديد طول الجداول HTML
• اكواد لعمل الجداول في لغة HTML
• درس كيفية التحكم فى الجداول فى لغة HTML – الدرس الخامس عشر
• اكواد تقسيم جدول فيhtml
• المساحة فى لغة HTML
• خلفيه للجدول
• كيفية اضافة تعليق في خلايا الجدول
• وضع جدول بلغة html
• كيفية التحكم بارتفاع خلفية html
• كود خلفية للجدول
• كيفية اضافة خلفيه في لغة افةم
• كيفية التحكم بحدود الجداول والخلفية (جداول وحدود
• كيفية إضافة محتوى الجدول

مدونات عشوائيه

الاوسمة: HTML, اضافة خلفية للجدول, الجداول, الجداول فى HTML, جدول, درس, دروس, دورة HTML, مساحة الجدول

التصنيف: دروس html