CSS: עיצוב שולחן. דוגמאות של רישום

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

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

גבול שולחן

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

אתה יכול לציין את המסגרת החיצונית של השולחן כולו:

שולחן {גבול: 3px מוצק שחור; }

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

ה, td {גבול: שחור מוצק 3px;}

העובי והצבע, תוכלו לציין. זכור כי הגבולות אינם הוכפלו כאשר שחבור תאים.

המילה מציינת רישום רציף מוצק. ניתן לציין ערכים אחרים.

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

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

שולחן {העליון גבול: 1px מוצק אדום; }

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

כותרת הטבלה

כותרת טבלה יכולה להיות מצוינת באמצעות התג . תג זה יכול להיות ב- CSS לרשום הרבה תכונות עבור כוונון עדין. עיצוב שולחן CSS הוא טוב כי אפשר לתמרן את האלמנטים כפי שאתה רוצה.

כותרת זו מוצגת באותו אופן כתקן בספרים (כגון "לוח 1").

אתה יכול לציין את המיקום של הכיתוב בצד הכותרת ורכוש (העליון או התחתון). יישור לימין או לשמאל מוגדר על ידי יישור טקסט הרכוש.

שולחנות רקע

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

הצבע יכול להיות מוגדר בתור שם, ו קידודים שונים. בנוסף, ניתן לציין את הבאים:

• שקוף - שקוף.
• בירושה - הצבע זהה לזה של אלמנט ההורה.
• ראשוני - ברירת מחדל.

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

בנוסף, ברקע יכול להיות תמונה. כדי לעשות זאת, בנכס רקע הדימוי הקבוע בסגנון. השביל הוא כזה:

url ( 'כתובת')

השביל אל הקובץ עשוי להיות גם יחסיים או מוחלט.

נוסף מילוי מסובך יכול להיעשות עם שיפוע:

• ליניארי-שיפוע ();
• שיפוע רדיאלי ();
• חוזר ליניארי שיפוע () ו-רדיאלי-שיפוע חוזר () - שיפוע חזר.

תא רקע

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

בנוסף לסירוגין, ואתה יכול לציין את מספר עמודה או שורה מסוימת. לדוגמה ככה:

• TR: ילד-המי יודע כמה (אפילו) {...} - לציין interlaced;
• TR: nth-ילד (1) {...} - אינדיקציה המאפיינים של שורה מסוימת;
• TD: nth-ילד (אפילו) {...} - אינדיקציה לסירוגין עמודות;
• TD: nth-ילד (1) {...} - אינדיקציה המאפיינים של עמודה מסוימת.

מלבד רצף ומספרים ניתן לציין - את (TD: ראשון-ילד) הראשון או האחרון (TD: אחרון ילד).

הפער בין התאים

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

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

קריסתה גבול: קריסה

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

border-collapse: נפרד

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

ריווח גבול: 20px.

אם ברצונך לציין מרחק שונה בין שורות ועמודות, זה מצביע על שני דברים:

border-spacing: 10px20px.

הבדל הדפדפנים

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

האמור לעיל הוא דוגמה עוביים מסגרת לערכים דיגיטלי.

לדוגמה זו, עובי של מסגרות עבור קבועים.

סגנונות גבול גם שונים מאוד.

לכן, ההתפתחות תמיד לראות את התוצאה בדפדפנים שונים.

ב- CSS שולחנות בעיצוב מומלץ לבדוק את סוג הדפדפן. במיוחד בעיה גדולה פעם למשתמשים עם גרסאות ישנות יותר של אינטרנט אקספלורר.

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

רוב הבעיות המתעוררות מן הצללים.

CSS: דוגמאות עיצוב טבלה

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

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

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

הקצוות יכולים להתבצע מעוגלות. זה נראה די נחמד.

מסקנה

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

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

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