טבלאות נתונים מפרטות מידע שונה בעמודות ובשורות לקריאה קלה. הנתונים בדרך כלל מספריים בחלקם עם תוויות טקסט. דוגמה היא טבלת נתונים המציגה כמה קלוריות מישהו אוכל בכל יום. הכנת טבלת נתונים באופן מקוון יכולה להיעשות באמצעות HTML או בשפת הדפדפן המורכבת יותר של CSS. הטבלה הסופית נראית בדיוק כמו טבלת נתונים שנוצרה בגיליון אלקטרוני או על נייר. ההבדל היחיד הוא קידוד הרקע, שלא נראה אלא אם מסתכלים על קוד המקור. ניתן ליצור את הקידוד על ידי עורכי HTML, טקסט או דרכים אחרות. ישנם אתרים רבים ברשת המציעים את האפשרות להזין נתונים, להגדיר כמה תכונות וליצור את כל קידוד הטבלאות עבורך. טבלאות נתונים מקוונות משמשות בדרך כלל כחלק מדף אינטרנט. טבלאות נתונים משמשות לעיתים קרובות ליצירת רשימות של פריטים עם קטגוריות, כגון פריטים למכירה. דפי אינטרנט מסוימים משתמשים בהם כדי להציג נתונים סטטיסטיים למידע. אמנם ניתן להשתמש בטבלאות נתונים במצב לא מקוון להדפסה או לדוחות, אך בדרך כלל עדיף להשתמש בהן תוכנות גיליון אלקטרוני, כגון Microsoft Office Excel, המציעות תכונות רבות נוספות לעבודה עם נתונים. מדריך זה מראה כיצד ליצור טבלת נתונים של HTML באמצעות פנקס הרשימות.
פתח עורך HTML או סתם מסמך טקסט רגיל של פנקס רשימות להזנת קוד HTML. פנקס הרשימות עובד טוב אם אתה רגיל לקידוד HTML. עורכי HTML הופכים את המשימות החוזרות ונשנות למהירות יותר, אך חלקן, כמו Frontpage, מוסיפות קידוד מיותר ומיותר שיכול להאט את דפי האינטרנט. הדבר הטוב ביותר לעשות הוא קודם לבצע קוד עם עורך HTML, ואז לחזור ולערוך את הקוד ביד כדי לנקות אותו.
החלט את מאפייני הטבלה עבור גבול, רוחב, צבע רקע וצבעי גופן. עליכם לקחת בחשבון את פריסת עמוד האינטרנט, רוחבם, צבעיהם ותכונות אחרות בכדי להפוך את הטבלה לקריאה בקלות. עליך גם להחליט כמה שורות ועמודות דרושים לנתונים. התחל בהגדרת מאפייני הטבלה. (הדוגמה שלנו מראה את מספר הקלוריות שנאכלו בארוחות הצהריים והערב בכל יום חול. אנו זקוקים לשלוש עמודות (יום, צהריים וערב) ושבע שורות (שתיים לתוויות ואחת לכל יום חול).
הוסף גבול סביב הטבלה ותאי נתונים. גבולות מפרידים את הנתונים לתאים לצפייה נוחה. הוא נמדד בפיקסלים וניתן לתת לו ערך 0 כדי לא להשתמש בהם. גבול אחד או שני פיקסלים הוא בדרך כלל בסדר. התגית לגבול היא
bgcolor = border = "CHOSEN_BORDER_WIDTH"
ניתן לשנות את צבע הגבול באמצעות התג
bordercolor = "CHOSEN_COLOR"
המשתמשת במונחי הצבעים הבסיסיים, כגון קודי צבע הקסדצימלי אדום או שחור או שש ספרות. הקסדצימלים מציעים יותר צבעים. הדוגמה שלנו משתמשת ב- border = "2" וב- bordercolor = "black".
קבע את רוחב השולחן כולו. הוא נמדד בפיקסלים או באחוזים מגודל המסך. פיקסלים הם סופיים ואחוזים מאפשרים להתאים את הטבלה לגדלי מסך שונים. נסה לשפוט את הרוחב על סמך רוחב הנתונים לאורך השורות. אם מאוחר יותר תגלה שהשולחן דק מדי או רחב, ניתן לשנות אותו. הדוגמה שלנו משתמשת ברוחב = "175".
הגדר את צבע הרקע של תאי הנתונים. זה שונה מצבע הרקע של הדף, שיכול להציע ניגודיות טובה. התגית היא
bgcolor = "CHOSEN_COLOR"
ממש כמו צבע הגבול. הדוגמה שלנו משתמשת ב- bgcolor = "לבן".
הגדר את צבע הגופן של הטקסט בתאים. ודא שהצבע מנוגד היטב לרקע, כך שהוא יהיה קריא בקלות. אור על כהה או כהה על אור תמיד עובד הכי טוב. התגית היא
font = "CHOSEN_COLOR"
הדוגמה שלנו היא פונט = "שחור", המנוגד היטב לרקע הלבן.
כתוב את תגי הטבלה המלאים בין חץ שמאלה לימין עם רווח בין תכונות התג והתחל עם תג הטבלה מלפנים. סדר התגים לא משנה, כל עוד "שולחן" נמצא מלפנים.
קבע את רוחב העמודות. רוחב כל עמודה תלוי ברוחב הטבלה כולה. קח את רוחב הטבלה וחלק אותו למספר התאים כדי לקבל עמודות בגודל שווה. במידת הצורך, התאם את רוחב העמודות, אך הסך הכולל אינו יכול לחרוג מרוחב הטבלה. כאשר רוחב תאים אחד משתנה, יש לכוונן את התאים האחרים כדי לסכם את רוחב הטבלה. (לדוגמא שלנו יש רוחב של 175 ושלוש עמודות בשורה, ולכן פיצול שווה של כ -59. הפיצול בפועל הוא 70, 60, 40).
התחל להוסיף את הנתונים שלך. ראשית, התחל שורה חדשה והוסף שורת טבלה עם הקוד
הזן את הנתונים שלך עבור התא; באמצעות קוד זה כדי לייצג תאים ריקים:
סגור את התא עם התג. תג הגבול צבע משמש כדי לציין את צבע גבול התא, אם תרצה בכך. אם הוא נותר בחוץ, נעשה שימוש בטבלת ברירת המחדל בגוון צבע. קוד התא הראשון של הדוגמה שלנו הוא:
חזור על יצירת תאי נתוני טבלה, כל אחד בשורה חדשה, עד להשלמת כל התאים בשורה. ואז סיים את השורה עם התג. התחל את השורה הבאה באותו תהליך, החל מ-
סגור את קוד הטבלה עם ה- תָג. קוד הטבלה הסופית שלנו, אם הסתיים לאחר שתי שורות נתונים, נמצא למטה.
דברים שתזדקק להם
- עורך HTML או פנקס רשימות
- נתונים