כיצד להשתמש באלמנטים 'טבלה' (HTML)

תכונות טבלת HTML נותנות לך שליטה רבה יותר על טבלאות HTML. יש הרבה תכונות זמינות טבלאות כדי להפוך אותם יותר מעניין ולשנות את המראה של הדף שלך.

HTML תכונות רכיב הטבלה

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

ראה למטה כדי ללמוד על תכונות טבלה HTML5 חוקיות.

יש גם כמה תכונות כי הם חלק מפרט HTML 4.01 כי הפך מיושן ב- HTML5:

• השתמש ב- CSS ריפוד רכוש על השולחן TD ו TH אלמנטים.
• - השתמש במאפיין CSS גבול ריווח על השולחן.
• השתמש בסגנונות CSS border-color: black; ו בסגנון הגבול על השולחן.
• השתמש בסגנונות CSS border-color: black; ו בסגנון הגבול על המרכיבים המתאימים של הטבלה.
• - במקום זאת, אתה צריך לתאר את המבנה של הטבלה ב כובע או לשים את כל הטבלה ב דמות ותיארו את זה ב FIGCAPTION. לחלופין, אתה יכול לפשט את המבנה של השולחן, כך שאין צורך בהסבר.
• השתמש ב- CSS רוחב נכס.

ותכונה אחת שהוצאה משימוש ב- HTML 4.01 והיא גם מיושנת ב- HTML5.

למידע נוסף על HTML 4.01 תכונות לוח.

• ישרהשתמש ב- CSS שולים במקום זאת.

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

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

למידע נוסף על תכונות הטבלה הספציפיות לדפדפן.

HTML5 תכונות רכיב הטבלה

כפי שציינו לעיל, יש רק תכונה אחת, מעבר למאפיינים הגלובליים, שהיא תקפה ב- HTML5 שולחן באל you גבול.

ה גבול התכונה משמשת להגדרת גבול סביב הטבלה כולה וכל התאים שבתוכו. היתה שאלה כלשהי אם זה ייכלל במפרט 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.

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

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

כדי להגדיר את ריפוד התא 20, לכתוב:

<> cellpadding = "20" > טבלה זו כוללתcellpadding של 20. גבולות תאים יופרדו על ידי 20 פיקסלים.

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

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

כדי להוסיף ריווח תאים לטבלה, כתוב:

<> cellspacing = "20" > טבלה זו כוללתcellspacing של 20. תאים יופרדו על ידי 20 פיקסלים.

ראה טבלה עם מרווח חלל

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

הנה HTML עבור טבלה עם רק את הגבול בצד שמאל:

frame = "lhs" > השולחן הזה יהיה רק ה צד שמאל ממוסגר.

ועוד דוגמה עם המסגרת התחתונה:

frame = "below" > בטבלה זו יש מסגרת בתחתית.

בדוק כמה שולחנות עם מסגרות

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

כדי לבנות טבלה עם שורות בלבד בין השורות, כתוב:

כללים = "שורות" > זה שולחן 4x4 יש השורות אינן עמודות שצוין עם המאפיינים.

ועוד אחד עם שורות בין העמודים:

הכללים = "cols" > זה שולחן איפה ה עמודות הם מודגשת

הנה דוגמה לטבלה עם כללים

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

הנה איך לכתוב טבלה פשוטה עם סיכום:

<> תקציר = "זהו טבלה מדגמית המכילה מידע מילוי, ומטרתה להציג סיכום". > טור 1 שורה 1 שורה 2 שורה 1 טור 1 שורה 2 טור 2 שורה 2

הצג טבלה עם סיכום

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

כדי לבנות טבלה עם רוחב ספציפי בפיקסלים, כתוב:

<> רוחב 3,000 "300" > טבלה זו היא 80% מרוחב המכל שבו הוא נמצא.

וכדי לבנות טבלה עם רוחב כי הוא אחוז של אלמנט ההורה, לכתוב:

<> רוחב = "80%" > טבלה זו היא 80% מרוחב המכל שבו הוא נמצא.

ראה דוגמה לטבלה עם רוחב

HTML מופרך 4.01 מאפיין טבלה

יש תכונה אחת שלשולחן אלמנט שהוצא משימוש ב- HTML 4.01 ושהוא מיושן ב- HTML5:ישר. תכונה זו מאפשרת לך להגדיר היכן הטבלה צריכה להיות ממוקמת בדף ביחס לטקסט שנמצא לידה. תכונה זו הופסקה ב- HTML 4.01, ועליך להימנע משימוש בה. במקום זאת, עליך להשתמש במאפיין CSS או ב-שוליים-שמאל: אוטומטי; וmargin-right: auto; סגנונות. הלצוף נכס נותן לך תוצאה כי הוא קרוב יותר למהישר תכונה מסופקת, אבל זה יכול להשפיע על הדרך בה שאר תוכן הדף להציג. הmargin-right: auto; ושוליים-שמאל: אוטומטי; הם מה W3C ממליץ כחלופה.

הנה דוגמה משומשת באמצעותישר תכונה:

<> align = "right" > טבלה זו מיושרת מימין טקסט זורם סביבו שמאלה

ראה דוגמה שהוצגה משימושישר תכונה.

וכדי לקבל את אותו אפקט עם HTML חוקי (לא הוצא משימוש), לכתוב:

<> style = "float: right;" > טבלה זו מיושרת מימין טקסט זורם סביבו שמאלה

להלן הסברשולחן תכונות שאינן חלק מפרט HTML כלשהו.

המידע הקודם מתאר תכונות של אלמנט HTML תקפות ב- HTML 4.01 אך הן מיושנות ב- HTML5.

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

אנו לא ממליצים להשתמש בתכונות אלה בטבלאות HTML שלך.

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

החלופה הטובה ביותר לתכונה זו היא מאפיין הסגנון.

כדי לשנות את צבע הרקע של טבלה, כתוב:

<> סגנון = "צבע רקע: #ccc;" > בטבלה זו יש רקע אפור

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

כדי לשנות את צבע הגבול של הטבלה, כתוב:

סגנון = "border-color: red;" > בטבלה זו יש גבול אדום.

הbordercolorlight וbordercolordark התכונות נכללו ב- Internet Explorer כדי לאפשר לך ליצור גבול תלת-ממדי סביב הטבלה. עם זאת, כמו IE8 ומעלה, זה נתמך רק במצב IE7 סטנדרטים מצב Quirks. מיקרוסופט מציינת כי מאפיינים אלה אינם נתמכים עוד.

במשך זמן קצר,קולס תכונה עלשולחן אלמנט הוצע כדי לעזור לדפדפנים לדעת כמה עמודות יש בטבלה. ההנחה היתה כי זה יעזור להאיץ את עיבוד של שולחנות גדולים. עם זאת זה היה מיושם רק על ידי Internet Explorer, וכן של IE8 ומעלה, זה נתמך רק במצב IE7 סטנדרטים מצב Quirks.

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

עם CSSגובה תכונה אתה יכול להגביל את הגובה אם אתה משתמש במאפיין CSS גם כדי להגדיר מה קורה עם תוכן עודף.

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

<> style = "height: 30em;" > טבלה זו היא לפחות 30 ems גבוה.

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

כדי להגדיר את החלל האנכי ל -20 פיקסלים ואת החלל האופקי ל -40 פיקסלים, כתוב:

<> סגנון = "שולי: 20px 40px;" טבלה זו כוללת vspace של 20 פיקסלים ו hspace של 40 פיקסלים.

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

כדי ליצור עמודה עם הרבה טקסט לא לעטוף, לכתוב:

<> style = "white-space: nowrap;" > זהו טור עם טון של תוכן. אבל גם אם הוא רחב יותר מהמכולה, הטקסט לא צריך לעטוף את השורה הבאה, אלא במקום זאת לחסום את חלון הדפדפן כדי לגלול אופקית כדי לראות את כל התוכן.

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

כדי לאלץ תא ליישר לתחתית (במקום באמצע, כברירת מחדל), לכתוב:

<> style = "vertical-align: bottom;" > תוכן בתחתית.

תא זה ארוך יותר משאר וכך יאלץ את הגובה להיות גבוה יותר. אז אתה תראה את התא מיושר אנכית מיושר לתחתית.

תוכן באמצע.