دروس في لغةhtml

درس كيفية التحكم فى الجداول فى لغة HTML – الدرس الرابع عشر

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

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

نستخدم خاصية border لتحديد حجم حدود الجدول

مثال على ذلك

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



<table border="1">
<tr>
<td>
الخلية الاولى فى الصف الاول
</td>
<td>
الخلية الثانية فى الصف الاول
</td>
</tr>
<tr>
<td>
الخلية الاولى فى الصف الثانى
</td>
<td>
الخلية الثانية فى الصف الثانى
</td>
</tr>
</table>

هنا قمنا باعطاء قيمة لحدود الجدول وهى 1
ويهكون بهذه النتيجة
الخلية الاولى فى الصف الاول الخلية الثانية فى الصف الاول
الخلية الاولى فى الصف الثانى الخلية الثانية فى الصف الثانى

يمكن تغيير حجم الحدود كما تشاء يمكنك ان تستبدل القيمة 1 باى قيمة اخرى تريدها

طيب اذا اردنا ان نظهر الحدود الرأسية او الافقية بداخل الجدول فقط .
نستخدم فى هذه الحالة العنصر rules ومعه القيمة rows لظهور الحدود الافقية داخل الجدول والعنصر cols لظهور الحدود الرأسية والعنصر all لتظهر جميع الحدود
وهذا مثال

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57



الافقية
<table border="1" rules="rows">
<tr>
<td>
الخلية الاولى فى الصف الاول
</td>
<td>
الخلية الثانية فى الصف الاول
</td>
</tr>
<tr>
<td>
الخلية الاولى فى الصف الثانى
</td>
<td>
الخلية الثانية فى الصف الثانى
</td>
</tr>
</table>
الرأسية
<table border="1" rules="cols">
<tr>
<td>
الخلية الاولى فى الصف الاول
</td>
<td>
الخلية الثانية فى الصف الاول
</td>
</tr>
<tr>
<td>
الخلية الاولى فى الصف الثانى
</td>
<td>
الخلية الثانية فى الصف الثانى
</td>
</tr>
</table>
جميع الحدود
<table border="1" rules="all">
<tr>
<td>
الخلية الاولى فى الصف الاول
</td>
<td>
الخلية الثانية فى الصف الاول
</td>
</tr>
<tr>
<td>
الخلية الاولى فى الصف الثانى
</td>
<td>
الخلية الثانية فى الصف الثانى
</td>
</tr>
</table>

وتكون النتيجة بهذا الشكل
الافقية
الخلية الاولى فى الصف الاول الخلية الثانية فى الصف الاول
الخلية الاولى فى الصف الثانى الخلية الثانية فى الصف الثانى

الرأسية
الخلية الاولى فى الصف الاول الخلية الثانية فى الصف الاول
الخلية الاولى فى الصف الثانى الخلية الثانية فى الصف الثانى

جميع الحدود
الخلية الاولى فى الصف الاول الخلية الثانية فى الصف الاول
الخلية الاولى فى الصف الثانى الخلية الثانية فى الصف الثانى
كيف نقوم بعمل عنوان للجدول فى لغة HTML

يمكنك عمل عنوان للجدول باستخدام الوسم caption

وهذا مثال عليه

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



<table border="1">
<caption>هنا عنوان الجدول</caption>
<tr>
<td>
الخلية الاولى فى الصف الاول
</td>
<td>
الخلية الثانية فى الصف الاول
</td>
</tr>
<tr>
<td>
الخلية الاولى فى الصف الثانى
</td>
<td>
الخلية الثانية فى الصف الثانى
</td>
</tr>
</table>

وتكون النتيجة كالتالى
هنا عنوان الجدول الخلية الاولى فى الصف الاول الخلية الثانية فى الصف الاول
الخلية الاولى فى الصف الثانى الخلية الثانية فى الصف الثانى
كيف يمكن تحديد رأس العمود فى الجدول فى لغة HTML

يمكننا تحديد راس العمود باستخدام الوسم TH وهو اختصار لـ table heading اى راس الجدول وهو يستخدم للتعريف بالبيانات التى فى العمود التى ترأسه وهى تستخدم بدل الوسم TD
وهذا مثال على وظيفة هذا الوسم
سنضرب مثال هنا بعرض نتائج لقائات فريقين

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47



<table border="1">
<caption>نتائج لقاءات فريقين </caption>
<tr>
<th>
المباريات
</th>
<th>
الفريق الاول
</th>
<th>
الفريق الثانى
</th>
</tr>
<tr>
<td>
المباراة الاولى
</td>
<td>
1
</td>
<td>
0
</td>
</tr>
<tr>
<td>
المباراة الثانية
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
<tr>
<td>
المباراة الثالثة
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
</table>

وهيكون بهذا الشكل
نتائج لقاءات فريقين المباريات الفريق الاول الفريق الثانى
المباراة الاولى 1 0
المباراة الثانية 2 3
المباراة الثالثة 0 0
كيف يتم تقسيم الجداول فى لغة HTML

يتم تقسيم الجداول باستخدام الاوسمة التالية
thead لمحتويات راس الجدول
tfoot يتم استخدامها لمحتويات ذيل الجدول
tbody لمحتويات الجدول من الداخل مابين الراس والذيل
ويتم كتابتهم قبل الوسم tr
كالتالى

1
2
3
4



<thead>
<tr>
</tr>
</thead>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28



<table border="1">
<thead>
<tr>
<td>
راس الجدول
</td>
</tr>
</thead>
<tfoot>
<tr>
<td>
ذيل الجدول
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
محتوى الجدول
</td>
</tr>
<tr>
<td>
محتوى الجدول
</td>
</tr>
</tbody>
</table>

ويكون بهذا الشكل
راس الجدول
ذيل الجدول
محتوى الجدول
محتوى الجدول

اذا كتبنا مثل هذا الكود بدوس استخدام هذه الاوسمة ستظهر كما هو ترتيب كتابة الخلايا
كالكود التالى

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



<table border="1">
<tr>
<td>
راس الجدول
</td>
</tr>
<tr>
<td>
ذيل الجدول
</td>
</tr>
<tr>
<td>
محتوى الجدول
</td>
</tr>
<tr>
<td>
محتوى الجدول
</td>
</tr>
</table>

وهذا شكل وترتيب الجدول
راس الجدول
ذيل الجدول
محتوى الجدول
محتوى الجدول

اكيد لاحظت الفرق

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