எப்படி CSS கொண்டு வரிக்குதிரை துண்டுகளாக்கப்பட்ட அட்டவணைகள் உருவாக்க

பயன்படுத்தி: nth-of-type (n) அட்டவணைகள்

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

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

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

CSS Zebra stripes கொண்டு பாணி அட்டவணைகள் எளிதாக்குகிறது. Nth-of-type (n) CSS selector : நீங்கள் எந்த கூடுதல் HTML பண்புகளை அல்லது CSS வகுப்புகள் சேர்க்க தேவையில்லை, நீங்கள் பயன்படுத்த.

Nth-of-type (n) selector ஆனது CSS இல் ஒரு கட்டமைப்பு போலி-வகுப்பு ஆகும், இது பெற்றோருக்கும் உடன்பிறப்பு கூறுகளுக்கும் அவர்களின் உறவுகளின் அடிப்படையிலான பாணி கூறுகளை அனுமதிக்கிறது. அவர்களின் மூல ஒழுங்கு அடிப்படையில் ஒன்று அல்லது அதற்கு மேற்பட்ட கூறுகளை தேர்ந்தெடுக்க அதைப் பயன்படுத்தலாம். வேறு வார்த்தைகளில் கூறுவதானால், அதன் பெற்றோர் ஒரு குறிப்பிட்ட வகையின் nth குழந்தை என்று ஒவ்வொரு உறுப்பையும் பொருத்தலாம்.

கடிதம் n ஒரு முக்கிய (ஒற்றைப்படை அல்லது கூட), ஒரு எண், அல்லது ஒரு சூத்திரம் இருக்க முடியும்.

உதாரணமாக, ஒரு மஞ்சள் பின்னணி நிறம் ஒவ்வொரு மற்ற பத்தி குறிச்சொல் பாணி, உங்கள் CSS ஆவணம் அடங்கும்:

ப: nth-of-type (ஒற்றைப்படை) {
பின்னணி: மஞ்சள்;
}

உங்கள் HTML அட்டவணை தொடங்கவும்

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

உங்கள் நடைதாளுடன், பின்வரும் CSS ஐச் சேர்க்கவும்:

tr: nth-of-type (ஒற்றைப்படை) {
பின்னணி-நிறம்: #ccc;
}

இது முதல் வரிசையில் தொடங்கி ஒரு சாம்பல் பின்புல வண்ணம் கொண்ட ஒவ்வொரு வரிசையுடனும் பாணியில் இருக்கும்.

அதே வேகத்தில் உடை மாற்று நெடுவரிசைகள்

உங்கள் அட்டவணையில் நெடுவரிசைகளை ஸ்டைலிங் செய்யலாம். அவ்வாறு செய்ய, உங்கள் CSS வகுப்பில் TR ஐ மாற்றுவோம். உதாரணத்திற்கு:

td: nth-of-type (ஒற்றைப்படை) {
பின்னணி-நிறம்: #ccc;
}

ஒரு nth-of-type (n) தேர்வில் சூத்திரங்களைப் பயன்படுத்துதல்

தேர்வுக்குழு பயன்படுத்தப்படும் ஒரு சூத்திரத்திற்கான தொடரியல் ஒரு + b.

• சுழற்சியை அல்லது குறியீட்டு அளவைப் பிரதிபலிக்கும் எண்ணாகும்.

• n உண்மையில் கடிதம் "n" மற்றும் 0, நட்சத்திரங்கள் ஒரு எதிர் பிரதிபலிக்கிறது.

• + "-" ஒரு ஆபரேட்டர்,

• b என்பது ஒரு முழு எண் மற்றும் ஆஃப்செட் மதிப்பைக் குறிக்கிறது-உதாரணமாக எத்தனை வரிசைகள் தேர்வுக்குழு பின்புல வண்ணத்தை பயன்படுத்துவதைத் தொடங்குகிறது. ஒரு ஆபரேட்டர் சூத்திரத்தில் சேர்க்கப்பட்டால் இது தேவைப்படுகிறது.

உதாரணமாக, ஒவ்வொரு 3 வது வரிசைக்கும் பின்னணி நிறத்தை அமைக்க விரும்பினால், உங்கள் சூத்திரம் 3n + 0 ஆக இருக்கும். உங்கள் CSS இதைப் போன்றது:

tr: nth-of-type (3n + 0) {
பின்னணி: slategray;
}

Nth-type-type selector ஐ பயன்படுத்துவதற்கான பயனுள்ள கருவிகள்

நீங்கள் போலி வகுப்பு nth-type-type-selector ஐ பயன்படுத்தி சூத்திரத்தின் அம்சம் ஒரு சிறிய தாடி உணர்கிறீர்கள் என்றால், முயற்சி: nth சோதனையாளர் தளம் நீங்கள் விரும்பும் தோற்றத்தை அடைவதற்கு தொடரியல் வரையறுக்க உதவும் ஒரு பயனுள்ள கருவியாக. Nth-of-type ஐ தேர்வு செய்ய கீழ்தோன்றும் மெனுவைப் பயன்படுத்தலாம் (nth-child போன்ற பிற போலி-வகுப்புகளிலும் நீங்கள் முயற்சி செய்யலாம்).