مايو 2016 | أسامة الموسى

الاثنين، 16 مايو 2016

الدرس (17) تعلم html : الجداول ( الجزء الثالث )

بسم الله الرحمن الرحيم

درس اليوم إن شاء الله بيكون خاتمة لسلسلة دروس الجداول في لغة html و سيكون فيه عرض مفاهيم مهمة في
بناء الجداول

سنتعرف على أول مفهوم إلا وهو (colspan) , ما هو و ماذا يفيد ؟؟

يفيد هذا الشيء في تلخيص و منع من تكرار نفس العبارة لمقصد واحد , فمثلاً في هاتين الصورتين مقدمة لما سوف نشرحه

الفرق بين الاولى و الثانية في أن الأولى في الصف الأول كانت تحتوي على أربعة أعمدة و الصورة الثاني اصبحت في عامودين

فما قلنا منعنا من تكرار نفس العبارة ووضعنا نفس العبارة في عامدو واحد أو خلية واحدة لأن المعلومات تحت كلمة computer (1) المكررة هم لكلا العبارة المكررة او العمود المكرر فعملنا على الاختصار في العمودين إلى عامود واحد و فعلنا ذلك بإضافة كود

colspan="2"

إلى العامود الأول الصف الأول و قمنا بحذف العامود الثاني في الصف الاول ليصبح الجدول على هذا الشكل

<!DOCTYPE html> <html> <head> </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>

فجدول كان على هذا الشكل

<!DOCTYPE html> <html> <head> </head> <body> <table border="1px" width="500px"> <tr> <td>Computer (1)</td> <td>Computer (1)</td> <td>Computer (2)</td> <td>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>

فالأختلاف الحاصل بين الجدولين السابقين بالتحديد ان قمنا بحذف المحدد باللون الاحمر في النص التالي المأخوذ من الجدول الثاني مع العلم اني حذفت العامود الرابع من الصف الأول ايضاً لنفس السبب الذي هو لإختصار التكرار من (computer (2

<td>Computer (1)</td>

<td>Computer (2)</td>

و قمنا بإضافة الكود الذي هو يأخذ عامودين من الصف الأول

<td colspan="2">Computer (1)</td>

<td colspan="2">Computer (2)</td>

في الذي سبق اخذنا عامودين لكل من

Computer (1)

Computer (2)

و الرقم الذي باللون الأزرق هو يعني بأن أخذنا عامودين وهو الرقم 2
................................................................................................
نأتي الآن إلى شيء مماثل للذي سبق لكن الإختلاف في اختصار صفين الذين يقعان في العامود الواحد , كيف ذلك ؟؟؟
أنظر إلى الصورتين التاليتين لتفهم الفرق

لتكن الاكواد المستعملة في الصور على الشكل التالي

الصورة الأولى أكوادها هن

<!DOCTYPE html> <html> <head> </head> <body> <table border="1px" width="500px"> <tr> <td>Computer (1)</td> <td>ram 1GB</td> <td>cpu intel</td> </tr> <tr> <td>Computer (1)</td> <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>

الصورة الثانية أكوادها هن

<!DOCTYPE html> <html> <head> </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>

كما سبق فقد حذفت العامود الأول في الصف الثاني , وفي الصورة الأولى كانت اكواد الصف الثاني على الشكل التالي

<td>Computer (2)</td>

<td>ram 2GB</td>

<td>OS (M)</td>

فحذفت العبارة الملونة باللون الأحمر ليصبح في الصورة الثانية على الشكل التالي
<td>Crom 64GB</td>

<td>OS (W)</td>
ومن ثم نضيف في الصف الأول العامود الأول عبارة

rowspan="2"

لتتغير وسوم الصف الأول العامود الأول من

<td>Computer (1)</td>

إلى

<td rowspan="2">Computer (1)</td>

وكلما نزيد من الرقم 2 كلما حجزنا اكثر من الصفوف في نفس العامود

نأتي في آخر جزء من درسنا هو ان ننسق الجدول نستعمل في هذا الشيء عدة وسوم , الوسم الأب فيه هو

<colgroup></colgroup>

نضع هذين الوسمين اسفل الوسم <table> مباشرةً

ويكون داخل هذين الوسمين الجزء المسؤول أو وسوم تنسيق الجدول

فمثلاً نريد تغيير لون أعمدة معينة على كل الصفوف

انظر على الشكل التالي

هذا هوا الجدول

وهذه هي الأعمدة

في الصورة السابقة استعملنا لتلوين الأعمدة بهذا الشكل هذه الوسوم

<col span="2" style="background:#E5E5F1;">

<col span="1" style="background:#C0C0EA;">

في السطر الأول الذي فيه رقم 2 باللون الأحمر كنا نعني من الرقم 2 ان أول عامودين اعطي خلفيتهم لون معين ف style تعني الشكل و

background

تعني خلفية اي خلفية العامود

#E5E5F1

تعني كود اللون الذي استخدمته في تلوين أول عامودين

في السطر الثاني الذي فيه الرقم 1 الملون باللون الأحمر

كنت اعني من الرقم 1 أن أول عامود بعد العامودين في السطر الأول لونهم بلون معين

انظر ما بعد style هذا ينتمي للغة css و لكن المطلوب منك معرفة شكل الوسم ككل

السطرين السابقين

<col span="2" style="background:#E5E5F1;">

<col span="1" style="background:#C0C0EA;">

يضعان كما قلنا بين الوسمين

<colgroup></colgroup>
ملحوظة : ترتيب التلوين في الاعمدة يمكنك تعديله فيمكنك القول ان أول عامود يلون بلون و بعدها ثاني عامودين يلونون بلون معين تختاره

ففي النهاية أعرض لكم الوسوم التي استخدمناها قبل قليل لتنسيق الجدول مع وسوم الجدول

<!DOCTYPE html> <html> <head> </head> <body> <table border="1px" width="500px"> <colgroup> <col span="2" style="background:#E5E5F1;"> <col span="1" style="background:#C0C0EA;"> </colgroup> <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>

وبهذا نكون قد انتهينا من سلسلة تعلم كيفية انشاء الجداول في لغة html

السلام عليكم و رحمة الله و بركاته

اقرأ تكملة الموضع

الخميس، 12 مايو 2016

الدرس (16) تعلم html : الجداول ( الجزء الثاني )

بسم الله الرحمن الرحيم

تعلمنا في الدرس السابق الأساسيات في بناء الجداول بلغة html لكن يوجد بعض الأضافات في بناء الجداول سنتعرف على بعضها في هذا الدرس

الجدول يمكن تقسيمه إلى ثالث اجزاء وهم الجزء العلوي (thead) و الصفوف التي تقع في المنتصف او ما تسمى جسم الجدول (tbody) و اخر شيء الجزء السفلي (tfoot)

هذه التقسيمات تفيدنا عند تنسيق شكل الجدول عن طريق لغة css وهذه اللغة ان شاء الله سأضع دروس لها على هذا الموقع بعد الأنتهاء من دروس html

بداية نتعرف اين سنضع thead

نضعه على شكل وسمين وسم بداية و وسم نهاية على شكل التالي

<thead></thead>

لكن كيف نضعه في الجدول , نضعه بأن يكون الصف الأول من الجدول داخل هذين الوسمين على الشكل التالي

<thead> <tr> <td>text 1</td> <td>text 2</td> <td>text 3</td> <td>text 4</td> </tr> </thead>

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

<style type="text/css">
thead td{background:#ccc; }
</style>

فتكون النتيجة على الشكل التالي

مع العلم انا قد وضعت حدود لجدول هذا و ضبطت عرضه

و أكواد ال css ال style وضعتها في الجزء head من الصفحة

الأكواد التي استعملتها في بناء هذا الجدول هي

<!DOCTYPE html> <html> <head> <style type="text/css"> thead td{background:#ccc;} </style> </head> <body> <table border="1" width="400px"> <thead> <tr> <td>text 1</td> <td>text 2</td> <td>text 3</td> <td>text 4</td> </tr> </thead> </table> </body> </html>

نأتي الآن إلى جسم الجدول وهي الصفوف التي تقع ما بين أول صف و أخر صف
والوسوم الذي نحتاجه هو

<tbody></tbody>

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

ويمكن تنسيق هذه الصفوف مثل هذا الشكل

<style type="text/css">
tbody td{background:#e0e0e0}

</style>

لتكون النتيجة على الشكل التالي

ويمكنك دمج المثال السابق مع هذا المثال ليكون الشكل على التالي

الأكواد التي أستعملتها ليصبح الشكل كالصورة السابقة

<!DOCTYPE html> <html> <head> <style type="text/css"> thead td{background:#ccc;} tbody td{background:#e0e0e0;} </style> </head> <body> <table border="1" width="400px"> <thead> <tr> <td>text 1</td> <td>text 2</td> <td>text 3</td> <td>text 4</td> </tr> </thead> <tbody> <tr> <td>text 5</td> <td>text 6</td> <td>text 7</td> <td>text 8</td> </tr> <tr> <td>text 9</td> <td>text 10</td> <td>text 11</td> <td>text 12</td> </tr> <tr> <td>text 13</td> <td>text 14</td> <td>text 15</td> <td>text 16</td> </tr> </tbody> </table> </body> </html>

الآن نصل إلى آخر جزأ وهو الجزء السفلي من الجدول والتي وسومه هي

<tfoot></tfoot>

نضع ما بين الوسمين السابقين آخر صف من الجدول و يمكنك تنسيقه بلغة css كما نسقنا جسم الجدول و رأس الجدول
مثلاً لقد اعددت جدول مؤلف من أجزائه كلها و الأكواد هي

<!DOCTYPE html> <html> <head> <style type="text/css"> thead td{background:#ccc;} tbody td{background:#e0e0e0;} tfoot td{background:#848080;} </style> </head> <body> <table border="1" width="400px"> <thead> <tr> <td>text 1</td> <td>text 2</td> <td>text 3</td> <td>text 4</td> </tr> </thead> <tbody> <tr> <td>text 5</td> <td>text 6</td> <td>text 7</td> <td>text 8</td> </tr> <tr> <td>text 9</td> <td>text 10</td> <td>text 11</td> <td>text 12</td> </tr> <tr> <td>text 13</td> <td>text 14</td> <td>text 15</td> <td>text 16</td> </tr> </tbody> <tfoot> <tr> <td>text 17</td> <td>text 18</td> <td>text 19</td> <td>text 20</td> </tr> </tfoot> </table> </body> </html>

ليصبح الجدول على الشكل التالي

و بهذا نكون قد انتهينا من درس اليوم و إلى اللقاء في الجزء القادم من تعلم الجداول في لغة html

السلام عليكم و رحمة الله و بركاته

اقرأ تكملة الموضع

مرات مشاهدة الصفحة في الشهر الماضي

خبراتي فى لغات البرمجه

أرشيف المدونة الإلكترونية

نموذج الاتصال

الاثنين، 16 مايو 2016

الدرس (17) تعلم html : الجداول ( الجزء الثالث )

الخميس، 12 مايو 2016

الدرس (16) تعلم html : الجداول ( الجزء الثاني )

تطبيق موقع أسامة الموسى

كتاب : تعلم (html) من البداية حتى الإحتراف تأليف اسامة الموسى

Translate

للمتابعة على مواقع التواصل الاجتماعي

المشاركات الشائعة

أدوات

من انا

قائمة مواقعي