שיעור על HTML. מיזוג תאים

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

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

מבוא לתורה

ב- HTML, האיחוד של תאים מתרחש באמצעות שתי תכונות: colspan ו- rowspan. הם שצוינו עבור תג td.

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

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

HTML-Table: למזג תאים אנכית ואופקית

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

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

השורה התחתונה היא כי אתה אומר את התא כמה מקום זה ייקח. ערך ברירת המחדל הוא 1.

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

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

• שורה - שורה.
• Col - טור / עמודה.
• Span - אגוד.

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

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

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

HTML: למזג תאים. דוגמאות

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

ניתן גם לשלב את השלושה במרכז התא. במקרה הראשון תכונה colspan מציין את התא №1. הנה, הראשון יהיה ללא שינוי, ואת השני מתווסף colspan, שווה שלוש.

אם אתה רוצה למזג את כל התאים בשורה להיות חד, ולאחר מכן להסיר את td הארבעה מצביעים = colspan הראשון "5".

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

שולחן כמסגרת באתר

ב- HTML, האיחוד של תאים אינו משמש תמיד עבור שולחנות רגילים עם המידע (ב- Word או Excel). מעצבי אתרים קרובות, אבל לפני הסקרים השתמשו בם במשך הפריסה של אתרים.

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

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

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

מסקנה

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

כאשר לצבור ניסיון, פעולות אלה ניתן לבצע בראש שלך בקלות.