دروس في لغةhtml

درس انشاء الجداول فى لغة HTML – الدرس الثالث عشر
فيما تستخدم الجداول فى لغة HTML

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

نقوم باستخدام الوسم Table لانشاء جدول فى لغة HTML

الكود

1
2
3



<table>
محتوى الجدول
</table>

هنا قمنا بعمل الجدول ولكن كيف نقوم بتقسيم الجدول الى صفوف و خلايا
كيف نقوم بانشاء صفوف وخلايا فى الجداول باستخدام لغة HTML
انشاء صفوف الجداول فى لغة HTML

نقوم بانشاء الصفوف فى لغة HTML باستخدام الوسم TR
فهو يتم كتابته بعد الوسم Table مباشرة لكى يتم الكتابة فى اول صف
مثال

1
2
3
4
5
6
7
8



<table>
<tr>
الصف الاول
</tr>
<tr>
الصف الثانى
</tr>
</table>

والنتيجة
الصف الاول
الصف الثانى

هنا قمنا بانشاء صفين
لذلك قمنا بكتابة الوسم tr مره واغلقناه للنهى الصف الاول ثم قمنا بكتابته مرة اخرى لنبدأ الكتابة فى الصف الثانى واذا اردنا اكثر من صف نقوم بتكرار هذا
انشاء خلايا فى الجداول فى لغة HTML

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

مثال

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



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

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

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

فى لغة HTML يمكنك التحكم فى عدد الخلايا فى كل صف باستخدام الكود التالى

td colspan=

حيث ان TD هو وسم انشاء الخلية و colspan لدمج الخلايا الافقية ببعضها لتظهر خلية واحدة فقط وتضع بعد علامة = قيمة عدد الخلايا التى تريد دمجها سواء 2 او اكثر

وهذا مثال

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



<table>
<tr>
<td colspan="2">
الخلية المدمجة
</td>
</tr>
<tr>
<td>
الخلية الاولى فى الصف الثانى
</td>
<td>
الخلية الثانية فى الصف الثانى
</td>
</tr>
</table>

ونلاحط هنا اننا عندما دمجنا الخليتين قمنا بكتابة كود واحد فقط وهو td colspan=”2 وبعد ان اغلقناه لم نقم بكتابة كود آخر للخلية الثانية
وتكون بهذا الشكل
الخلية المدمجة
الخلية الاولى فى الصف الثانى الخلية الثانية فى الصف الثانى
كيفية دمج الخلايا الرأسية فى الجدول

لدمج الخلايا الراسية لتكوين عامود نقوم باستخدام rowspan بدلا من colspan ونحدد لها عدد الخلايا التى نريد دمجها

مثال

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




<table>
<tr>
<td rowspan="2">
الخلية المدمجة راسيا
</td>
<td>
الخلية الثانية فى الصف الثانى
</td>
</tr>
<tr>
<td>
الخلية الثانية فى الصف الثانى
</td>
</tr>
</table>

هنا قمنا بمثل ما فعلناه فى دمج الخلايا الافقية ولكن فى الخلايا الافقية لم نقم بكتابة كود الخلية الثانية التى فى نفس الصف ولكن هنا كتبنا كود td rowspan=”2″ لدمج خليتين افقيتين ثم بعد اغلاق وسم TD قمنا بكتابة وسم TD آخر لانشاء خلية اخرى فى نفس السطر وعندما قمنا بكتابة وسم TR لم نقم بكتابة وسم TD لانشاء اول خلية ولكن كتبنا وسم لانشاء الخلية الثانية

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

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

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