מאפייני טבלאות HTML מעניקים לך שליטה רבה יותר על טבלאות HTML. יש הרבה מאפיינים הזמינים לטבלאות כדי להפוך אותם למעניינים יותר ולשנות את מראה הדף שלך.
מאפייני אלמנט TABLE HTML
ב HTML5 האלמנט משתמש בתכונות הגלובליות ובתכונה אחת אחרת והוא השתנה לערך 1 בלבד או ריק (כלומר גבול = ""). אם ברצונך לשנות את רוחב הגבול, עליך להשתמש ברוחב הגבול נכס CSS.
ראה למטה למידע על מאפייני טבלת HTML5 תקפים.
ישנן גם כמה מאפיינים שהם חלק ממפרט HTML 4.01 שהתיישן ב- HTML5:
- —השתמש במאפיין הריפוד של CSS ברכיבי TD ו- TH של השולחן.
- —השתמש בריווח הגבול של מאפיין CSS על השולחן.
- —השתמש בסגנונות CSS צבע גבול: שחור; וסגנון גבול על השולחן.
- —השתמש בסגנונות CSS צבע גבול: שחור; וסגנון גבול על האלמנטים המתאימים של השולחן.
- - במקום זאת, עליך לתאר את מבנה הטבלה ב CAPTION או לשים את הטבלה כולה באיור ולתאר אותה ב- FIGCAPTION. לחלופין, תוכל לפשט את מבנה הטבלה כך שלא יהיה צורך בהסבר.
- —השתמש במאפיין רוחב CSS.
ותכונה אחת שהוצאה משימוש ב- HTML 4.01 והיא גם מיושנת ב- HTML5.
- יישור - השתמש במקום זאת במאפיין שוליים CSS.
יש גם כמה תכונות שאינן חלק ממפרט HTML כלשהו. השתמש בתכונות אלה אם אתה יודע שהדפדפנים שאתה תומך בהם יכולים להתמודד איתם ולא אכפת לך מ- HTML תקף.
- —השתמש במקום זאת בצבע הרקע של מאפיין CSS.
- bordercolor - השתמש במקום זאת בצבע הגבול של המאפיין CSS.
- bordercolorlight - השתמש במקום זאת בצבע הגבול של המאפיין CSS.
- bordercolordark - השתמש במקום זאת בצבע הגבול של מאפיין CSS.
- cols - אין אלטרנטיבה לתכונה זו.
- גובה - השתמש במקום זאת בגובה המאפיין CSS.
- —השתמש במקום זאת בשולי המאפיינים של CSS.
- —השתמש במקום זאת במאפיין ה- CSS לבן.
- —השתמש במאפיין CSS ליישר אנכית במקום.
מאפייני אלמנט טבלה HTML5
כפי שהזכרנו לעיל, יש רק מאפיין אחד, מעבר לתכונות הגלובליות, שתקף על רכיב HTML5 TABLE: גבול.
תכונת הגבול משמשת להגדרת גבול סביב הטבלה כולה וכל התאים בתוכה. הייתה איזו שאלה אם הוא ייכלל במפרט HTML5, אך הוא נותר מכיוון שהוא סיפק מידע על מבנה הטבלה, מעבר להשלכות סגנון פשוט.
כדי להוסיף את תכונת הגבול, אתה מגדיר את הערך ל -1 אם יש גבול וריק (או משאיר את התכונה) אם אין. רוב הדפדפנים יתמכו גם ב- 0 ללא גבולות ובכל ערך שלם אחר (2, 3, 30, 500 וכו ') כדי להכריז על רוחב הגבול בפיקסלים, אך זה מיושן ב- HTML5. במקום זאת, עליך להשתמש במאפייני סגנון גבול CSS כדי להגדיר את רוחב הגבול וסגנונות אחרים.
ליצירת טבלה עם גבול, כתוב:
גבול = "1">
זהו שולחן עם גבול
זה מתאר את תכונות ה- TABLE שתקפות ב- HTML 4.01, אך אינן מיושנות ב- HTML5. אם אתה עדיין כותב מסמכי HTML 4.01, אתה יכול להשתמש במאפיינים אלה, אך לרובם יש אלטרנטיבות שיהפכו את הדפים שלך לעמידים יותר בעתיד עבור כשתעבור ל- HTML5.
תכונות HTML 4.01 תקפות
התכונה שתיארנו לעיל. ההבדל היחיד ב- HTML 4.01 מ- HTML5 הוא שאתה יכול לציין כל מספר שלם שלם (0, 1, 2, 15, 20, 200 וכו ') כדי להגדיר את רוחב הגבול בפיקסלים.
לבניית שולחן עם גבול של 5 פיקסלים, כתוב:
גבול = "5">
לטבלה זו גבול של 5 פיקסלים.
התכונה מגדירה את כמות הרווח בין גבולות התא לתוכן התא. ברירת המחדל היא שני פיקסלים. הגדר את ריפוד הסלולר ל -0 אם אינך רוצה רווח בין התוכן לגבולות.
כדי להגדיר את ריפוד התא ל -20, כתוב:
cellpadding = "20">
בטבלה זו יש ריפוד תא של 20.
גבולות התא יופרדו ב -20 פיקסלים.
צפה בדוגמה לטבלה עם ריפוד תא.
התכונה מגדירה את כמות הרווח בין תאי הטבלה לתוכן התא. בדומה לריפוד סלולרי, ברירת המחדל מוגדרת לשני פיקסלים, לכן עליך להגדיר אותה ל -0 אם אינך רוצה רווח תאים.
כדי להוסיף מרווח תאים לטבלה, כתוב:
cellspacing = "20">
טבלה זו כוללת רווח תאים של 20.
התאים יופרדו ב -20 פיקסלים.
התכונה מזהה אילו חלקים מהגבול המקיפים את החלק החיצוני של הטבלה ייראו. אתה יכול למסגר את השולחן שלך על כל ארבעת הצדדים, בכל צד אחד, למעלה ולמטה, שמאלה וימינה, או אף אחד מהם.
הנה ה- HTML לטבלה עם גבול הצד השמאלי בלבד:
frame = "lhs">
השולחן הזה
יהיה
רק ה
צד שמאל ממוסגר.
ודוגמא נוספת עם המסגרת התחתונה:
מסגרת = "למטה">
בטבלה זו יש מסגרת בתחתית.
בדוק כמה טבלאות עם מסגרות.
התכונה דומה לתכונת המסגרת, רק שהיא משפיעה על הגבולות סביב תאי הטבלה. אתה יכול להגדיר כללים על כל התאים, בין עמודות, בין קבוצות כמו TBODY ו- TFOOT או אף אחד מהם.
לבניית טבלה עם קווים רק בין השורות, כתוב:
חוקים = "שורות">
שולחן 4x4 זה יש
השורות לא עמודות
מתואר עם
תכונה כללים.
ועוד אחד עם קווים בין העמודות:
חוקים = "cols">
זה
שולחן
איפה ה
עמודות
הם
מודגש
ה תכונה מספקת מידע אודות הטבלה לקוראי מסך וסוכני משתמשים אחרים שעלולים להתקשות בקריאת טבלאות. כדי להשתמש במאפיין הסיכום, אתה כותב תיאור קצר של הטבלה ושם אותו כערך המאפיין. הסיכום לא יוצג בדף האינטרנט ברוב דפדפני האינטרנט הרגילים.
כך כותבים טבלה פשוטה עם סיכום:
סיכום = "זו טבלת דוגמה המכילה מידע ממלא. מטרת הטבלה היא להדגים סיכום. ">
עמודה 1 שורה 1.
טור 2 שורה 1.
עמודה 1 שורה 2.
טור 2 שורה 2.
התכונה מגדירה את רוחב הטבלה בפיקסלים או כאחוז מאלמנט המיכל. אם הרוחב לא מוגדר, הטבלה תתפוס מקום רב ככל שיידרש כדי להציג את התוכן, עם רוחב מרבי זהה לרוחב של אלמנט האב.
לבניית טבלה עם רוחב ספציפי בפיקסלים, כתוב:
רוחב = "300">
טבלה זו היא 80% מרוחב המכולה בה הוא נמצא.
וכדי לבנות טבלה עם רוחב שהוא אחוז מאלמנט האב, כתוב:
רוחב = "80%">
טבלה זו היא 80% מרוחב המכולה בה הוא נמצא.
מאפיין טבלה של HTML 4.01 שהוצא משימוש
יש תכונה אחת של אלמנט ה- TABLE שהוצא משימוש ב- HTML 4.01 ומיושן ב- HTML5: align. תכונה זו מאפשרת לך לקבוע היכן הטבלה צריכה להיות ממוקמת בדף ביחס לטקסט שלידה. מאפיין זה הוצא משימוש ב- HTML 4.01, וכדאי להימנע משימוש בו. במקום זאת, עליך להשתמש במאפיין CSS או בשוליים-שמאל: אוטומטי; ושוליים ימניים: אוטומטי; סגנונות. המאפיין float נותן לך תוצאה שקרובה יותר לתכונת היישור שסופקה, אך היא יכולה להשפיע על האופן שבו שאר תוכן הדף מוצג. השוליים-ימניים: אוטומטי; ושוליים-שמאל: אוטומטי; הם מה W3C ממליץ כחלופה.
הנה דוגמה שהוצא משימוש באמצעות התכונה align:
align = "right">
טבלה זו מיושרת ימינה.
טקסט זורם סביבו שמאלה.
וכדי לקבל את אותו האפקט גם ב- HTML תקף (שלא הוצא משימוש), כתוב:
style = "float: right;">
טבלה זו מיושרת ימינה.
טקסט זורם סביבו שמאלה.
מאפייני טבלה מיושנים
המידע הקודם מתאר תכונות של אלמנט ה- HTML שתקפות ב- HTML 4.01 אך מיושנות ב- HTML5.
להלן תיאור מאפייני TABLE שאינם תקפים במפרט הנוכחי כלשהו. אם לא אכפת לך אם הדפים שלך מאמתים והמשתמשים שלך משתמשים בדפדפן התומך ברכיבים אלה, תוכל להשתמש באלמנטים אלה. אך רובם אינם נתמכים בדפדפנים מודרניים או שיש להם חלופות התואמות יותר לתקנים.
אנו לא ממליצים להשתמש במאפיינים אלה בטבלאות ה- HTML שלך.
התכונה היא מאפיין ישן שנכלל לפני שתמיכה נרחבת של CSS. זה מאפשר לך לשנות את צבע הרקע של הטבלה. ניתן להגדיר שם צבע או קוד הקסדצימלי. מאפיין זה עדיין עובד בהרבה דפדפנים, אך עבור HTML מוגן עתידי, אתה לא צריך להשתמש בו, ולהשתמש במקום זאת ב- CSS.
האלטרנטיבה הטובה יותר לתכונה זו היא מאפיין הסגנון.
כדי לשנות את צבע הרקע של הטבלה, כתוב:
style = "רקע-צבע: #ccc;">
לטבלה זו יש רקע אפור.
בדומה לתכונת bgcolor, התכונה bordercolor מאפשרת לך לשנות את צבע התכונה. מאפיין זה נתמך רק על ידי Internet Explorer. במקום זאת, עליך להשתמש במאפיין בסגנון גבול צבע.
כדי לשנות את צבע גבול השולחן שלך, כתוב:
style = "border-color: red;">
לטבלה זו יש גבול אדום.
המאפיינים bordercolorlight ו- bordercolordark נכללו ב- Internet Explorer כדי לאפשר לך ליצור גבול תלת ממדי סביב השולחן שלך. עם זאת, החל מ- IE8 ומעלה, הדבר נתמך רק במצב IE7 Standards ו- מצב מוזרויות. מיקרוסופט מצהירה כי מאפיינים אלה אינם נתמכים עוד.
לזמן קצר, תכונת cols באלמנט TABLE הוצעה כדי לעזור לדפדפנים לדעת כמה עמודות היו בטבלה. הנחת היסוד הייתה שזה יעזור להאיץ את העיבוד של שולחנות גדולים. עם זאת, הוא יושם רק על ידי Internet Explorer, ונכון ל- IE8 ואילך, זה נתמך רק במצב IE7 Standards Mode ו- Quirks Mode.
מכיוון שיש מאפיין רוחב (מיושן ב- HTML5) אנשים רבים הניחו שיש מאפיין גובה גם לטבלאות. אך מכיוון שטבלאות תואמות את רוחב התוכן שלהן או את הרוחב המוגדר במאפיין CSS או רוחב, לא ניתן היה להגביל את הגובה. אז במקום זאת, הדפדפנים אפשרו למאפיין גובה להגדיר את הגובה המינימלי של הטבלה. אם השולחן היה גבוה מגובה זה, הוא היה מראה גבוה יותר. אבל אתה צריך להשתמש בנכס.
באמצעות מאפיין גובה CSS תוכלו להגביל את הגובה אם תשתמשו גם במאפיין CSS כדי להגדיר מה קורה עם עודף תוכן.
כדי לקבוע את הגובה המינימלי על השולחן, כתוב:
style = "height: 30em;">
טבלה זו גובהה לפחות 30 אמ"ש.
שתי התכונות והוסיפו רווח סביב הצד השמאלי / הימני (hspace) והחלק העליון / התחתון (vspace) של הטבלה. עליכם להשתמש במקום זאת במאפיין הסגנון.
כדי להגדיר את החלל האנכי ל -20 פיקסלים ואת החלל האופקי ל 40 פיקסלים, כתוב:
style = "margin: 20px 40px;"
לטבלה זו יש מרחב v של 20 פיקסלים ו- hspace של 40 פיקסלים.
התכונה היא תכונה בוליאנית המגדירה האם על תוכן הטבלה לעטוף בקצה האלמנט או החלון האב או לאלץ גלילה אופקית. במקום זאת, עליך להגדיר את מאפייני העטיפה של כל תא טבלה באמצעות מאפיין CSS.
כדי להכין טור עם הרבה טקסט שאינו עטוף, כתוב:
style = "white-space: nowrap;"> זהו טור עם המון תוכן. אך גם אם הוא רחב יותר מהמיכל הטקסט לא אמור לעטוף לשורה הבאה, אלא לאלץ את חלון הדפדפן לגלול אופקית כדי לראות את כל התוכן.
לבסוף, התכונה מגדירה כיצד התוכן של כל תא אמור להתאים אנכית בתוך התא. במקום תכונה לא חוקית זו, עליך להשתמש במאפיין CSS בכל תא שברצונך לשנות את היישור שלו. לא תבחין בהשפעות של סגנון זה אלא אם כן תוכן התא קטן מהשטח הזמין שנוצר על ידי תאים אחרים גדולים יותר.
כדי לאלץ תא להתיישר לתחתית (ולא לאמצע, כברירת מחדל), כתוב:
תא זה ארוך יותר מהשאר וכך יאלץ את הגובה להיות גבוה יותר. אז תראה שהתא המיושר אנכית מיושר לתחתית.
style = "vertical-align: bottom;"> תוכן בתחתית.
תוכן באמצע.