תוֹכֶן
- צור טבלה ב- HTML
- שלב 1
- שלב 2
- שלב 3
- שלב 4
- שלב 5
- התאם אישית את לוח השנה
- שלב 1
- שלב 2
- לוח השנה הראשי {
- שלב 3
- לוח השנה ה
- לוח שנה td {
- שלב 4
- לוח שנה td span {
למרות שטבלאות נפלו מכלל חשיבות בכל הקשור לבניית פריסות דפי אינטרנט, הן עדיין פועלות היטב לקידוד לוחות שנה של HTML. לוחות שנה מציגים נתונים טבלאיים באופן, ברגע שהם מסודרים ברשת תאריכים עם עמודות ששמות, למשל, עם ימי השבוע. קוד CSS נוסף יהפוך לרשת מייגעת עם שמות ומספרים כמו לוח שנה. מכיוון שהאירועים בלוח השנה זקוקים למרחב, הן למספר התאריכים והן לאירועים, יהיה צורך להשתמש גם ב- CSS כדי לעצב את התאריכים באופן שישמור על קריאת שתי פיסות המידע.
צור טבלה ב- HTML
שלב 1
צור טבלה לבניית לוח השנה. לטבלה זו יש צורך בכותרת הכוללת שבעה תאים, אחד לכל יום בשבוע. כמו כן, יש צורך ליצור שש שורות של תאי טבלה רגילים. העתק והדבק את הקטע בדף אינטרנט בעזרת פנקס רשימות או עורך קוד.
| יוֹם רִאשׁוֹן | יוֹם שֵׁנִי | יוֹם שְׁלִישִׁי | יום רביעי | יוֹם חֲמִישִׁי | יוֹם שִׁישִׁי | יום שבת |
|---|
קוד זה ייצור את הטבלה ואת הכותרת. הטבלה משתמשת בשם זיהוי הנקרא "לוח שנה" למקרה שהאתר משתמש בטבלאות בדפים אחרים.
שלב 2
הוסף זוג תגי גוף מתחת לתגית "":
שלב 3
העתק את הקוד הבא והדבק אותו בין "
" שש פעמים:קוד זה ייצור כל שורה עם שבעה תאים, כך שעל ידי הוספת שישה מהם, לוח השנה יכלול את כל מרחבי הנתונים הדרושים לכל חודשי השנה.
שלב 4
הוסף תאריכים ללוח השנה בהתאם לחודש שברצונך להציג. התייעץ עם לוח שנה אמיתי והיזהר שלא לדלג על תאריך או לחזור עליו. צרף כל תאריך עם התגים "" כדי שתוכל להתאים אישית את המספרים מאוחר יותר:
שלב 5
שימו לב לאירועים בתאים המכילים תאריכים רלוונטיים. אירועים חייבים להיות מחוץ לתגיות "" אך בתוך "
’:
מסיבת ליל כל הקדושים!
היום האחרון לרישום.
התאם אישית את לוח השנה
שלב 1
אתר את "
מתאר הוא אופציונלי, אך זו הדרך המתאימה ביותר להוסיף גבולות לטבלאות בדפי האינטרנט הנוכחיים.
שלב 2
התאם אישית את כותרת הטבלה עם צבע לאותיות ועוד לרקע:
לוח השנה הראשי {
צבע: #ffffff; צבע רקע: כהה כחול; מודגש; }
אפשר להשתמש בקוד הקסדצימלי או בשם הצבעים. כותרת זו תציג טקסט לבן על רקע כחול כהה.
שלב 3
מילוי, גבולות, רוחב ומיקום יחסית לתאי הטבלה:
לוח השנה ה
לוח שנה td {
ריפוד: 20 פיקסלים; גבול: 1px שחור מלא; רוחב: 100 פיקסלים; מיקום: קרוב משפחה; }
מיקום יחסי מאפשר למתכנת להציב תאריכים בצורת מספרים בפינות תאי הטבלה בהמשך. אל תגדיר גובה, מכיוון שזה יגביל את כמות הטקסט שאתה יכול להוסיף לתאריך כלשהו.
שלב 4
צור את המספרים באמצעות המילוי, צבע הרקע והמיקום המוחלט:
לוח שנה td span {
מודגש; עמדה: מוחלט; תחתון: 0; מימין: 0; בלוק תצוגה; ריפוד: 5 פיקסלים; צבע רקע: #eeeeee; }
עליך לכלול "תצוגה: חסום" כדי לגרום לתגים "" לשמש כתיבות בדף האינטרנט, אחרת לא תוכל למלא אותם. קוד דוגמה זה יוצר תיבה אפורה קלושה בפינה השמאלית התחתונה של כל מרחב תאריכים, ומציגה את מספר התאריך.