כתיבה זו תסביר הליך להוספת תמונה בתוך תא הטבלה ב-HTML.
כיצד להוסיף תמונה בתוך תא טבלה ב-HTML?
ה-HTML ' תג ' משמש להוספת תמונה לתא טבלה.
תחביר
עקוב אחר התחביר כדי להטמיע תמונה בתוך תא הטבלה:
< td >< img src = '' הכל = '' רוֹחַב = '' >< / td >
כאן:
- '
אלמנט ' מציין את תא הטבלה שבו יש להוסיף את התמונה. - '
'תג משמש כדי לציין את התמונה.
- ' src ' התכונה מגדירה את נתיב התמונה.
- ' הכל ' מסמל את הטקסט שיוצג על המסך במקרה שהתמונה לא תצליח להיטען.
- ' רוֹחַב ' קובע את רוחב התמונה.
דוגמא
בקובץ HTML, צור טבלה על ידי ביצוע ההוראות שסופקו:
- ' <טבלה> אלמנט ' משמש ליצירת טבלה.
- '
' אלמנט מציין שורה. - ' <ה> ' מתאים כותרת שבה ' colspan ' מאפיין מציין כמה עמודות תא צריך לכסות.
- '
'יוצר תאי טבלה עבור נתונים. ה ' ' תגיות עם התכונות הנדרשות מוכנסות לתג זה כדי להטמיע את התמונות בתא טבלה: < שולחן >
< tr >
< ה' colspan = '3' סִגְנוֹן = 'גודל גופן: 28px;' >פירות וירקות< / ה' >
< / tr >
< tr >
< ה' >שם< / ה' >
< ה' סִגְנוֹן = 'רוחב: 250px;' >תמונה< / ה' >
< ה' > פירות / ירק< / ה' >
< / tr >
< tr >
< td >תפוח< / td >
< td >< img src = '/images/apples.jpg' הכל = 'תפוח עץ' רוֹחַב = '200' >< / td >
< td >פירות< / td >
< / tr >
< tr >
< td >גזר< / ה' >
< td >< img src = '/images/carrot.jpg' הכל = 'גזר' רוֹחַב = '200' >< / ה' >
< td >ירקות< / ה' >
< / tr >
< tr >
< td >כתום< / ה' >
< td >< img src = '/images/orang.jpg' הכל = 'תפוז' רוֹחַב = '200' >< / ה' >
< td >פירות< / ה' >
< / tr >
< / שולחן >ניתן לראות שטבלת HTML נוצרה בהצלחה יחד עם תמונות מוטמעות:
CSS
כעת, נדון במאפייני ה-CSS המשמשים לקביעת פריסת הטבלה.
סגנון 'שולחן' אלמנט
ראשית, גש ל' <טבלה> ' רכיב לפי שם תג והחל את המאפיינים הבאים:
שולחן {
יישור טקסט : מֶרְכָּז ;
רוֹחַב : 800 פיקסלים ;
קריסת גבול : הִתמוֹטְטוּת ;
שולים : אוטומטי ;
גודל גופן : 20 פיקסלים ;
}התיאור של הקוד לעיל ניתן להלן:
- ' יישור טקסט ' מגדיר את יישור הטקסט.
- ' רוֹחַב ' קובע את רוחב הטבלה.
- ' קריסת גבול ' מאפיין מגדיר אם הגבול ממוטט או לא.
- ' שולים ' מוסיף מקום מסביב לשולחן.
- ' גודל גופן ' מגדיר את גודל גופן הטקסט של הטבלה.
סגנון 'th' ו-'td' אלמנט
ה' , td {
גבול : 1 פיקסלים מוצק סָגוֹל ;
}הנה ה ' גבול ' מאפיין מתאים את הגבול סביב האלמנטים על ידי ציון הערכים עבור רוחב גבול, סגנון וצבע.
תְפוּקָה
פוסט זה עוסק כולו בהוספת תמונות בתא הטבלה ב-HTML.
סיכום
כדי להוסיף תמונה בתוך ' <טבלה> ', השתמש ב-'
'תג בתוך ה-HTML '
' אלמנט. האלמנט ' ' מציין את ' src ' המאפיין לספק את כתובת האתר של התמונה. ליתר דיוק, כדי להתאים את גודל התמונה, הוסף את ' גוֹבַה ' ו' רוֹחַב ' תכונות בתוך התג '
'. בלוג זה המחיש את ההליך להוספת תמונה בתא טבלת HTML.
- '