درس انشاء الجداول فى لغة 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

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

• عمل جدول html
• الجداول بلغة html
• الجداول في لغة html
• دمج الخلايا html
• لغة Html الجداول
• انشاء جدول html
• جداول html
• كيفية عمل جدول بلغة html
• عمل جدول في html
• الجدول في لغة html
• كيف ادمج الخلايا بالاكواد
• انشاء الجداول html
• الجداول في html
• تصميم الجداول في html
• عمل جدول ب html

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

الاوسمة: HTML, الجداول فى HTML, انشاء الجداول, انشاء الجداول HTML, درس, دروس, دورة HTML, لغة HTML

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