HTML இல் அட்டவணைக் கலத்திற்குள் ஒரு படத்தைச் சேர்ப்பதற்கான செயல்முறையை இந்த எழுதுதல் விளக்குகிறது.
HTML இல் டேபிள் கலத்தின் உள்ளே ஒரு படத்தை சேர்ப்பது எப்படி?
HTML ' ஒரு அட்டவணைக் கலத்தில் ஒரு படத்தைச் செருக 'குறிச்சொல் பயன்படுத்தப்படுகிறது.
தொடரியல்
அட்டவணைக் கலத்தின் உள்ளே ஒரு படத்தை உட்பொதிக்க தொடரியலைப் பின்பற்றவும்:
< td >< img src = '' எல்லாம் = '' அகலம் = '' >< / td >
இங்கே:
- '
”உறுப்பு, படத்தைச் சேர்க்க வேண்டிய அட்டவணைக் கலத்தைக் குறிக்கிறது. - '
படத்தைக் குறிப்பிட 'குறிச்சொல் பயன்படுத்தப்படுகிறது.
- ' src ” பண்புக்கூறு படத்தின் பாதையை அமைக்கிறது.
- ' எல்லாம் ” என்பது படத்தை ஏற்றத் தவறினால் திரையில் காட்டப்படும் உரையைக் குறிக்கிறது.
- ' அகலம் ” படத்தின் அகலத்தை தீர்மானிக்கிறது.
உதாரணமாக
HTML கோப்பில், வழங்கப்பட்ட வழிமுறைகளைப் பின்பற்றி ஒரு அட்டவணையை உருவாக்கவும்:
- ' <அட்டவணை> 'உறுப்பு ஒரு அட்டவணையை உருவாக்க பயன்படுத்தப்படுகிறது.
- '
” உறுப்பு ஒரு வரிசையைக் குறிப்பிடுகிறது. - '
'' என்ற தலைப்பை சரிசெய்கிறது கோல்ஸ்பான் 'பண்பு என்பது ஒரு செல் எத்தனை நெடுவரிசைகளை உள்ளடக்கியிருக்க வேண்டும் என்பதைக் குறிக்கிறது. - '
” தரவுக்கான அட்டவணை செல்களை உருவாக்குகிறது. ' அட்டவணைக் கலத்தில் படங்களை உட்பொதிக்க, இந்தக் குறிச்சொல்லில் தேவையான பண்புக்கூறுகள் கொண்ட குறிச்சொற்கள் செருகப்படுகின்றன: < மேசை >
< tr >
< வது கோல்ஸ்பான் = '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 பண்புகளைப் பற்றி விவாதிப்போம்.
உடை 'அட்டவணை' உறுப்பு
முதலில், '' ஐ அணுகவும் <அட்டவணை> 'குறிச்சொல் பெயரின் மூலம் உறுப்பு மற்றும் பின்வரும் பண்புகளைப் பயன்படுத்தவும்:
மேசை {
உரை-சீரமைப்பு : மையம் ;
அகலம் : 800px ;
எல்லை - சரிவு : சரிவு ;
விளிம்பு : ஆட்டோ ;
எழுத்துரு அளவு : 20px ;
}மேலே உள்ள குறியீட்டின் விளக்கம் கீழே கொடுக்கப்பட்டுள்ளது:
- ' உரை-சீரமைப்பு ” உரை சீரமைப்பை அமைக்கிறது.
- ' அகலம் ” அட்டவணையின் அகலத்தை தீர்மானிக்கிறது.
- ' எல்லை - சரிவு 'எல்லை இடிந்ததா இல்லையா என்பதை சொத்து வரையறுக்கிறது.
- ' விளிம்பு ” மேசையைச் சுற்றி இடம் சேர்க்கிறது.
- ' எழுத்துரு அளவு ” அட்டவணையின் உரை எழுத்துரு அளவை வரையறுக்கிறது.
உடை 'th' மற்றும் 'td' உறுப்பு
வது , td {
எல்லை : 1px திடமான ஊதா ;
}இங்கே, ' எல்லை 'பார்டர் அகலம், நடை மற்றும் வண்ணத்திற்கான மதிப்புகளைக் குறிப்பிடுவதன் மூலம் உறுப்புகளைச் சுற்றியுள்ள எல்லையை சொத்து சரிசெய்கிறது.
வெளியீடு
இந்த இடுகை HTML இல் உள்ள அட்டவணைக் கலத்தில் படங்களைச் செருகுவது பற்றியது.
முடிவுரை
ஒரு படத்தை உள்ளே சேர்க்க ' <அட்டவணை> 'செல், பயன்படுத்தவும்'
HTML இல் 'குறிச்சொல்'
”உறுப்பு. “ ” உறுப்பு “ஐக் குறிப்பிடுகிறது src படத்தின் URL ஐ வழங்குவதற்கான பண்புக்கூறு. மேலும் குறிப்பாக, படத்தின் அளவை சரிசெய்ய, ' உயரம் 'மற்றும்' அகலம் '
' குறிச்சொல்லில் உள்ள பண்புக்கூறுகள். இந்த வலைப்பதிவு HTML அட்டவணைக் கலத்தில் படத்தைச் சேர்ப்பதற்கான செயல்முறையை விளக்குகிறது.
- '
- '