CSS: அட்டவணைகள் வடிவமைப்பு. வடிவமைப்புக்கான எடுத்துக்காட்டுகள்

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

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

அட்டவணை எல்லை

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

முழு அட்டவணையின் வெளிப்புற எல்லைகளையும் நீங்கள் குறிப்பிடலாம்:

அட்டவணை {எல்லை: 3px திட கருப்பு; }

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

Th, td {border: 3px solid black;}

நீங்கள் எந்த தடிமன் மற்றும் வண்ண குறிப்பிட முடியும். நறுக்குதல் செல்கள் போது எல்லைகளை இரட்டை இல்லை என்பதை நினைவில் கொள்ளுங்கள்.

திடமான சொல் திட வடிவமைப்பைக் குறிக்கிறது. நீங்கள் மற்ற மதிப்புகளை குறிப்பிடலாம்.

பெரும்பாலும், வலுவான சட்டம் பயன்படுத்தப்படுகிறது, ஏனென்றால் இது மிகவும் கவர்ச்சிகரமானது மற்றும் தளத்தின் முக்கிய உள்ளடக்கத்திலிருந்து கவனத்தை திசை திருப்பாது.

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

அட்டவணை {எல்லை மேல்: 1px திட சிவப்பு; }

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

அட்டவணை தலைப்பு

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

இந்த தலைப்பு புத்தகங்களில் தரநிலையானது போலவே காட்டப்படுகிறது (எடுத்துக்காட்டாக "அட்டவணை 1").

தலைப்பு தலைப்பு பக்கத்தில் (மேல் அல்லது கீழ்) இந்த தலைப்பின் இருப்பிடத்தையும் குறிப்பிடலாம். உரை அல்லது align சொத்து மூலம் இடது அல்லது வலது சீரமைப்பு குறிப்பிடப்படுகிறது.

அட்டவணை பின்னணி

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

வண்ணம் பெயர் மற்றும் வெவ்வேறு குறியீட்டு முறைகளால் குறிப்பிடப்படுகிறது. கூடுதலாக, நீங்கள் பின்வருவதைக் குறிப்பிடலாம்:

• வெளிப்படையான - உறுப்பு வெளிப்படைத்தன்மை.
• மரபுரிமை - நிறம் பெற்றோர் உறுப்பு போலாகும்.
• துவக்க இயல்புநிலை மதிப்பு.

CSS கோப்பில் உள்ள அனைத்து அட்டவணைகள் CSS வண்ணத்தில் ஒரே வண்ணத்தில் தயாரிக்கப்படும் போது வெளிப்படையான ஒரு மாறுபாடு பயன்படுத்தப்படலாம், ஆனால் இந்த விஷயத்தில் அத்தகைய தேவையில்லை.

கூடுதலாக, பின்னணி ஒரு படம் இருக்க முடியும். இதை செய்ய, பாணியில் பின்னணி-படத்தை சொத்து குறிப்பிடுகிறது. பாதை இதைப் போன்றது:

Url ('URL')

கோப்புக்கான பாதை உறவினர் அல்லது முழுமையானதாக இருக்கலாம்.

மிகவும் சிக்கலான நிரப்பு ஒரு சாய்வுடன் செய்யப்படலாம்:

• நேரியல்-சாய்வு ();
• ரேடியல்-சாய்வு ();
• மீண்டும்-நேரியல்-சாய்வு () மற்றும் மீண்டும்-ரேடியல்-சாய்வு () - சாய்வு மீண்டும்.

செல் பின்னணி

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

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

• டி: nth- குழந்தை (கூட) {...} - வரிகளை மாற்றியமைக்க;
• டி: nth-child (1) {...} - ஒரு குறிப்பிட்ட சரத்தின் சொத்து குறிப்பிடுகிறது;
• Td: nth-child (கூட) {...} - நெடுவரிசைகளின் interlacing குறிப்பு;
• Td: nth-child (1) {...} - ஒரு குறிப்பிட்ட நெடுவரிசை சொத்து குறிப்பிடுகிறது.

ஒன்றிணைத்தல் மற்றும் எண்களை கூடுதலாக, நீங்கள் முதல் (td: முதல் குழந்தை) அல்லது கடைசியாக (td: last-child) குறிப்பிடலாம்.

செல்கள் இடையே இடைவெளி

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

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

பார்டர் சரிவு: சரிவு

ஆனால் இதற்கு மாறாக, தூரம் அதிகரிக்க வேண்டும் என்று நடக்கிறது. மேலும் இடைவெளிகளின் அளவு நெடுவரிசைகளுக்கு இடையில், மற்றும் வரிகளுக்கு இடையில் குறிப்பிடப்படலாம். இதைச் செய்ய, பின்வரும் மதிப்பைக் குறிப்பிடவும் (சரிபடுத்தாமல்):

பார்டர் சரிவு: தனி

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

எல்லை இடைவெளி: 20px.

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

எல்லை இடைவெளி: 10px20px.

உலாவிகளில் வேறுபாடு

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

மேலே உள்ள டிஜிட்டல் மதிப்புகளுக்கான சட்டத்தின் தடிமனியின் ஒரு எடுத்துக்காட்டு.

மாறிலிகளுக்கான சட்டத்தின் தடிமனியின் உதாரணம் இங்கே.

ஃபிரேம் பாணிகள் மிகவும் வித்தியாசமாக உள்ளன.

எனவே, வளரும் போது, எப்போதும் வெவ்வேறு உலாவிகளில் இதன் விளைவைப் பாருங்கள்.

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

மிகவும் மேம்பட்ட டெவலப்பர்கள் உலாவியின் அடிப்படையில் முற்றிலும் வேறுபட்ட CSS கோப்புகளை இணைக்க முடியும். யாரோ ஒவ்வொரு அல்லது சில குறிப்பிட்ட பாணியில் (வகுப்பு) சரிபார்க்கிறார்கள்.

பெரும்பாலான பிரச்சினைகள் நிழல்கள் எழுகின்றன.

CSS: அட்டவணைகள் வடிவமைப்பு, உதாரணங்கள்

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

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

பயனர்களுக்கு கண்களைக் குறைக்காத அழகிய நேர்த்தியான வடிவமைப்பிற்கு பலர் ஆர்வம் காட்டுவார்கள். இந்த விருப்பம் கிட்டத்தட்ட எந்த சூழ்நிலையிலும் பொருத்தமானது.

விளிம்புகள் வட்டமானது. இது அழகாக அழகாக இருக்கிறது.

முடிவுக்கு

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

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

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