المحتوى
- قم بإنشاء جدول بتنسيق HTML
- الخطوة 1
- الخطوة 2
- الخطوه 3
- الخطوة 4
- الخطوة الخامسة
- تخصيص التقويم
- الخطوة 1
- الخطوة 2
- تقويم thead {
- الخطوه 3
- التقويم
- تقويم td {
- الخطوة 4
- td سبان التقويم {
على الرغم من عدم تفضيل الجداول عندما يتعلق الأمر ببناء تخطيطات صفحات الويب ، إلا أنها لا تزال تعمل جيدًا في ترميز تقويمات HTML. تعرض التقويمات البيانات المجدولة بطريقة ما ، بمجرد تنظيمها في شبكة من التواريخ بأعمدة مسماة ، على سبيل المثال ، مع أيام الأسبوع. سيجعل كود CSS الإضافي شبكة مملة بأسماء وأرقام تشبه التقويم. نظرًا لأن الأحداث الموجودة في التقويم تحتاج إلى مساحة ، لكل من عدد التواريخ والأحداث ، فسيكون من الضروري أيضًا استخدام CSS لتنسيق التواريخ بطريقة تجعل كلا الجزأين من المعلومات قابلين للقراءة.
قم بإنشاء جدول بتنسيق HTML
الخطوة 1
قم بإنشاء جدول لهيكلة التقويم. يتطلب هذا الجدول رأسًا يتكون من سبع خلايا ، واحدة لكل يوم من أيام الأسبوع. من الضروري أيضًا إنشاء ستة صفوف من خلايا الجدول العادية. انسخ المقتطف والصقه في صفحة ويب بمساعدة برنامج Notepad أو محرر التعليمات البرمجية.
| الأحد | الإثنين | الثلاثاء | الأربعاء | الخميس | يوم الجمعة | يوم السبت |
|---|
سيقوم هذا الرمز بإنشاء الجدول والعنوان. يستخدم الجدول اسم تعريف يسمى "التقويم" في حالة استخدام موقع الويب لجداول في صفحات أخرى.
الخطوة 2
أضف زوجًا من علامات النص أسفل علامة "":
الخطوه 3
انسخ الكود التالي والصقه بين "
" ستة أضعاف:سينشئ هذا الرمز كل صف مكونًا من سبع خلايا ، بحيث بإضافة ستة منها ، سيحتوي التقويم على جميع مساحات البيانات التي تحتاجها لجميع أشهر السنة.
الخطوة 4
أضف التواريخ إلى التقويم وفقًا للشهر الذي تريد إظهاره. استشر تقويمًا حقيقيًا واحرص على عدم تخطي أو تكرار التاريخ. أرفق كل تاريخ بعلامات "" حتى تتمكن من تخصيص الأرقام لاحقًا:
الخطوة الخامسة
لاحظ الأحداث في الخلايا التي تحتوي على التواريخ ذات الصلة. يجب أن تكون الأحداث خارج علامات "" ولكن داخل "
’:
حفلة الهالوين!
آخر يوم للتسجيل.
تخصيص التقويم
الخطوة 1
حدد موقع "
يعتبر المخطط التفصيلي اختياريًا ، ولكن هذه هي الطريقة الأنسب لإضافة حدود إلى الجداول الموجودة على صفحات الويب الحالية.
الخطوة 2
تخصيص عنوان الجدول بلون للحروف وآخر للخلفية:
تقويم thead {
اللون: #ffffff ؛ لون الخلفية: أزرق غامق. وزن الخط: عريض ؛ }
من الممكن استخدام رمز سداسي عشري أو اسم الألوان. سيعرض هذا العنوان نصًا أبيض على خلفية زرقاء داكنة.
الخطوه 3
التعبئة والحدود والعرض والموضع بالنسبة لخلايا الجدول:
التقويم
تقويم td {
الحشو: 20 بكسل ؛ الحدود: 1 بكسل أسود صلب ؛ العرض: 100 بكسل ؛ الموقف: نسبي ؛ }
يسمح التنسيب النسبي للمبرمج بوضع التواريخ في شكل أرقام في زوايا خلايا الجدول لاحقًا. لا تحدد ارتفاعًا ، حيث سيؤدي ذلك إلى تقييد مقدار النص الذي يمكنك إضافته إلى أي تاريخ.
الخطوة 4
قم بإنشاء الأرقام باستخدام التعبئة ولون الخلفية والموضع المطلق:
td سبان التقويم {
وزن الخط: عريض ؛ الموقف: مطلق ؛ أسفل: 0؛ اليمين: 0؛ العرض محجوب؛ الحشو: 5 بكسل ؛ لون الخلفية: #eeeeee ؛ }
يجب عليك تضمين "display: block" لجعل العلامات "" تعمل كمربعات على صفحة الويب ، وإلا فلن تتمكن من ملئها. ينشئ هذا النموذج من التعليمات البرمجية مربعًا رماديًا باهتًا في الزاوية اليسرى السفلية لكل مساحة تاريخ ، ويعرض رقم التاريخ.