כיצד ליצור טבלה רק באמצעות תג ו-CSS

'תגים בתוכו.

---

---

דוגמא
שקול את דוגמה הבאה של קוד HTML כדי ליצור טבלה:

< div מעמד = 'divTable' >
< div מעמד = 'שורת כותרת' >
< div מעמד = 'divCell' >< ב > תְעוּדַת זֶהוּת < / ב >< / div >
< div מעמד = 'divCell' >< ב > שֵׁם < / ב >< / div >
< div מעמד = 'divCell' >< ב > גיל < / ב >< / div >
< / div >
< div מעמד = 'divRow' >
< div מעמד = 'divCell' > 001 < / div >
< div מעמד = 'divCell' > נַפָּח < / div >
< div מעמד = 'divCell' > 25 < / div >
< / div >
< div מעמד = 'divRow' >
< div מעמד = 'divCell' > 002 < / div >
< div מעמד = 'divCell' > ג'ון < / div >
< div מעמד = 'divCell' > 31 < / div >
< / div >
< div מעמד = 'divRow' >
< div מעמד = 'divCell' > 003 < / div >
< div מעמד = 'divCell' > צ'ארלס < / div >
< div מעמד = 'divCell' > 28 < / div >
< / div >
< / div >

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

• א '
  'תג נוסף עם הכיתה בשם ' divTable '.
• בתוך ה ' div ' רכיב מיכל, הוסף עוד ' div ' רכיב מיכל עם המחלקה המוצהרת כ' headerRow '.
• שוב, הוסף שלוש ' div ' רכיבים בעלי הכיתות בשם ' divRow ' עם שלושה מיכלי משנה עם ' divCell ' מעמד.
• לאחר מכן, הוסף שלושה רכיבי div הוסף את ' תְעוּדַת זֶהוּת ', ' שֵׁם ' ו' גיל ' בשורת הכותרת של הטבלה.
• לאחר מכן, ציין את הערכים עבור 'ID', 'שם' ו'גיל' עבור כל רכיב div.

הכל היה על איך להשתמש ב' div ' רכיב ליצירת טבלה. כעת, בואו נחיל את מאפייני ה-CSS עליו:

---

---

.divTable
{
תצוגה: שולחן;
רוֹחַב :אוטומטי;
רקע כללי- צֶבַע :#eee;
גבול :1px מוצק # 666666 ;
border-spacing:5px;
}
.divRow
{
רוֹחַב :אוטומטי;
display:table-row;
}
.divCell
{
רוֹחַב :150px;
לצוף:שמאל;
display:table-column;
רקע כללי- צֶבַע : rgb ( 212 , 209 , 209 ) ;
}

באלמנט סגנון CSS לעיל:

• הוסף בורר שמתייחס ל' divTable ' (המכיל את כל ערכי הטבלה) ולהגדיר את מאפייני ה-CSS הרצויים (כלומר, ' לְהַצִיג ', ' רוֹחַב ', ' צבע רקע ', ' גבול ' ו' מרווח גבולות ”) עבור תוכן הטבלה.
• לאחר מכן, הוסף בורר מחלקה שבוחר את האלמנטים של ' divRow ' מחלקה כדי להוסיף את ה-CSS ' רוֹחַב ' ו' לְהַצִיג ' מאפיינים לאלמנטים.
• לבסוף, הוסף את מאפייני סגנון ה-CSS לאלמנטים ב-' .divCell ' בורר כיתות.

פעולה זו תיצור טבלה בפלט ותציג את התוצאות הבאות:

זה היה הכל על יצירת טבלה ב-HTML תוך שימוש רק בתגיות