CSS உடன் அட்டவணையில் உள் கோடுகள் (எல்லைகள்) எப்படி சேர்க்க வேண்டும்

ஐந்து நிமிடங்களில் ஒரு CSS அட்டவணை எல்லை உருவாக்க எப்படி என்பதை அறிக

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

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

CSS அட்டவணை எல்லைகள்

அட்டவணையில் எல்லைகளைச் சேர்க்க CSS ஐ பயன்படுத்தும்போது, ​​அது அட்டவணையின் வெளியே எல்லையை மட்டும் சேர்க்கிறது. நீங்கள் அந்த அட்டவணையின் தனிப்பட்ட செல்களை உள் கோடுகள் சேர்க்க விரும்பினால், நீங்கள் உட்புற CSS கூறுகளை எல்லைகளை சேர்க்க வேண்டும். நீங்கள் தனிப்பட்ட செல்கள் உள்ளே வரிகளை சேர்க்க HR குறியை பயன்படுத்தலாம்.

இந்த கட்டுரையில் மூடப்பட்டிருக்கும் நடைமுறைகளை பொருத்துவதற்கு, நீங்கள் வெளிப்படையாக உங்கள் வலைப்பக்கத்தில் ஒரு அட்டவணை இருக்க வேண்டும். உங்கள் ஆவணத்தின் தலைப்பில் உள் நடை தாள் போன்ற ஒரு நடை தாளை உருவாக்க வேண்டும் (உங்கள் "தளம்" ஒற்றை பக்கமாக இருந்தால் மட்டுமே இதை செய்ய முடியும்) அல்லது ஆவணத்துடன் இணைக்கப்பட்டிருக்கும் வெளிப்புற நடை தாள் (இது நீங்கள் உங்களுடைய தளம் பல பக்கங்களைச் செய்தால் - ஒரு வெளிப்புற தாவணியிலிருந்து பாணியை நீங்கள் அனுமதிக்கலாம்). அந்த பாணியில் உள்ள உள் கோடுகளை சேர்க்க பாணிகளை வைப்பீர்கள்.

நீங்கள் தொடங்கும் முன்

உங்கள் அட்டவணையில் தோன்றும் கோடுகள் எங்கே நீங்கள் முதலில் தீர்மானிக்க வேண்டும். உங்களுக்கு பல விருப்பங்கள் உள்ளன:

• ஒரு கட்டம் அமைக்க அனைத்து செல்களை சுற்றி;
• நெடுவரிசைகளுக்கு இடையில் உள்ள கோடுகளை அமைத்தல்;
• வரிசைகள்; அல்லது
• குறிப்பிட்ட பத்திகள் அல்லது வரிசைகள் இடையே.

நீங்கள் தனிப்பட்ட செல்கள் அல்லது தனிப்பட்ட செல்கள் உள்ளே வரிகளை வைக்க முடியும்.

ஒரு அட்டவணையில் உள்ள அனைத்து செல்களை சுற்றி கோடுகள் சேர்க்க எப்படி

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

td, th {
எல்லை: திட 1px கருப்பு;
}

அட்டவணையில் உள்ள நெடுவரிசைகளுக்கு இடையேயான கோடுகளை எவ்வாறு சேர்க்கலாம்

நெடுவரிசைகளுக்கு இடையே வரிகளை சேர்க்க (அட்டவணையின் நெடுவரிசைகளில் மேல் இருந்து கீழ்நோக்கி ஓடும் செங்குத்து கோடுகள் உருவாக்குகிறது), பின்வரும் உங்கள் பாணி தாளை சேர்க்கவும்:

td, th {
எல்லை இடது: திட 1px கருப்பு;
}

பின்னர், அவர்கள் முதல் நெடுவரிசையில் தோன்றாதே எனில், நீங்கள் th மற்றும் td செல்கள் ஒரு வர்க்கத்தை சேர்க்க வேண்டும். இந்த எடுத்துக்காட்டில், நாம் அந்த செல்கள் மீது எல்லைக்குட்பட்ட ஒரு வகுப்பைக் கொண்டுள்ளோம் எனக் கருதுகிறோம், மேலும் இந்த குறிப்பிட்ட CSS விதி மூலம் எல்லைகளை அகற்றுவோம். எனவே இங்கே நாம் பயன்படுத்தும் HTML வர்க்கம்:

வர்க்கம் = "இல்லை எல்லை">

பின்னர் எங்கள் பாணியில் பின்வரும் பாணியை சேர்க்கலாம்:

. எல்லையற்றது {
எல்லை இடது: எதுவும் இல்லை;
}

ஒரு அட்டவணையில் உள்ள வரிசைகள் இடையே கோடுகள் எப்படி சேர்க்க வேண்டும்

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

tr {
எல்லை கீழே: திட 1px கருப்பு;
}

மற்றும் அட்டவணை கீழே இருந்து எல்லை நீக்க, நீங்கள் மீண்டும் அந்த டி குறிச்சொல் ஒரு வர்க்கம் சேர்க்க வேண்டும்:

வர்க்கம் = "இல்லை எல்லை">

உங்கள் பாணியில் பின்வரும் பாணியைச் சேர்க்கவும்:

. எல்லையற்றது {
எல்லை கீழே: எதுவும்;
}

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

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

வர்க்கம் = "பக்க எல்லை">

வரிசைகள் இடையே வரிகளை சேர்ப்பது மிகவும் எளிது, நீங்கள் வரிசையில் வர்க்கம் சேர்க்க வேண்டும் வரி நீங்கள் வேண்டும்.

வர்க்கம் = "எல்லை-கீழ்">

பின் உங்கள் பாணி தாளுக்கு CSS ஐச் சேர்க்கவும்:

. பர்பார்-பக்க {
எல்லை இடது: திட 1px கருப்பு;
}
. பர்பர்ட்-அடி {
எல்லை கீழே: திட 1px கருப்பு;
}

ஒரு அட்டவணையில் தனிப்பட்ட செல்களை சுற்றி கோடுகள் சேர்க்க எப்படி

தனிப்பட்ட செல்கள் சுற்றி கோடுகள் சேர்க்க, நீங்கள் ஒரு எல்லை சுற்றி செல்கள் ஒரு வர்க்கம் சேர்க்க:

வர்க்கம் = "எல்லை">

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

. border {
எல்லை: திட 1px கருப்பு;
}

ஒரு அட்டவணையில் தனிப்பட்ட கலங்களை உள்ளே கோடுகள் சேர்க்க எப்படி

ஒரு கலத்தின் உள்ளடக்கங்களை உள்ளே கோடுகள் சேர்க்க விரும்பினால், இதை செய்ய எளிதான வழி கிடைமட்ட விதி குறியாக (

---

) உள்ளது.

பயனுள்ள குறிப்புகள்

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

மேசை {
எல்லை சரிவு: சரிவு;
}

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