מהי תכונת 'rowspan' וכיצד להשתמש עם אלמנט 'td' ב-HTML?

Mhy Tkwnt Rowspan Wkyzd Lhstms M Lmnt Td B Html



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

מדריך זה מדגים מהי תכונת 'rowspan' וכיצד להשתמש בה עם האלמנט 'td'.

מהי תכונת 'טווח שורות'?

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





מהו אלמנט 'td'?

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

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



כיצד להשתמש בתכונה 'rowspan' עם אלמנט 'td'?

להדגמה טובה יותר של הקשר בין תכונת 'rowspan' לאלמנט 'td'. הבה נעבור על דוגמה מעשית על ידי ביצוע המדריך שלב אחר שלב להלן:



שלב 1: יצירת טבלה ב-HTML

ראשית, צור טבלה בעזרת ' <טבלה> 'תג. בתוכו הוסף מספר '

' תג ליצירת תאים:



< סִגְנוֹן >

שולחן{

border-collapse:collapse;

שוליים: 40px;

}

th,td{

border:2px אדום מלא;

ריפוד: 20px;

}

< / סִגְנוֹן >

< / רֹאשׁ >

< גוּף >

< שולחן >

< tr >

< ה' > emp.id < / ה' >

< ה' > שם העובד < / ה' >

< ה' > שכר < / ה' >

< / tr >

< tr >

< td > 1 < / td >

< td > ג'ון < / td >

< td > 160,000 < / td >

< / tr >

< tr >

< td > 2 < / td >

< td > יוסף < / td >

< td > 120,000 < / td >

< / tr >

< tr >

< td > 3 < / td >

< td > אנג'לה < / td >

< td > 120,000 < / td >

< / tr >

< tr >

< td > 4 < / td >

< td > שני < / td >

< td > 80,000 < / td >

< / tr >

< / שולחן >

< / גוּף >

בקטע הקוד שלמעלה:

  • ראשית, חמש השורות נוצרו וכמה נתוני דמה מסופקים לכל תא.
  • לאחר מכן, ה' שולחן נבחר הרכיב והגדר את ' הִתמוֹטְטוּת 'ערך ל-CSS' קריסת גבול ' תכונה.
  • לאחר מכן, ה' גבול ' ו' ריפוד מאפיינים משמשים כדי לשפר את נראות המשתמש וליצור אפקט מושך את המשתמש.

לאחר ביצוע הקוד, הטבלה מופיעה כך:



הפלט לעיל מציג שהטבלה נוצרה ומעוצבת.

שלב 2: שימוש בתכונה 'rowspan' עם אלמנט 'td'.

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

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

< גוּף >

< שולחן >

< tr >

< ה' >Emp.id< / ה' >

< ה' >שם העובד< / ה' >

< ה' >משכורת< / ה' >

< / tr >

< tr >

< td > 1 < / td >

< td >ג'ון< / td >

< td > 160 ,000< / td >

< / tr >

< tr >

< td > 2 < / td >

< td >יוסף< / td >

< td תוחלת שורות = '2' > 120 ,000< / td >

< / tr >

< tr >

< td > 3 < / td >

< td >אנג'לה< / td >

< / tr >

< tr >

< td > 4 < / td >

< td >סקרלט< / td >

< td > 80 ,000< / td >

< / tr >

< / שולחן >

< / גוּף >

בקוד למעלה:

  • 'טווח השורות' מצורף כאשר לעובד יש ' שכר אלמנט td.
  • הערך של ' 2 ' מסופק לתכונה 'rowspan' שמגדירה את אותם נתונים בשני התאים הסמוכים כפי שמוצג להלן:

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

סיכום

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

אַחֵר

קטגוריה

רשום פופולרי

יצירת משחק Tic-Tac-Toe ב-C++

מה זה std::array ב-C++?

Vim סוף קובץ

כיצד להשתמש במערך של אובייקטי JSON ב-JavaScript

מחרוזת C++::front & C++ string::back

כיצד לשלוט בתנועה לרשתות משנה באמצעות ACL רשת

מה ההבדל בין C++ String == לבין Compare() Method

כיצד להשתמש ב-Regex Whitespace ב-Java

כיצד ליישם אחסון נתונים עם אמזון לאדום?

כיצד ליצור עין עכביש מותסס במיינקראפט

עבור Loop C++

כיצד להשתמש ב-Pent Document Retriever ב-LangChain?

Array.findIndex() ב-ES6

פקודות השהה והמתנה של קבצי אצווה: כיצד לשלוט בזרימת הסקריפטים שלך

כיצד להגדיר הגדרות משימות של אמזון ECS?

כיצד ליצור ולהציג תצוגה מקדימה של קבצי Vim Markdown

כיצד לבצע Dockerize יישום Node.js

מהו קטלוג העדכונים של Microsoft וכיצד להשתמש בו?

כיצד להגדיר כתובת IP סטטית של ESP32

ממיר כסף רובוקס