CSS அட்டவணை td அகலத்தை எவ்வாறு சரிசெய்வது?

• HTML ஐப் பயன்படுத்துதல் ' அகலம் ” பண்பு
• பயன்படுத்தி ' வது குழந்தை() ” தேர்வாளர்
• பயன்படுத்தி ' ” டேக்

முறை 1: HTML “அகலம்” பண்புக்கூறைப் பயன்படுத்துதல்

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

படி 1: ஒரு அட்டவணையை உருவாக்கவும்
HTML கோப்பில், '' ஐப் பயன்படுத்தவும் <சென்டர்> ” குறிச்சொல் அதன் உள்ளே உள்ள ஒவ்வொரு உறுப்புகளையும் வலைப்பக்கத்தின் மையத்தில் காட்டவும். அதன் உள்ளே, '' ஐப் பயன்படுத்தி ஒரு அட்டவணையை உருவாக்கவும். <அட்டவணை> ”” 'மற்றும்' ” குறியிட்டு அதில் தரவை எழுதவும்:

படி 2: 'டேபிள்' உறுப்புக்கு CSS பண்புகளைச் சேர்க்கவும்
CSS இல் அட்டவணை உறுப்பு தேர்வியைப் பயன்படுத்தி, ' எல்லை '1px திட சிவப்பு,' உரை-சீரமைப்பு 'உரையை மையத்திற்கு சீரமைக்கிறது, மேலும்' அகலம் ” இது அட்டவணையின் ஒட்டுமொத்த அகலத்தை 80% ஆக அமைக்கிறது:

படி 3: 'td' உறுப்புக்கு பண்புகளை ஒதுக்குதல்
பயன்படுத்த ' td 'உறுப்புத் தேர்வி மற்றும் அமைக்கிறது' எல்லை-கீழ் '5px திட சிவப்பு,' திணிப்பு '20px உருப்படியை மேலும் முக்கியப்படுத்த, மற்றும்' அகலம் ”30% என அமைக்கிறது:

படி 4: 'வது' உறுப்புக்கு பண்புகளை ஒதுக்குதல்
பயன்படுத்த ' வது 'உறுப்பு தேர்வி' இன் நிறத்தை மாற்ற எல்லை-கீழ் சிறந்த காட்சிப்படுத்தலை உருவாக்க சிவப்பு முதல் கடல் பச்சை வரை:

வெளியீடு இவ்வாறு காட்டப்படுகிறது:

மேலே உள்ள ஸ்னாப்ஷாட் அனைத்து நெடுவரிசையின் அகலங்களும் ஒவ்வொன்றும் 30% என நிர்ணயிக்கப்பட்டுள்ளது என்பதைக் காட்டுகிறது.

முறை 2: “nth-child( )” தேர்வியைப் பயன்படுத்துதல்

நிலையான அகல அட்டவணையை உருவாக்க CSS இன் nth-child() பண்பு பயன்படுத்தப்படுகிறது. இந்த சொத்து நெடுவரிசை எண்ணைப் பெற்று, ' 'மற்றும்' ' குறிச்சொற்கள். உதாரணமாக, அகலம் ' சரி செய்யப்பட்டது 'நெடுவரிசை எண்களுக்கு மட்டும்' 1 'மற்றும்' 3 ”. இந்த நெடுவரிசைகள் ஒவ்வொன்றும் 10% அகலத்தைப் பெறுகின்றன. தரவு அட்டவணையின் அகலத்தை எவ்வாறு சரிசெய்வது என்பதை இந்தக் கட்டுரை வெற்றிகரமாக நிரூபித்துள்ளது.

மேலே உள்ள குறியீடு தொகுதியின் வெளியீடு:

இந்த வெளியீடு நெடுவரிசை எண்கள் 1 மற்றும் 3 ஆகியவை 10% அகலத்தில் நிலையானதாக இருப்பதைக் காட்டுகிறது.

முறை 3: குறிச்சொல்லைப் பயன்படுத்துதல்

உள்ளே ' மேசை CSS பகுதியில் 'பிரிவைச் சேர்க்கவும்' அட்டவணை-தளவமைப்பு: சரி செய்யப்பட்டது தரவு அட்டவணை உறுப்புகளின் 'அகலத்தை' அமைப்பதற்கான சொத்து:

HTML கோப்பில், ' 'குறிச்சொல் உள்ளே' <அட்டவணை> ”பிரிவு. உதாரணமாக, முதல் நெடுவரிசைக்கு 15% அகலத்தையும், இரண்டாவது நெடுவரிசைக்கு 30% அகலத்தையும் சரிசெய்யவும்:

மேலே உள்ள குறியீடு துணுக்கைச் செயல்படுத்திய பிறகு, வெளியீடு:

டேபிள் டேட்டா உறுப்புகளின் அகலத்தை பயனர் சரிசெய்ய முடியும்.

முடிவுரை

அட்டவணை தரவின் அகலத்தை சரிசெய்ய, ' அகலம் 'பண்பு,' வது குழந்தை ( ) 'பிரிப்பான், மற்றும்' 'குறிச்சொல் முறைகள். ' அகலம் 'பண்பு நிலையான அகலத்தை அமைக்கிறது. “nth-child( )” பிரிப்பான் நெடுவரிசை எண்ணை அளவுருவாகப் பெறுகிறது. மேலும், ' அட்டவணையை நெகிழ்வடையாதபடி செய்ய 'குறிச்சொல்லைப் பயன்படுத்தலாம். அட்டவணை தரவு உறுப்புகளின் அகலத்தை எவ்வாறு சரிசெய்வது என்பதை இந்தக் கட்டுரை விளக்கியுள்ளது.