تعلم اسياسيات html
نبدأ بإذن الله تعالى في شرح أساسيات لغة html الدرس الخامس ، أقدم لكم شرح انشاء الجدوال في html وشرح خصائصها والتعرف علي انواعها ..
الجداول في الـ HTML
وسوم الجداول
| العنصر | الوصف |
|---|---|
| <table> | تعريف وتحديد الجدول |
| <tr> | تحديد صف جدول |
| <th> | تحديد عنوان الجدول |
| <td> | تحديد خلية جدول |
| <caption> | تحديد عنوان جدول |
| <colgroup> | تحديد مجموعات أعمدة للجدول |
| <col> | تحديد قيم سمة لواحد أو أكثر من الأعمدة في الجدول |
| <thead> | تحديد رأس " قمة " الجدول |
| <tbody> | تحديد جسم الجدول |
| <tfoot> | تحديد تذييل " أسفل " الجدول |
خصائص الجدول
الخصائص التي تستخدم مع الوسوم <TABLE>| الخاصية | الوصف |
|---|---|
| BORDER | تقوم هذه الخاصية بإضافة حدود للجدول وتحديد سماكتها، والقيمة الإفتراضية لها هي صفر أي لا حدود |
| WIDTH | ستخدم هذه الخاصية لتحديد عرض الجدول ككل. وهناك أسلوبين لتحديد العرض: المطلق أي بكتابة الرقم الذي يمثل العرض بصورة مباشرة. والنسبي أي كتابة رقم نسبي مئوي يحدد عرض الجدول حسب عرض نافذة المتصفح. (أي أن عرض الجدول سيختلف باختلاف عرض نافذة المتصفح). |
| HEIGHT | لتحديد ارتفاع الجدول، ويكون تحديد هذا الإرتفاع من خلال قيمة مطلقة تحدد الإرتفاع بالبيكسل. أو قيمة نسبية تحدد ارتفاع الجدول بالنسبة لإرتفاع صفحة المتصفح |
| CELLSPACING | لتحديد المسافة بين كل خلية من خلايا الجدول |
| CELLPADDING | لتحديد المسافة الفاصلة بين الحدود وبداية النص في كل خلية. أو لنقل: تحديد حجم الهوامش لخلايا الجدول |
| ALIGN | لتحديد محاذاة الجدول أفقياً على الصفحة يميناً أو يساراً. وهو يأخذ القيم right, left |
| BGCOLOR | ويستخدم لتحديد لون الخلفية للجدول |
خصائص الخلايا
الخصائص المستخدمة مع وسوم الخلايا داخل الجدول| الخاصية | الوصف |
|---|---|
| ALIGN | تحدد محاذاة النص الموجود في الخلية أفقياً، والقيم المستخدمة هي Left, Center, Right |
| VALIGN | تحدد المحاذاة العمودية للنص، وهو يأخذ القيم Top, Middle, Bottom, Baseline |
| WIDTH | تحدد عرض الخلية، وذلك بكتابة القيمة المباشرة للعرض المطلوب بالبيكسل، أو بكتابة رقم يمثل النسبة المئوية. ويكفي تحديد العرض للخلايا في أحد الصفوف لكي يتم تطبيقه على كل الخلايا في كل الصفوف. |
| HEIGHT | تحدد الإرتفاع المطلوب للخلية في الصف، وذلك بالطرق المباشرة أو النسبية. وقيامك بتحديد ارتفاع إحدى الخلايا في الصف يؤدي إلى تطبيقه على كل الخلايا فيه. |
| BGCOLOR | تحدد لون خلفية الخلية |
| COLSPAN | يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها أفقياً |
| ROWSPAN | يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها عمودياً (أي أسفلها). |