CSS உடன் அட்டவணையை எப்படி ஸ்டைல் செய்வது

அட்டவணைகள் ஒரு ஒழுங்கமைக்கப்பட்ட முறையில் தரவைப் பிரதிநிதித்துவப்படுத்த மிகவும் பொதுவான மற்றும் பயனுள்ள கருவியாகும். முந்தைய காலங்களில், CSS க்கு முன், தி <அட்டவணை> பணக்கார வடிவமைப்பு தளவமைப்புகளை உருவாக்க உறுப்பு பயன்படுத்தப்பட்டது. ஆனால் இப்போதெல்லாம், பல CSS பண்புகளைப் பயன்படுத்தி தளவமைப்புகள் உருவாக்கப்படுகின்றன. மேலும் குறிப்பாக, HTML “” உறுப்பு ஒரு வலை அட்டவணையை உருவாக்கப் பயன்படுகிறது, இது வெவ்வேறு CSS பண்புகளைப் பயன்படுத்துவதன் மூலம் மேலும் வடிவமைக்கப்படலாம்.

இந்த ஆய்வு CSS உடன் ஸ்டைலிங் டேபிள்கள் தொடர்பான வழிகாட்டும்.

CSS உடன் அட்டவணையை எப்படி ஸ்டைல் செய்வது?

அட்டவணையில் பாணிகளைப் பயன்படுத்த, கீழே கொடுக்கப்பட்டுள்ள படிகளின் வரிசையை நாங்கள் மேற்கொள்வோம்.

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

< மேசை >
< தலைப்பு > மாணவர்கள் தகவல் < / தலைப்பு >
< தலை >
< tr >
< வது > பெயர் < / வது >
< வது > பாடநெறி < / வது >
< வது > மதிப்பெண்கள் < / வது >
< / tr >
< / தலை >
< உடல் >
< tr >
< td > வில்லியம் < / td >
< td > நெட்வொர்க்கிங் < / td >
< td > 89 < / td >
< / tr >
< tr >
< td > ஜாக் < / td >
< td > சி++ அறிமுகம் < / td >
< td > 97 < / td >
< / tr >
< tr >
< td > ஜோசப் < / td >
< td > ஜாவா அறிமுகம் < / td >
< td > 77 < / td >
< / tr >
< / உடல் >
< / மேசை >

HTML இல் அட்டவணையை உருவாக்க, பின்வரும் HTML கூறுகள் பயன்படுத்தப்படுகின்றன:

' <அட்டவணை> HTML இல் அட்டவணையை உருவாக்க உறுப்பு பயன்படுத்தப்படுகிறது.
' <தலைப்பு> 'உறுப்பு அட்டவணையில் ஒரு தலைப்பைச் சேர்க்க பயன்படுத்தப்படுகிறது.
'

” பொதுவாக தலைப்புகளைக் கொண்டிருக்கும் அட்டவணையின் தலைப்பைக் குறிப்பிடப் பயன்படுத்தப்படுகிறது.

” என்பது சேர்க்கும் வரிசைக்கு பயன்படுத்தப்படுகிறது.

” அட்டவணையின் உடல் பகுதியைக் குறிப்பிடுகிறது.

உருவாக்கப்பட்ட அட்டவணை தற்போது இதுபோல் தெரிகிறது:

இந்த அட்டவணையை எப்படி ஸ்டைல் செய்வது என்று பார்க்க முன்னேறுவோம்.

படி 2: உடை 'உடல்' உறுப்பு

உடல் {
எழுத்துரு குடும்பம்: வெர்டானா, ஜெனீவா, தஹோமா, சான்ஸ்-செரிஃப்;
பின்னணி - நிறம் : rgb ( 233 , 233 , 233 ) ;
}

உறுப்பு பின்வரும் CSS ஸ்டைலிங் பண்புகளுடன் பயன்படுத்தப்படுகிறது:

' எழுத்துரு குடும்பம் 'மதிப்பு கொண்ட சொத்து' வெர்டானா, ஜெனீவா, தஹோமா, சான்ஸ்-செரிஃப் ” உலாவியால் ஆதரிக்கப்படும் எழுத்துருவைப் பயன்படுத்தப் பயன்படுகிறது. உலாவி முதல் எழுத்துரு பாணியை ஆதரிக்கவில்லை என்றால், மற்றொன்று பயன்படுத்தப்படும்.
' பின்னணி நிறம் ”பண்பு உறுப்புகளின் பின்னணி நிறத்தை அமைக்கிறது.

படி 3: உடை 'தலைப்பு' உறுப்பு

தலைப்பு {
எழுத்துரு- அளவு : 25px;
உரை- சீரமைக்க : மையம்;
பின்னணி - நிறம் : #1C6758;
நிறம் : கார்ன்சில்க்;
}

” தலைப்பு உள்ளடக்கத்தைக் குறிப்பிடவும்.

உறுப்பு பின்வருமாறு வடிவமைக்கப்பட்டுள்ளது:

' எழுத்துரு அளவு எழுத்துரு அளவை அமைப்பதற்கு சொத்து பயன்படுத்தப்படுகிறது.
' உரை-சீரமைப்பு ”பண்பு உறுப்புகளின் உரையின் சீரமைப்பைக் குறிப்பிடுகிறது.
' நிறம் ”பண்பு என்பது உறுப்புகளின் எழுத்துரு நிறத்தைக் குறிக்கிறது.

மேலே வழங்கப்பட்ட குறியீட்டின் வெளியீடு இங்கே:

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

பேடிங்குடன் பார்டரைப் பொருத்தி, மேசையில் ஓரம் கட்டுவோம்:

அட்டவணை, th, td {
எல்லை : 2px திட #1C6758;
திணிப்பு: 1px 6px;
விளிம்பு: ஆட்டோ;
}

இங்கே:

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

வெளியீடு

குறிப்பு : டேபிள் பார்டர்களுக்கு இடையே உள்ள இடைவெளிகளை நாங்கள் விரும்பவில்லை எனில், பார்டர்-சிதைவு பண்பைப் பயன்படுத்தவும்.

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

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

படி 6: அட்டவணையின் அளவை சரிசெய்யவும்
அட்டவணையின் அளவை எவ்வாறு சரிசெய்வது என்று பார்ப்போம்:

thead வ {
அகலம் : 160px;
}

சேர்க்கப்பட்ட ' அகலம் ”

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

குறிப்பிட்ட டேபிள் கலத்திற்கும் ஸ்டைல்களைப் பயன்படுத்தலாம். அவற்றை விவாதிப்போம்!

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

< td வர்க்கம் = 'முன்னிலைப்படுத்த' > 99 < / td >

இப்போது, CSS கோப்பில் உள்ள வகுப்பின் பெயரைப் பயன்படுத்தி கலத்தை அணுகவும்:

.முன்னிலைப்படுத்த {
பின்னணி - நிறம் : #0f90d5;
}

' .முன்னிலைப்படுத்த ” என்பது

உறுப்பின் வர்க்க சிறப்பம்சத்தைக் குறிக்கிறது. இந்த உறுப்பு ' பின்னணி நிறம் ”பின்னணியில் நிறத்தைக் குறிப்பிடுவதற்கான சொத்து.

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

படி 8: எழுத்துரு குடும்பம் மற்றும் அட்டவணையின் அளவை அமைக்கவும்

மேசை {
font-family: cursive;
எழுத்துரு- அளவு : 18px;
உரை- சீரமைக்க : மையம்;
}

அட்டவணை உறுப்புக்கு பின்வரும் CSS பண்புகள் பயன்படுத்தப்படுகின்றன:

' எழுத்துரு குடும்பம் 'பண்பு உறுப்புகளின் எழுத்துரு பாணியை அமைக்கிறது.
' எழுத்துரு அளவு 'உறுப்பின் எழுத்துருவை அமைப்பதற்கு சொத்து பயன்படுத்தப்படுகிறது.
' உரை-சீரமைப்பு 'உரை சீரமைப்பை சரிசெய்ய சொத்து பயன்படுத்தப்படுகிறது.

இதோ வெளியீடு:

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

\\
tbody tr:nth-child ( கூட ) {
பின்னணி - நிறம் : #FFB200;
}

இங்கே:

' : ஒன்பதாவது குழந்தை (கூட) ” போலித் தேர்வி ஒரு வாதத்தை எடுக்கப் பயன்படுகிறது.
' பின்னணி நிறம் 'உறுப்பின் பின்னணி நிறத்தை அமைக்க சொத்து பயன்படுத்தப்படுகிறது.

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

அது CSS உடன் ஸ்டைலிங் டேபிள்களைப் பற்றியது

முடிவுரை

தரவுகளை ஒழுங்கமைக்க அட்டவணைகள் ஒரு முக்கியமான கருவியாகும். HTML

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

,

CSS உடன் அட்டவணையை எப்படி ஸ்டைல் செய்வது