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

وهذا شكل وترتيب الجدول

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

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

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

• عمل جدول بلغة html
• طريقة عمل جدول بلغة html
• كيفية عمل جدول بلغة ال html
• عمل الجداول بلغة html
• Tfoot في لغة HTML
• تحكم في الجداول
• كود لوضع جدول في لغة الhtml
• عمل جداول بلغة html
• طريقة عمل جدول html
• درس في html كيفيه عمل جدول