الجداول في لغة html القسم الأول الدرس |11| - Programmer Tech

Programmer Tech

موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات

إعلان اعلى المقالة

الثلاثاء، 24 ديسمبر 2019

الجداول في لغة html القسم الأول الدرس |11|


وسم الجداول <table>

هو الوسم الرئيسي لإدراج الجداول كما نعرف جميعنا أن الجداول تُمثل الدور الأكبر في صفحات الويب اي انه هو وسم تعريف الجداول داخل صفحات الويب.

الشكل العام له 

<table></table>

و يملك هذا الوسم عدة وسوم معه يستخدمن بداخل الوسم table للحصول على جدول جيد و جذاب و من هذه الوسم :

وسم <tr>
هو الوسم المسؤول عن ادارج الصفوف في الجدول و هو اختصار للمصطلح Table Row.

وسم <td>
هو الوسم المسؤول عن ادراج الخلايا داخل الصفوف و تعريف محتويات كل خلية اختصار Table Data.

هذه هي الوسوم التي نبدأ بها لإدراج الجداول, دعونا نأخذ بعض الأمثلة و شرح كل مثال على حدى.


شرح المثال السابق

هذه هي الوسوم التي نبدأ بها لإدراج الجداول, بعد ادراج بداية الوسم table ونهاية الوسم table هناك سؤالين ينبغي الإجابة عنهم, الأول كم عدد الصفوف التي نريدها في الجداول و الثاني كم عدد الخلايا داخل كل صف, في المثال السابق قمنا بإنشاء جدول يوجد به صفين عن طريق الوسم tr اي انه الوسم المسؤول عن ادراج الصفوف داخل الجدول ويستخدم الوسم tr بعدد الصفوف الذي نريدها.

في المثال السابق قمنا بإنشاء صفين يجب اضافة الوسم tr مرتين و اذا كنت اُريد انشاء ثلاث صفوف يجب كتابة tr ثلاث مرات, بعد انشاء الصفوف يجب علينا تحديد الخلايا في كل صف و في المثال السابق قمنا بإنشاء خليتين داخل كل صف عن طريق الوسم td اي انه الوسم المسؤول عن ادراج الخلايا داخل كل صف وبنفس عدد الخلايا الذي نريده يجب اضافة الوسم td في المثال السابق قمنا بإنشاءه بإضافة الوسم td مرتين ويكون الناتج


الخصائص الذي تستخدم في الجداول


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

1 - مستوى الجدول ككل.
2 - مستوى الصفوف ككل او كل صف على حدى.
3 - مستوى الخلايا ككل او كل خلية على حدى.

لكن في ظل كل تلك المستويات التي تستخدم مع الخصائص لكل وسم هناك خصائص مشتركه تستخدم مع كل الوسوم.

الخاصية border

تقوم بإضافة حدود للجدول و تحديد سماكتها و القيمة الإفتراضية لها هي الصفر 0 و كما يمكنك التحكم في سمك الجدول من خلال البيكسل px و الشكل العام له في الجدول يكون كالتالي
<table border="10"> ....</table>

الخاصية width

تستخدم لتحديد عرض الجدول ككل و هنا اسلوبين لتحديد عرض الجدول من خلال النسبة المئوية أو من خلال البيكسل و الشكل العام يكون
<table width="50%"> ... </table>

الخاصية height

تستخدم لتحديد ارتفاع الجدول ككل من خلال النسبة المئوية أو البيكسل و شكل كتابته يكون
<table heigth="50px">...</table>

الخاصية cellspacing

تتحكم هذه الخاصية في تحديد المسافات بين كل خلية من خلايا الجدول و يتحكم بها بالبيكسل
<table cellspacing="10">....</table>

الخاصية cellpadding

تستخدم لتحديد المسافة الفاصلة بين الحدود و بداية النص في كل خلية او نقل تحديد حجم الهامش لخلايا الجدول
<table cellpadding="10"> ... </table>

الخاصية align

هذه الخاصية تتحكم في مكان الجدول على المتصفح سواء على اليمين و اليسار و قيمها left و right.
<table align="left">...</table>

الخاصية bgcolor

تستخدم في تحديد لون خلفية الجدول كاملاً
<table="yellow">...</table>

مثال واحد يجمع لنا كل ما سبق


 ونقوم بالاستعراض في المتصفح لنرى نتيجة الجدول



هذه ليس نهاية الجداول هناك درس او درسين على الجداول حيث نتعرف على الخصائص المستعملة مع الوسم TR و الخصائص المستخدمة مع الوسم TD.

https://t.me/Programmer_Tech

ليست هناك تعليقات:

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

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

الاسم

بريد إلكتروني *

رسالة *

اقسام