יצירת טבלה עם CSS & Grid
table, tr ו-td. Grid שולט בפריטים בשני ממדים, ובדוגמה הזאת רואים כמה קוד הוא חוסך.section עם ה-class container, ובו div לכל תא: שורת כותרת (first name, last name, salary) ושלוש שורות נתונים, עם שמות מרחוב סומסום ומשכורות.nth-child 1, 2, 3) מודגשת וצבועה באפור בהיר. בפרויקט אמיתי מגדירים את הסלקטור כ-.container > div.display: grid ו-grid-template-columns. למשל 40% 40% 20% ליצירת שלוש עמודות, והתאים מסתדרים בהן לפי הסדר.2fr 2fr 1fr, שהן יחידות יחסיות כמו ב-Flex. repeat(3, 1fr) נותן שלוש עמודות שוות.grid-auto-rows: 70px קובע גובה קבוע, אבל טקסט ארוך נחתך. עם minmax(70px, auto) התא גדל לפי הצורך, ועם auto בלבד כל שורה תופסת כמה שהיא צריכה.column-gap ו-row-gap נותנים רווחים בין עמודות ושורות, ו-gap: 5px קובע את שניהם. בטבלת HTML רגילה זה קשה יותר.display: grid · grid-template-columns · fr · repeat() · grid-auto-rows · minmax() · column-gap · row-gap · gapפרקי ההרצאה: יצירת טבלה עם CSS & Grid
תמלול ההרצאה: יצירת טבלה עם CSS & Grid
הטקסט המלא של הדקות הראשונות בהרצאה «יצירת טבלה עם CSS & Grid» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים לשימוש בגריד. גריד מאפשר לנו לשלוט על סדרה של פריטים שאנחנו רוצים להציג בדו-מימד. פלקס אפשר להציג רשימה של פריטים בחד-מימד, שורה או עמודה, גריד דו-מימד.
דו-מימד זה כבר הרבה יותר מורכב מבחינת מה אנחנו יכולים לעשות ואיך אנחנו בדיוק יכולים להציג את כל הדברים האלה. ולכן בואו נחלק את כל העבודה הזאתי לשלוש דוגמאות שונות.
בדוגמא הזאת מה שאני רוצה להראות זה איך אפשר בעזרת גריד של CSS כמובן להציג טבלה. הרי איך אנחנו מציגים תמיד טבלה ב-HTML?
יש לנו טייבל ולכל שורה יכול להיות TD אבל לא רק, אולי בטבלה אנחנו רוצים THead מאיזושהי סיבה ובתוך ה-Head לשים כותרת ואנחנו רואים פתאום שיש כאן המון תגיות שבאות רק בשביל שבסופו של דבר יהיה לנו את הפריט שלנו פה.
גריד בא לחסוך כמה שיותר קוד ולאפשר בעזרת כמה שפחות כתיבה של CSS להשיג כל מיני דברים בדו מימד. אז הדוגמה הראשונה שאנחנו רוצים לראות זה בוא נניח שאני רוצה לסדר טבלה פשוטה ב-HTML אבל לא על ידי טייבל אלא על ידי CSS.
אז יש לי כאן איזושהי תמונה שבניתי של מה אני באמת רוצה להשיג. אני רוצה להשיג בדיוק את הטבלה הזאת. מה אנחנו רואים פה? בואו נשים את זה רגע כאן אולי ואנחנו רואים שיש לנו טבלה שיש לה שם פרטי, שם משפחה ומשכורת בתור כותרת.
אנחנו רואים שיש כאן את הערכים עצמם שזה שמות של כנראה ויש לנו את המשכורות שלהם ואנחנו רוצים להצליח לעשות את הטבלה הזאת זה כמובן תשלובת של html וcss אז בואו נראה איך אנחנו יכולים להשיג את זה דבר ראשון אני ב html רוצה לכתוב את המינימום שצריך
וזה אומר שאני צריך קונטיינר כמו שהיה לנו בפלקס קונטיינר גם כאן אני צריך קונטיינר בואו ניקח סקשן ניתן לו קלאס קונטיינר ומיד רק את הפריטים בוא נניח שכל פריט לפחות יהיה באיזשהו דיו משלו, כי אני כן רוצה לעצב איזה בורדר מסביב או איזה צבע.
אז יש לי רק שני חלקים, קונטיינר ואת הפריטים עצמם. מפה זה הפריטים, אז יש לי את ה-first name, יש לי מתחת את ה-last name ו-salary זה השורה הראשונה.
יש לנו כאן דיווים עבור בן אדם מספר שתיים, הוא נקרא מוישה אופניק ויש לו סלארי של 10,000.
בואו ניקח את הבן אדם הבא בתור שהוא קיפי בן קיפוד ויש לו 15,000. ולבסוף יש לנו את עוגי פלצת. עוגי פלצת הוא כבר 20,000. ואלה כמובן הדמויות הידועות שלנו מרחוב סומסום.
אז הנה יש לנו כרגע את השורה של הכותרת ושלוש שורות של תוכן. מפה אנחנו רוצים לגשת ולשלב CSS. בואו נראה שחיברנו.
מעולה. הדבר הראשון שהיינו עושים זה הגדרות כלליות שלא קשורות לגריד ויהיה General Styling. רק בשביל להבין שזה עדיין לא הגריד בואו נפנה לקונטיינר ונגיד לו Margin בואו ניקח 5% נניח.
אולי לפני זה אני אריץ את זה ואז נתחיל לראות איך זה בייסיקלי נראה. בואו רגע נריץ את האתר, את זה אני יכול כבר לסגור, כי אני רוצה להתחיל לבנות את התמונה הזאת שלב שלב, וכמו שהיה לנו בדוגמה של הפלקס, נשים את זה אחד ליד השני.
ומה שאני רואה כרגע זה את הדיבים אחד מתחת השנייה, כי כל דיב תופס לי 100% ממה שהוא יכול ולא נותן לאף דיב אחרת להיות איתו בשורה. זו הסיבה שאנחנו רואים את זה.
בואו נטפל בזה נתחיל עם מרג'ין 5% וכבר זה זז לו כזה אולי ניתן 3% יהיה קצת הדבר הבא שאנחנו רוצים זה בואו נטפל בפונט סייז שלנו וניתן לו אקסטרה לארג' שהוא יהיה טיפה יותר גדול מעולה אנחנו רוצים לפנות לכל אחד מהדיבים וכמובן שבאתר אמיתי הייתי עושה .container חץ דיב או איזה שהוא גלף ששייך לטבלה כמובן כי אחרת כל הדיווים באתר מושפעים וזה לא
משהו שאנחנו נרצה כי תמיד יש לנו עשרות אם לא מאות דיווים באתר ואנחנו רוצים טקסט עליין סנטר בואו נשים כל פריט הוא באמצע זה כבר אמור לעוף לי לאמצע ניתן לו בורדר 1px solid black בואו ניתן לו background ראונד אליס ובוא ניתן פאדינג 10 פיקסלים שהוא יהיה טיפה מרווח.
דבר נוסף שהייתי עושה וזה עדיין לא קשור לגריד זה שאת הכותרת הייתי צובע באיזשהו צבע אחר כמו שהיה לנו בתמונה אז div nth child 1 ו-time ו-3 בואו ניתן לו font-weight bold אז שלושת הראשונים אנחנו רואים שהם boldים וניתן light gray והנה שלושת הראשונים הפכו להיות gray.
מכאן אנחנו מתחילים grid for creating a table כי עם grid אפשר לעשות המון המון דברים. הדוגמה הראשונה שאנחנו רוצים לראות בסרטון הזה זה איך להשתמש בגריד בשביל לייצג טבלה מבלי להשתמש בכלל בתגיות של table של html כל מה שאנחנו צריכים לעשות זה לגשת לרמת הקונטיינר ולהגיד לו א', דיספלי גריד וברגע
שעשינו את זה הוא האמת שאני רואה שהוא עדיין לא הגיב לנו הוא שם אותם עדיין בצורה כזאת בואו ניתן לו גריד טמפלייט קולומס ונגיד לו כמה עמודות יש לו עכשיו אנחנו יכולים לסדר את העמודות ברוחב שאנחנו רוצים עבור כל עמודה אז בואו נניח שאנחנו רוצים שה first name יהיה 40 אחוז
מה שהוא יכול 40% ואנחנו עושים פה רווח לא פסיק ועוד 40% ואז יש לנו עמודה מספר 2 ושימו לב שהגריד מתחיל לסדר את כולם לפי הסדר בעמודות ובואו ניגש לעמודה האחרונה וניתן 20% והנה יש לנו כבר טבלה שימו לב 2 פקודות 1 2 וזהו תכף אנחנו נראה עוד דברים מגניבים אבל עד כדי כך זה חוסך לנו קוד.
ב-CSS יש לנו מינימום וב-HTML לא השתמשתי עם טייבל, לא השתמשתי עם TR ו-TDs, שמתי את המינימום שאני צריך. אבל בואו נראה עוד כל מיני דברים מעניינים שיש כאן.
כמו שאמרנו לעמודות להסתדר באחוזים, בואו נשים את זה רגע בהערה, יכלנו להגיד להם להסתדר באמות מידה. אם אנחנו נסתכל אנחנו נראה שזה כפול פי שתיים מזה זאת אומרת כאילו שזאת אמת מידה אחת הסלרי זה שתי אמות מידה וזה שתי אמות מידה כמו שהיה לנו בפלקס את האמות מידה גם כאן יש לנו זה מתבצע על ידי fr fraction בקיצור