நீங்கள் CSS மற்றும் HTML அட்டவணைகள் கலக்க வேண்டாம் என்று கேள்விப்பட்டிருக்கலாம். இது வழக்கு அல்ல. ஆமாம், அமைப்புக்கு HTML அட்டவணைகள் பயன்படுத்தி இனி வலை வடிவமைப்பு சிறந்த நடைமுறை ஏனெனில் அவர்கள் CSS அமைப்பை பாணியை பதிலாக, ஆனால் அட்டவணைகள் ஒரு வலைப்பக்கத்திற்கு அட்டவணை தரவு சேர்க்க பயன்படுத்த இன்னும் சரியான மார்க் உள்ளது.
பல வலை வல்லுநர்கள் தங்களைத் தவிர வேறு எதுவும் இல்லை என்று நினைக்கும் அட்டவணையில் இருந்து வெட்கப்படுவதால், அந்த தொழில்முறை வல்லுனர்களில் பலர் இந்த பொதுவான HTML உறுப்புடன் பணிபுரியும் சிறிய அனுபவங்களைக் கொண்டிருக்கிறார்கள், மேலும் அவர்கள் ஒரு வலைப்பக்கத்தில் உள்ள அட்டவணை செல்களை உள் கோடுகள் சேர்க்க வேண்டியிருக்கும் போது அவர்கள் போராடுகின்றனர்.
CSS அட்டவணை எல்லைகள்
அட்டவணையில் எல்லைகளைச் சேர்க்க CSS ஐ பயன்படுத்தும்போது, அது அட்டவணையின் வெளியே எல்லையை மட்டும் சேர்க்கிறது. நீங்கள் அந்த அட்டவணையின் தனிப்பட்ட செல்களை உள் கோடுகள் சேர்க்க விரும்பினால், நீங்கள் உட்புற CSS கூறுகளை எல்லைகளை சேர்க்க வேண்டும். நீங்கள் தனிப்பட்ட செல்கள் உள்ளே வரிகளை சேர்க்க HR குறியை பயன்படுத்த முடியும்.
இந்த டுடோரியலில் விவாதிக்கப்பட்டுள்ள பாணியைப் பயன்படுத்துவதற்கு, உங்களுக்கு வலைப்பக்கத்தில் ஒரு அட்டவணை தேவை. பின்னர், உங்கள் ஆவணத்தின் தலைப்பில் உள்ள உள் நடை தாள் (நீங்கள் ஒரே ஒரு பக்கத்துடன் கையாளுகிறீர்கள்) அல்லது வெளிப்புற நடை தாள் (ஆவணம் பல பக்கங்களைக் கொண்டிருந்தால்) ஆவணத்துடன் இணைத்து ஒரு பாணியை உருவாக்கலாம். நீங்கள் நடை தாள் உள்ள உள் கோடுகள் சேர்க்க பாணிகள் வைத்து.
நீங்கள் தொடங்கும் முன்
அட்டவணையில் அட்டவணைகள் தோன்ற வேண்டும் என நீங்கள் எங்கு முடிவு செய்ய வேண்டும். உங்களுக்கு பல விருப்பங்கள் உள்ளன:
- ஒரு கட்டம் அமைக்க அனைத்து செல்களை சுற்றி
- நெடுவரிசைகளுக்கு இடையில் உள்ள கோடுகளை அமைத்தல்
- வரிசைகள் இடையே
- குறிப்பிட்ட பத்திகள் அல்லது வரிசைகள் இடையே.
நீங்கள் தனிப்பட்ட செல்கள் அல்லது தனிப்பட்ட செல்கள் உள்ளே வரிகளை வைக்க முடியும்.
ஒரு அட்டவணையில் உள்ள அனைத்து செல்களை சுற்றி கோடுகள் சேர்க்க எப்படி
உங்கள் அட்டவணையில் உள்ள அனைத்து செல்களை சுற்றி வரிகளை சேர்க்க, ஒரு கட்டம் விளைவை உருவாக்கி, பின்வரும் உங்கள் நடைதாளுடன் சேர்க்கவும்:
td, th {எல்லை: திட 1px கருப்பு;} அட்டவணையின் நெடுவரிசையில் மேலே இருந்து கீழ்நோக்கி ஓடும் செங்குத்து கோடுகள் உருவாக்க நெடுவரிசைகளுக்கு இடையே வரிகளைச் சேர்க்க, உங்கள் நடைதாளுடன் பின்வரும்வை சேர்க்கவும்: td, th {எல்லை இடது: திட 1px கருப்பு;} செங்குத்து கோடுகள் முதல் நெடுவரிசையில் தோன்றாவிட்டால், நீங்கள் ஒரு வர்க்கத்தை சேர்க்க வேண்டும் வது மற்றும் TD செல்கள். இந்த எடுத்துக்காட்டில், ஒரு வர்க்கத்தை எடுத்துக்கொள்ளுங்கள் இல்லை எல்லை அந்த செல்கள் மற்றும் ஒரு CSS விதி மூலம் எல்லை நீக்க. நீங்கள் பயன்படுத்தும் HTML வகுப்பு: வர்க்கம் = "இல்லை எல்லை"> பின், பாணியில் பின்வரும் பாணியைச் சேர்க்கவும்: . எல்லையற்றது {எல்லை இடது: எதுவும் இல்லை;} நெடுவரிசைகளுக்கு இடையே வரிகளை சேர்ப்பது போல, வரிசைகள் இடையே கிடைமட்ட வரிகளை பின்வருமாறு, ஒரு எளிய நடை பாணியில் சேர்க்கலாம்: tr {எல்லை கீழே: திட 1px கருப்பு;} அட்டவணையின் கீழே இருந்து எல்லையை அகற்ற, நீங்கள் மீண்டும் ஒரு வர்க்கத்தை சேர்க்க வேண்டும் டேக்: வர்க்கம் = "இல்லை எல்லை"> உங்கள் பாணியில் பின்வரும் பாணியைச் சேர்க்கவும்: . எல்லையற்றது {எல்லை கீழே: எதுவும்;} குறிப்பிட்ட வரிசைகள் அல்லது நெடுவரிசைகளுக்கு இடையேயான கோடுகள் மட்டுமே நீங்கள் விரும்பினால், நீங்கள் அந்த செல்கள் அல்லது வரிசைகளில் ஒரு வகுப்பைப் பயன்படுத்த வேண்டும். நெடுவரிசைகளுக்கு இடையில் ஒரு வரியை சேர்ப்பதன் மூலம் வரிசைகளில் உள்ளதைவிட சற்று கடினமாக உள்ளது, ஏனென்றால் அந்த நெடுவரிசையில் ஒவ்வொரு கலத்திற்கும் வர்க்கத்தை சேர்க்க வேண்டும். உங்கள் அட்டவணை தானாகவே CMS இலிருந்து உருவாக்கப்பட்டிருந்தால், இது சாத்தியமாகாது, ஆனால் நீங்கள் பக்கம் குறியாக்கினால், இந்த விளைவை அடைய தேவையான வகுப்புகளை நீங்கள் சேர்க்கலாம். வர்க்கம் = "பக்க எல்லை"> வரிசைகள் இடையே வரிகளை சேர்ப்பது மிகவும் எளிதானது, ஏனென்றால் வரிசையில் வர்க்கத்தை நீங்கள் வரிசையில் சேர்க்கலாம். வர்க்கம் = "எல்லை-கீழ்"> பின்னர், உங்கள் நடைதாளுடன் CSS ஐச் சேர்க்கவும்: . பர்பார்-பக்க {எல்லை இடது: திட 1px கருப்பு;}. பர்பர்ட்-அடி {எல்லை கீழே: திட 1px கருப்பு;} தனிப்பட்ட செல்கள் சுற்றி கோடுகள் சேர்க்க, நீங்கள் ஒரு எல்லை சுற்றி செல்கள் ஒரு வர்க்கம் சேர்க்க: வர்க்கம் = "எல்லை"> பின்னர் உங்கள் CSS க்கு பின்வரும் CSS ஐச் சேர்க்கவும்: . border {எல்லை: திட 1px கருப்பு;} ஒரு செல் உள்ளடக்கங்களை உள்ளே கோடுகள் சேர்க்க விரும்பினால், அதை செய்ய எளிதான வழி கிடைமட்ட விதி டேக் (). உங்கள் எல்லைகளில் உள்ள இடைவெளிகளை நீங்கள் கவனிக்கிறீர்கள் என்றால், எல்லை-உடைந்த பாணி அட்டவணையில் அமைக்கப்பட்டிருப்பதை உறுதி செய்து கொள்ளுங்கள். உங்கள் நடைதாளுடன் பின்வரும் சேர்க்கவும்: மேசை {எல்லை சரிவு: சரிவு;} நீங்கள் அனைத்தையும் தவிர்க்கலாம் மற்றும் உங்கள் டேக் குறியில் உள்ள எல்லை பண்புகளை பயன்படுத்தலாம். இருப்பினும், இந்த பண்புக்கூறு நீக்கப்பட்டாலும், CSS ஐ விட குறைவாக நெகிழ்வானது, நீங்கள் எல்லையுடைய அகலத்தை மட்டுமே வரையறுக்க முடியும் மற்றும் அட்டவணை அல்லது ஏதேனும் அனைத்து செல்கள் அல்லது செல்பேசிகளிலும் மட்டுமே இது இருக்க முடியும். அட்டவணையில் உள்ள நெடுவரிசைகளுக்கு இடையேயான கோடுகளை எவ்வாறு சேர்க்கலாம்
ஒரு அட்டவணையில் உள்ள வரிசைகள் இடையே கோடுகள் எப்படி சேர்க்க வேண்டும்
அட்டவணையில் குறிப்பிட்ட நெடுவரிசைகள் அல்லது வரிசைகள் இடையே கோடுகள் எவ்வாறு சேர்க்க வேண்டும்
ஒரு அட்டவணையில் தனிப்பட்ட செல்களை சுற்றி கோடுகள் சேர்க்க எப்படி
ஒரு அட்டவணையில் தனிப்பட்ட கலங்களை உள்ளே கோடுகள் சேர்க்க எப்படி
பயனுள்ள குறிப்புகள்
