التخطي إلى المحتوى
561561651651-800x600 الجداول في لغة html
الجداول في لغة html

كثير ما يشاهد بعض المستخدمين عند الدخول إلى مواقع معينة ظهور الجداول كجداول تشرح خطة بيانات او خدمات تحتوي على عدة مزايا او لعرض بيانات و درجات الطلاب

فالجداول تتكون في الأساس من صفوف و اعمدة كالشكل التالي

1651561 الجداول في لغة html

بداية الجدول يبدأ بوسمين اساسيين هما 1-6-300x59 الجداول في لغة html   و هاذين الوسمين يقع بينهم محتويات الجدول فبالنسة للصف فوسميه هما 2-5-300x95 الجداول في لغة html   و يمكن تكرار هذين الوسمين من اجل تكرار الصفوف او السطور و بين كل وسمين صف يقع وسمين العامود 3-4-300x92 الجداول في لغة html   و يمكن تكرار هذين الوسمين من اجل تكرار الأعمدة في الصف الواحد و من اجل ان يكون اول صف كلماته مختلفة عن الصفوف التي تليه او تكون مميزة ستكون الأعمدة في الصف الاول تمثل بالوسمين 8-1-300x52 الجداول في لغة html   لكل عامود و لتوضيح معنى الصف و العامود فالصف لونه ازرق و العامود لونه احمر كما في الصورة التالية

4-2 الجداول في لغة html

و من اجل يصبح في كل سطر او صف نفس الأعمدة في الصف الذي يليه يجب ان يكون عدد وسوم الأعمدة مع وسوم نهايتها هو نفسه بين كل وسم صف و نهايته

مثال على كلامي هذه اكواد الجدول في الصورة السابقة

<!DOCTYPE html>
<html>
<head>
<meta content=”text/html; charset=windows-1256″ http-equiv=”Content-Type” />
</head>
<body>
<table border=”1″ width=”400px”>
<tr>
<th>الأسم</th>
<th>المادة</th>
<th>الدرجة</th>
</tr>
<tr>
<td>أحمد</td>
<td>رياضيات</td>
<td>90</td>
</tr>
<tr>
<td>بسام</td>
<td>رياضيات</td>
<td>95</td>
</tr>
<tr>
<td>رامز</td>
<td>رياضيات</td>
<td>80</td>
</tr>
<tr>
<td>سامر</td>
<td>رياضيات</td>
<td>100</td>
</tr>
</table>
</body>
</html>
  • بالنسبة لتنسيق الجدول هنالك كثير من الأفكار يمكن عملها بالإستعانة بلغة css لكن نحن عندما نتعلم لغة html سيوجد بعض من اكواد للتنسيق مثلاً اذا اردنا وضع حدود للجدول كما في صورة الجدول السابقة حيث الجدول بدون حدود كهذه الصورة

7-1-300x269 الجداول في لغة html

فمن اجل وضع الحدود ينبغي وضع الكود التالي 5-2 الجداول في لغة html   داخل الوسم <table> بعد كلمة table ليصبح الوسم كالتالي

<table border=”1″>
  • و لتحديد عرض الجدول نقوم بوضع الكود 6-1-300x44 الجداول في لغة html  بعد كلمة table في الوسم <table> و يمكن جمع كودي حدود الجدول و عرض الجدول في نفس الوسم <table>
<table border=”1″ width=”400px”>
  • بعد هذه الدورة قد يفيد تقسيم الجدول إلى ثلاث اقسام بعض الأحيان مع لغة css فالقسم الأول يمكن عمله بوضع مثلاً او صف بين الوسمين 9-3-300x41 الجداول في لغة html   و باقي الصفوف ما عدا الصف الآخير بين الوسمين 10-1-300x41 الجداول في لغة html   و الصف الآخير يوضع بين الوسمين 11-3-300x44 الجداول في لغة html   لتكون النتيجة على النحو التالي
<!DOCTYPE html>
<html>
<head>
<meta content=”text/html; charset=windows-1256″ http-equiv=”Content-Type” />
</head>
<body>
<table border=”1″ width=”400px”><thead>
<tr>
<td>الأسم</td>
<td>المادة</td>
<td>الدرجة</td>
</tr></thead><tbody>
<tr>
<td>أحمد</td>
<td>رياضيات</td>
<td>90</td>
</tr><tr>
<td>بسام</td>
<td>رياضيات</td>
<td>95</td>
</tr>
<tr>
<td>رامز</td>
<td>رياضيات</td>
<td>80</td>
</tr></tbody><tfoot><tr>
<td>سامر</td>
<td>رياضيات</td>
<td>100</td>
</tr></tfoot>
</table>
</body>
</html>
  • لو اراد المبرمج جعل كل عامود يأخذ مكان عامودين في الصف الواحد يمكنه من خلال وضع الكود 12-300x69 الجداول في لغة html   بعد كلمة td في وسم البداية <td> الخاص بالعامود لكن من اجل تمام الجدول يجب ان يكون الصفوف التالية تمتلك نفس الأعمدة في الصف الأول حيث 12-300x69 الجداول في لغة html   تأخذ عامدوين بسبب الرقم 2 بعد colspan , الجدول التالي مثال على ما اقصده :
<!DOCTYPE html>
<html>
<head><meta content=”text/html; charset=windows-1256″ http-equiv=”Content-Type” />
</head>
<body>
<table border=”1px” width=”500px”>
<tr>
<td colspan=”2″>Computer (1)</td>
<td colspan=”2″>Computer (2)</td>
</tr>
<tr>
<td>ram 1GB</td>
<td>cpu intel</td>
<td>ram 2GB</td>
<td>cpu amd</td>
</tr>
<tr>
<td>rom 64GB</td>
<td>OS (M)</td>
<td>rom 128 GB</td>
<td>OS (W)</td>
</tr>
</table>
</body>
</html>

14-1 الجداول في لغة html

  • اما اذا رغب المبرمج جعل العامود الواحد يأخذ صفين فيستطيع بواسطة الكود 13-300x54 الجداول في لغة html  حيث يوضع بعد كلمة td في وسم البداية <td> الخاص بعامود معين و من اجل تمام الجدول يجب ان يكون عدد الأعمدة متناسب مع عدد الأعمدة التي سيأخذها العمود الذي وضع به الكود 13-300x54 الجداول في لغة html  حيث ان العامود السابق اخذ 2 عامود في كل صف , الجدول التالي مثال على كلامي
<!DOCTYPE html>
<html>
<head><meta content=”text/html; charset=windows-1256″ http-equiv=”Content-Type” />
</head>
<body>
<table border=”1px” width=”500px”>
<tr>
<td rowspan=”2″>Computer (1)</td>
<td>ram 1GB</td>
<td>cpu intel</td>
</tr>
<tr>
<td>Crom 64GB</td>
<td>OS (W)</td>
</tr>
<tr>
<td>Computer (2)</td>
<td>ram 2GB</td>
<td>OS (M)</td>
</tr>
</table>
</body>
</html>

15 الجداول في لغة html

  • الفقرة الأخيرة في هذا الدرس هو يخص التنسيقات للأعمدة بكامل صفوفها فمثلاً اذا اردنا ان يكون اول عامود بكامل الصفوف التي اسفله تكون بلون معين يمكن ذلك بوسطة كتابة هذه الوسوم بعد وسم البداية <table> مباشرة
<colgroup>
<col span=”1″ style=”background:#E5E5F1;”>
</colgroup>

حيث الوسم التالي يحتوي على عدة اجزاء فما بعد span مكتوب رقم 1 يعني اول عامود و بعد background هو كود اللون الذي سيلون به العامود الأول

<col span=”1″ style=”background:#E5E5F1;”>

اما اذا رغبنا تلوين الأعمدة التي بعد العامود الأول سنزيد بعد الوسم السابق بالوسم التالي

<col span=”2″ style=”background:#C0C0EA;”>

حيث بعد كلمة span يوجد رقم 2 , يعني ان العامودين التاليين بعد العامود الأول لونهما بالون الذي اخترناه عن طرق وضع كود لون بعد كلمة background حيث يصبح اجمالي عملنا هو

<colgroup>
<col span=”1″ style=”background:#E5E5F1;”><col span=”2″ style=”background:#C0C0EA;”></colgroup>

و اذا ضربنا مثال على ما شرحناه , هذه الصورة توضح ما سبق

16 الجداول في لغة html

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

دروس سابقة:

  1. ما هي لغة html
  2. ما هي وسوم الـ head
  3. التعامل مع النصوص في لغة html
  4. كيفية اضافة صور او تغيير خلفية صفحة الويب

التعليقات

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *