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