יצירת טבלאות בעזרת העורך הויזואלי (CKeditor)

פורומים הוראות שימוש במערכות ניהול אתרים הוראות שימוש במערכות סימפל-ג'ו יצירת טבלאות בעזרת העורך הויזואלי (CKeditor)

הדיון הזה מכיל 0 תגובות, ויש לו משתתף 1, והוא עודכן לאחרונה ע״י  דוטקום לפני 2 חודשים, 4 שבועות.

  • מאת
    תגובות
  • #216

    דוטקום
    מנהל בפורום

    טבלה הוא פורמט מעולה עבור סוגים שונים של מידע, בעיקר מידע סטטיסטי. CKEditor מאפשר להוסיף ולערוך טבלאות HTML בצורה קלה ונוחה ובנוסף מאפשר גם עריכת הגדרות מתקדמות יותר באלמנטים של הטבלה.

    יצירת טבלה
    ליצירת טבלה ב- CKEditor, לחצו על הכפתור  ( או לפעמים גם Table‎ ) בסרגל העורך. חלונית דיאלוג הגדרות הטבלה תיפתח ותאפשר לך לקבוע הגדרות כלליות (configuration options) הקובעות את מימדי הטבלה, הגדרות התצוגה שלה ואף הגדרות מתקדמות נוספות.

    דיאלוג הגדרות הטבלה מורכב משני טאבים :

    מידע כללי על שימוש בתיבות דו-שיח (דיאלוג) ניתן לקרוא באיזור אחר במדריך המשתמש של העורך הויזואלי ( Dialog Windows ) .

    הגדרות הטבלה (מאפייני טבלה)

    טאב מאפייני הטבלה הוא טאב ברירת המחדל הנפתח כשאתם לוחצים על כפתור הטבלה  בעורך, הוא מאפשר לכם להגדיר את מימדי הטבלה וצורת הופעתה במסמך.

    מאפייני טבלה

    חלון מאפייני הטבלה עם טאב ברירת המחדל פתוח

    לפניכם סקירה של כל האלמנטים בטאב מאפייני הטבלה :

    • שורות מספר השורות שתכיל הטבלה (הכרחי).
    • טורים מספר הטורים מהם תורכב הטבלה (הכרחי).
    • רוחב רוחב הטבלה ביחידות פיקסלים או בערכי אחוזים.
      אם יצויין ערך באחוזים, רוחבה של הטבלה יהיה האחוז מרוחב האלמנט בו היא נמצאת ( למשל DIV , פיסקה, או מכל רוחב העמוד)
    • גובה – גובה הטבלה ביחידות פיקסלים.
    • כותרות – רשימה נגללת המאפשרת לבחור של אילו תאים להחיל פורמט כותרות מיוחד
      ניתן להחיל את הגדרות פורמט הכותרות על השורה הראשונההטור הראשון או שניהם.
    • גודל מסגרת – עובי גבול הטבלה בפיקסלים.
    • יישור – הטיית הטבלה בתוכן העמוד. האפשרויות הבאות זמינות: לשמאלמרכזלימין.
    • מרווח תא – החלל שבין תאים בודדים, וכן תאים וגבולות טבלה , בפיקסלים.
    • ריפוד תא – המרחב שבין גבול התא ותכולתו, בפיקסלים.
    • כיתוב – התווית של הטבלה המוצגת על גביה עם הנחת סמן העכבר.
    • תקציר – תקציר תוכן הטבלה שזמין לאבזרי עזר כמו קוראי מסך. זה יספק לטבלאות שלך טקסט סיכום משמעותי על מנת להפוך אותן לזמינות יותר למשתמשים עם מוגבלויות.

    אפשרויות מתקדמות

    טאב האפשרויות מתקדמות מאפשר להגדיר הגדרות אלמנט מתקדמות כמו למשל הקצאת מזהה ייחודי (ID), קלאס (class) עבור גליונות עיצוב, כיווניות שפה, או הגדרות של גליונות עיצוב (CSS).
    ההגדרות בטאב זה נועדו עבור משתמשים מתקדמים עם ידע ב-HTML, וב-CSS, ונותן אפשרויות כמעט בלתי מוגבלות בכל מה שקשור בתצוגת הטבלה.

    אפשרויות מתקדמות

    טאב האפשרויות המתקדמות של חלון מאפייני הטבלה

    לפניכם סקירה של כל האלמנטים בטאב "אפשרויות מתקדמות" :

    • זיהוי (Id) – מזהה ייחוד עבור אלמנט הטבלה במסמך (id attribute).
    • כיוון שפה – כיווניות הטקסט שבטבלה: משמאל לימין (LTR) או מימין לשמאל (RTL) (פקודת dir).
    • קלאסים של גליונות עיצוב (Stylesheet Classes) – ה-class של אלמנט הטבלה בגליון עיצוב ה-css (class attribute). חשוב לזכור כי ניתן להצמיד יותר מקלאס css אחד לאלמנט הטבלה. ובמקרים כאלה, ניתן להפריד שמות class באמצעות רווחים.
    • סטייל (Style) – קביעות סטייל CSS (משתני CSS). חשוב לזכור של פקודה מסתיימת ב- סמי-קולון (semi-colon).

    עבודה עם טבלאות

    ברגע שהוכנסה למסמך, ניתן לשנות את הטבלה. כדי לערוך את הטבלה, או לחץ עליה, או פתח את תפריט ההקשר (context menu) של הטבלה על ידי לחיצה עליו עם כפתור העכבר הימני או באמצעות כפתור Menu/Application במיקלדת.

    תפריט ההקשר של הטבלה נפתח עם הקשת עכבר - כפתור ימני

    תפריט ההקשר (context menu) של אלמנט הטבלה

    למחיקת טבלה שלמה על כל תכניה, יש להשתמש באופציית מחיקת טבלה.

    כשבוחרים את פקודת מאפייני טבלה, תיבת דו שיח בשם זה תיפתח.
    התיבה תאפשר לך לך לשנות את אפשרויות התצורה שנקבעו בעת יצירת הטבלה, מלבד מספר השורות והעמודות שמוצגים באפור.

    בנוסף, תפריט ההקשר של הטבלה מאפשר לך לערוך את השורות, הטורים או תאים ספציפיים שבטבלה. תכונה זו מאפשרת להוסיף שורות חדשות, טורים ואף תאים במיקומים שתבחר ובנוסף גם לפצל או לאחד תאים.

    עדכון שורות טבלה

    תפריט ההקשר של הטבלה מאפשר לך לערוך את השורות בטבלה. אם אתה מרחף עם העכבר מעל לתפריט אפשרויות השורה, אפשרויות נוספות נהפכות לזמינות.

    תפריט הקונסטנט של השורות בטבלה

    תפריט ההקשר לאלמנטים של השורות בטבלה

    לפניכם סקירה של כל האלמנטים בתפריט ההקשר של השורות (Row context menu):

    • הוספת שורה לפני – הוספת שורה חדשה לפני השורה שבה העמדת את סמן עכברך.
    • הוספת שורה אחרי – הוספת שורה חדשה אחרי השורה שבה העמדת את סמן עכברך.
    • מחיקת שורות – מחיקת השורה בה העמדת את סמן עכברך.

    שימו לב שהעורך הויזואלי CKEditor מאפשר לבחור כמה תאי טבלה על ידי גרירת סמן העכבר עליהם, ולפיכך החלת פעולה כמו למשל מחיקה על מספר מרובה של תאים יחד.

    עריכת טורי טבלה

    תפריט ההקשר של הטבלה מאפשר לך לערוך טורי (עמודות) טבלה. אם אתה מרחף עם העכבר מעל תפריט אפשרויות העמודה, אפשרויות נוספות נהפכות לזמינות.

    תפריט הקונסטנט של שורות הטבלה

    תפריט ההקשר של אלמנט העמודה בטבלה

    לפניכם סקירה של כל האלמנטים בתפריט ההקשר של עמודות:

    • הוספת טור לפני – מוסיף עמודה חדשה לפני העמודה המכילה את סמן העכבר.
    • הוספת טור אחרי – מוסיף עמודה חדשה אחרי העמודה המכילה את סמן העכבר.
    • מחיקת טורים – מוחק את העמודה המכילה את סמן העכבר.

    שימו לב שהעורך הויזואלי CKEditor מאפשר לבחור כמה תאי טבלה על ידי גרירת סמן העכבר עליהם, ולפיכך החלת פעולה כמו למשל מחיקה על מספר מרובה של טורים יחד.

    עריכת תאי טבלה

    תפריט ההקשר של הטבלה מאפשר לך לערוך את תאי טבלה. אם אתה מרחף עם העכבר מעל תפריט אפשרויות התא, אפשרויות נוספות נהפכות לזמינות.

    תפריט ההקשר עבור אלמנטים של תאי טבלה

    לפניכם סקירה של כל האלמנטים בתפריט ההקשר של תאים:

    • הוספת תא לפני – מוסיף תא טבלה חדש לפני העמודה המכילה את סמן העכבר.
    • הוספת תא אחרי – מוסיף תא טבלה חדש אחרי העמודה המכילה את סמן העכבר.
    • מחיקת תאים מחיקת תאים המכילים את סמן העכבר.
    • מיזוג תאים –מיזוג מספר תאים לתא אחד. אפשרות זו זמינה רק אם נבחרו שני תאים או יותר.
    • מזג ימינה – מיזוג התא הנבחר עם התא שמימינו. תוכן שני התאים יאוחד. אפשרות זו זמינה רק אם נבחרו שני תאים או יותר.
    • מזג למטה – מיזוג התא הנבחר עם תא הממוקם בתחתיתו. התוכן של שני התאים הופך יתמזג. אפשרות זו זמינה רק אם נבחרה שני תאים או יותר.
    • פיצול תא אופקית – פיצול התא הנבחר לשניים, עם יצירת תא חדש מימינו. תוכן התא יישאר בתא המקורי השמאלי. אפשרות זו זמינה רק כאשר נבחר לא יותר מתא אחד.
    • פיצול תא אנכית – פיצול התא הנבחר לשניים, תוך כדי יצירת תא חדש בתחתיתו. תוכן התא יישאר בתא המקורי, העליון. אפשרות זו זמינה רק כאשר נבחר לא יותר מתא אחד.
    • תכונות התא – פותח את חלון הדו-שיח של תכונות התא המאפשר לך לקבוע את מימדי התא, סוג התא, צבעו, ואת יישור התוכן.

    שים לב שהעורך CKEditor מאפשר לבחור כמה תאים על ידי גרירת סמן העכבר עליהם, לפיכך ניתן להחיל פעולה כמו מחיקה או מיזוג על כמה תאים בפעולה אחת.

    תכונות התא

    תכונות התא

    תיבת הדו-שיח של תכונות התא (Cell Properties) של עורך CKEditor

    ניתן להוסיף ולערוך תאי טבלה בעזרת עורך CKEditor, עד ליצירת מראה והרגשה ייחודיים. הגדרות והעדפות שונות ניתנות לקביעה באמצעות דיאלוג תכונות התא הניתן לפתיחה מתפריט ההקשר של תא הטבלה.

    לפניכם סקירה מקיפה של כל האלמנטים בתיבת הדו-שיח של תכונות התא:

    • רוחב – רוחב התא בפיקסלים או בערכי אחוזים. קביעת רוחב התא באחוזים מאפשר לקבוע את הפרופורציות בשורה (ובעמודה) בה נמצא התא.
    • גובה – גובה התא בפיקסלים.
    • סוג תא – סוג תא הטבלה — תא נתונים רגיל או תא כותרת עם פורמט מיוחד.
    • מניעת גלישת שורות – קביעה זו מפעילה/מכבה את תכונת גלישת השורות של התוכן בתא.
    • פרישת שורות – הגדרה זו מותחת את התא כלפי מטה על פני כמה שורות. הכנסת ערך מספרי קובע את מספר השורות עליהן יתפרש התא.
    • פרישת עמודות – הגדרה זו פורשת את התא מימין על פני מספר עמודות. הכנסת ערך מספרי קובע את מספר העמודות עליהן יתפרש התא.
    • יישור אופקי – היישור האופקי של תוכן תא בטבלה. האפשרויות הבאות זמינות: לשמאלמרכזלימין.
    • יישור אנכי – היישור האנכי של תוכן תא בטבלה. האפשרויות הבאות זמינות: למעלהלאמצעלמטה או שורת בסיס.

    חלון דיאלוג בחירת הצבע של בCKEditor משמש להגדרת רקע התא וצבע גבול
    • צבע רקע – צבע רקע התא. ניתן להשתמש להשתמש באחת מהשיטות הבאות כדי להגדיר את הצבע:
      • הכנס את ערך ה- RGB אל תיבת הטקסט, בפורמט rgb(nn,nnnn) , כאשר nn הוא ערך מספרי בסקלה של 0 עד 255 המייצגים את ערוצי הצבעים אדום, ירוק, וכחול.
      • הכנס את ערך ה- hexadecimal RGB אל תיבת הטקסט, בפורמט #nnnnnn, כאשר n האותיות מייצגות שלישיית זוגות של ערכי צבעים המייצגים את ערוצי האדום, ירוק וכחול.
      • השתמש בכפתור ה- בחר לפתיחת תיבת הדו-שיח של בחירת הצבע וסמן את הצבע הנדרש בעזרת עכברך.
    • צבע גבול תא – הצבע של גבול התא. אתה יכול להשתמש באחת מהשיטות הבאות כדי להגדיר את הצבע:
      • הכנס את ערך ה- RGB אל תיבת הטקסט, בפורמט rgb(nn,nnnn) , כאשר nn הוא ערך מספרי בסקלה של 0 עד 255 המייצגים את ערוצי הצבעים אדום, ירוק, וכחול.
      • הכנס את ערך ה- hexadecimal RGB אל תיבת הטקסט, בפורמט #nnnnnn, כאשר n האותיות מייצגות שלישיית זוגות של ערכי צבעים המייצגים את ערוצי האדום, ירוק וכחול.
      • השתמש בכפתור ה- בחר לפתיחת תיבת הדו-שיח של בחירת הצבע וסמן את הצבע הנדרש בעזרת עכברך.

יש להתחבר למערכת על מנת להגיב.