'rospan' பண்புக்கூறு என்ன மற்றும் HTML இல் 'td' உறுப்புடன் எவ்வாறு பயன்படுத்துவது?

Rospan Panpukkuru Enna Marrum Html Il Td Urupputan Evvaru Payanpatuttuvatu



HTML இல், ' ரோஸ்பான் ” என்பது அட்டவணைகளை உருவாக்கும் போது பயன்படுத்தக்கூடிய ஒரு பண்பு ஆகும். செங்குத்து திசையில் பல அடுத்தடுத்த செல்களை ஒன்றிணைக்க இது பொதுவாகப் பயன்படுத்தப்படுகிறது. பயனருக்கு காட்சி ஆர்வத்தை சேர்க்கும் போது சிக்கலான அட்டவணை வடிவமைப்புகளை உருவாக்க இது பயன்படுத்தப்படலாம். இதைப் பயன்படுத்துவதன் மூலம், டெவலப்பர் HTML குறியீட்டைக் குறைக்கலாம் மற்றும் அட்டவணையைப் படிக்கும் திறனை மேம்படுத்தலாம். மேலும், 'rowspan' பண்புக்கூறு பல கலங்களைத் தொகுத்து அட்டவணையை ஒழுங்கமைக்க உதவும்.

இந்த வழிகாட்டி 'rowspan' பண்புக்கூறு மற்றும் அதை 'td' உறுப்புடன் எவ்வாறு பயன்படுத்துவது என்பதை விளக்குகிறது.

'ரோஸ்பான்' பண்பு என்றால் என்ன?

'rowspan' பண்புக்கூறு பல செல்களை செங்குத்து திசையில் இணைக்கப் பயன்படுகிறது. இதை இவ்வாறு அணுகலாம் ' rowspan = மதிப்பு ', எங்கே ' மதிப்பு ” என்பது செங்குத்து திசையில் இணைக்கப்பட வேண்டிய வரிசைகளின் எண்ணிக்கை. பயனர்களின் வாசிப்புத்திறனை மேம்படுத்துவதற்கும் சிக்கலான தரவை மிகவும் பயனர் ஈர்க்கும் விதத்தில் காண்பிப்பதற்கும் இது நன்மை பயக்கும்.







'டிடி' உறுப்பு என்றால் என்ன?

' td ” அல்லது அட்டவணை தரவு உறுப்பு HTML அட்டவணையில் உள்ள கலத்தை வரையறுக்கப் பயன்படுகிறது. அட்டவணை உள்ளடக்கத்தை உருவாக்க, '', '', '

போன்ற பிற அட்டவணை HTML கூறுகளுடன் இது பெரும்பாலும் பயன்படுத்தப்படுகிறது. கூடுதல் டிசைனிங் அம்சங்களைச் சேர்க்க, சிக்கலைக் குறைக்க மற்றும் படிக்கக்கூடிய காரணியை மேம்படுத்த, 'colspan' மற்றும் 'rowspan' போன்ற பண்புக்கூறுகளுடன் இதைப் பயன்படுத்தலாம். இது HTML கோப்பில் '' ஐப் பயன்படுத்தி பயன்படுத்தப்படுகிறது. 'குறிச்சொற்கள் அட்டவணையில் வரிசைகளைச் செருகவும் மற்றும் ' பயன்படுத்தவும்
” குறிச்சொல்.



'td' உறுப்புடன் 'rowspan' பண்புக்கூறை எவ்வாறு பயன்படுத்துவது?

'rowspan' பண்புக்கூறு மற்றும் 'td' உறுப்பு ஆகியவற்றுக்கு இடையேயான தொடர்பின் சிறந்த விளக்கத்திற்கு. கீழே உள்ள படிப்படியான வழிகாட்டியைப் பின்பற்றுவதன் மூலம் ஒரு நடைமுறை உதாரணத்தின் மூலம் நடப்போம்:



படி 1: HTML இல் அட்டவணையை உருவாக்குதல்

முதலில், '' உதவியுடன் ஒரு அட்டவணையை உருவாக்கவும். <அட்டவணை> ” குறிச்சொல். அதன் உள்ளே பலவற்றைச் சேர்க்கவும் '

செல்களை உருவாக்க குறிச்சொல்:





< பாணி >

மேசை{

எல்லை-சரிவு: சரிவு;

விளிம்பு: 40px;

}

th,td{

எல்லை: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 >

< / மேசை >

< / உடல் >

மேலே உள்ள குறியீடு துணுக்கில்:

  • முதலில், ஐந்து வரிசைகள் உருவாக்கப்பட்டு, ஒவ்வொரு கலத்திற்கும் சில போலி தரவு வழங்கப்படுகிறது.
  • அடுத்து, ' மேசை 'உறுப்பு தேர்ந்தெடுக்கப்பட்டு ' சரிவு 'சிஎஸ்எஸ் மதிப்பு' எல்லை - சரிவு ”சொத்து.
  • அதன் பிறகு, ' எல்லை 'மற்றும்' திணிப்பு 'பண்புகள் பயனரின் தெரிவுநிலையை மேம்படுத்தவும் பயனரை ஈர்க்கும் விளைவை உருவாக்கவும் பயன்படுத்தப்படுகின்றன.

குறியீட்டை செயல்படுத்திய பிறகு, அட்டவணை பின்வருமாறு தோன்றும்:



மேலே உள்ள வெளியீடு, அட்டவணை உருவாக்கப்பட்டு ஸ்டைல் ​​செய்யப்பட்டிருப்பதைக் காட்டுகிறது.

படி 2: 'td' உறுப்புடன் 'rowspan' பண்புக்கூறைப் பயன்படுத்துதல்

' ரோஸ்பான் ” பண்புக்கூறு செங்குத்து திசையில் அருகிலுள்ள செல்களை ஒன்றிணைக்கிறது. இது '

”உறுப்பு/குறிச்சொல். பண்புக்கூறு ஒரு எண்ணை ஒரு மதிப்பாக எடுத்து, செங்குத்து திசையில் எத்தனை செல்கள் இணைக்கப்படுகின்றன என்பதைக் கூறுகிறது. வரவிருக்கும் அடுத்த கலத்தில் ஒரு கலத்தின் அளவு குறைவாக இருக்க வேண்டும், மேலும் அந்த இடம் கீழே காட்டப்பட்டுள்ளபடி 'rowspan' பண்புக்கூறால் நிரப்பப்படும்:

< உடல் >

< மேசை >

< 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 'ரோஸ்பான்' பண்புக்கூறுக்கு வழங்கப்படுகிறது, இது கீழே காட்டப்பட்டுள்ளபடி அருகிலுள்ள இரண்டு கலங்களிலும் ஒரே தரவை அமைக்கிறது:

இரண்டு கலங்களும் ஒன்றிணைக்கப்பட்டிருப்பதையும், பயனரின் வாசிப்புத்திறன் இப்போது மேம்படுத்தப்பட்டிருப்பதையும் வெளியீடு விளக்குகிறது.

முடிவுரை

' ரோஸ்பான் 'பண்பு' உடன் வேலை செய்கிறது td 'உறுப்பு செங்குத்து திசையில் பல அடுத்தடுத்த செல்களை ஒன்றிணைக்கும். பண்புக்கூறு எண்ணை ஒரு மதிப்பாக எடுத்து, எத்தனை செல்கள் ஒன்றிணைக்கப்படுகின்றன என்பதைக் கூறுகிறது. ஒரே தரவு பல கலங்களுக்கு வழங்கப்படும் இடத்தில் இது பயன்படுத்தப்படுகிறது. இந்த வலைப்பதிவு 'rowspan' என்றால் என்ன மற்றும் அதை HTML இல் 'td' உறுப்புடன் எவ்வாறு பயன்படுத்துவது என்பதை விளக்கியுள்ளது.