டெயில்விண்டில் அட்டவணை-தலைப்பை எவ்வாறு பயன்படுத்துவது

Teyilvintil Attavanai Talaippai Evvaru Payanpatuttuvatu



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

அட்டவணை தலைப்புகளின் முக்கியத்துவம் என்ன?

'அட்டவணை தலைப்புகள்' அட்டவணைகளுக்கு தலைப்புகளை வழங்கப் பயன்படுத்தப்படுகின்றன, இதனால் ஒவ்வொரு அட்டவணையும் என்ன அர்த்தம் மற்றும் அதில் உள்ள தரவை எவ்வாறு பயன்படுத்துவது என்பதை பயனர் வரையறுக்க முடியும். வலைப்பக்கத்தில் உள்ள அட்டவணைகளை இன்னும் அணுகக்கூடியதாக மாற்ற தலைப்புகள் உதவுகின்றன.

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







டெயில்விண்ட் CSSல் டேபிள் கேப்ஷனை எப்படி பயன்படுத்துவது?

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



உதாரணம்: மேசையின் மேல் மற்றும் கீழ் இரண்டிலும் அட்டவணையின் தலைப்பைச் சேர்த்தல்
பின்வரும் குறியீட்டில், அட்டவணையின் மேல் மற்றும் கீழ் இரண்டிற்கும் பின்வருமாறு “தலைப்பு” சேர்ப்போம்:



< மேசை >
< மேசை வர்க்கம் = 'min-w-full border border-gray-300 divide-y divide-gray-300' >
< தலை >
< tr >
< வது வர்க்கம் = 'py-2 px-4 bg-gray-100 border-b' >
பெயர்
< / வது >
< வது வர்க்கம் = 'py-2 px-4 bg-gray-100 border-b' >
மின்னஞ்சல்
< / வது >
< வது வர்க்கம் = 'py-2 px-4 bg-gray-100 border-b' >
ஐடி
< / வது >
< வது வர்க்கம் = 'py-2 px-4 bg-gray-100 border-b' >
தொடர்பு கொள்ளவும்
< / வது >
< / tr >
< / தலை >
< உடல் >
< tr >
< td வர்க்கம் = 'py-2 px-4 border-b' > ஜேம்ஸ் < / td >
< td வர்க்கம் = 'py-2 px-4 border-b' > james@tsl.com < / td >
< td வர்க்கம் = 'py-2 px-4 border-b' > 61101-1234567-8 < / td >
< td வர்க்கம் = 'py-2 px-4 border-b' > 123-456-7890 < / td >
< / tr >
< tr >
< td வர்க்கம் = 'py-2 px-4 border-b' > மைக்கேல் < / td >
< td வர்க்கம் = 'py-2 px-4 border-b' > michael@tsl.com < / td >
< td வர்க்கம் = 'py-2 px-4 border-b' > 61101-8765432-1 < / td >
< td வர்க்கம் = 'py-2 px-4 border-b' > 098-765-4321 < / td >
< / tr >
< tr >
< td வர்க்கம் = 'py-2 px-4 border-b' > டேவிட் < / td >
< td வர்க்கம் = 'py-2 px-4 border-b' > David@TSL.com < / td >
< td வர்க்கம் = 'py-2 px-4 border-b' > 54791-1234567-8 < / td >
< td வர்க்கம் = 'py-2 px-4 border-b' > 123-786-4290 < / td >
< / tr >
< tr >
< td வர்க்கம் = 'py-2 px-4 border-b' > பீட்டர் < / td >
< td வர்க்கம் = 'py-2 px-4 border-b' > peter@tsl.com < / td >
< td வர்க்கம் = 'py-2 px-4 border-b' > 54300-1234567-8 < / td >
< td வர்க்கம் = 'py-2 px-4 border-b' > 611-239-7890 < / td >
< / tr >
< / உடல் >
< தலைப்பு >
பணியாளர்களின் தனிப்பட்ட தகவல்
< / தலைப்பு >
< / மேசை >
< தலைப்பு >
நிறுவனத்தின் பெயர்
< / தலைப்பு >

மேலே உள்ள குறியீட்டில் இந்த படிகளைப் பின்பற்றவும்: