வலைப்பக்கங்களை உருவாக்குவதற்கான முக்கிய கருவிகளில் ஒன்று அட்டவணை.
இல்லாமல் CSS ஐப் பயன்படுத்துகிறது, அட்டவணைகளின் உதவியுடன் மட்டுமே சிக்கலான வடிவமைப்புகளுடன் பக்கங்களை உருவாக்க முடியும். ஒரு வலைத்தளத்தை உருவாக்குவதற்கான தொடர் பாடங்களை நீங்கள் முடித்திருந்தால் - முதல் படிகள், நாங்கள் எதைப் பற்றி பேசுகிறோம் என்பதை நீங்கள் புரிந்துகொள்கிறீர்கள்.
எந்த அட்டவணையும் வரிசைகள் மற்றும் நெடுவரிசைகளின் தொகுப்பாகும், அதன் குறுக்குவெட்டில் கலங்கள் உள்ளன. உதாரணமாக:
HTML கண்ணோட்டத்தில் எங்கள் அட்டவணையைப் பார்ப்போம்:
குறிச்சொற்களைப் பயன்படுத்தி அட்டவணையே குறிப்பிடப்படுகிறது
,
அட்டவணைக்கு ஒரு பெயர் உள்ளது - குறிச்சொற்கள்
,
அட்டவணையில் வரிசைகள் - குறிச்சொற்கள் உள்ளன
,
ஒவ்வொரு வரிசையும் நெடுவரிசைகளைக் கொண்டுள்ளது - குறிச்சொற்கள்
,
நெடுவரிசைகள் முதல் வரிசையில் அமைந்துள்ள பெயர்களைக் கொண்டுள்ளன - குறிச்சொற்கள்
.
வரிசை மற்றும் நெடுவரிசை எண்களின் குறுக்குவெட்டை உள்ளடக்கமாகக் குறிப்பிடும் அட்டவணையை உருவாக்குவோம்:
முடிவு:
நீங்கள் பார்க்க முடியும் என, அது மிகவும் அழகாக மாறவில்லை, நாங்கள் அதை அலங்கரிப்போம்.
HTML அட்டவணை அளவுருக்கள்: உள்தள்ளல், அகலம், பின்னணி நிறம், சட்டகம்
இந்த நோக்கத்திற்காக குறிச்சொல்
பல அளவுருக்கள் உள்ளன:
அகலம்- அட்டவணையின் அகலத்தை அமைக்கிறது (பிக்சல்களில் அல்லது திரை அகலத்தின்%),
bgcolor- அட்டவணை கலங்களின் பின்னணி நிறத்தை அமைக்கிறது,
பின்னணி- அட்டவணை பின்னணியை ஒரு வடிவத்துடன் நிரப்புகிறது,
எல்லை- முழு அட்டவணையைச் சுற்றி குறிப்பிட்ட அகலத்தின் எல்லையை (பிக்சல்களில்) அமைக்கிறது,
செல்பேடிங்- செல் எல்லைக்கும் அதன் உள்ளடக்கங்களுக்கும் இடையே பிக்சல்களில் விளிம்பை அமைக்கிறது.
இந்த அளவுருக்களைப் பயன்படுத்துவோம்:
முடிவு:
இது சிறந்தது, ஆனால் எங்கள் அட்டவணை சாளரத்தின் இடது விளிம்பில் அழுத்துகிறது, அதில் உள்ள உரை. மேலும் மூன்று அளவுருக்களை சேர்ப்பதன் மூலம் இதை சரிசெய்வோம்:
சீரமைக்க- அட்டவணை சீரமைப்பை அமைக்கிறது: இடது (வலது), வலது (இடது), மையம் (மையம்),
செல் இடைவெளி- அட்டவணை செல்களுக்கு இடையே உள்ள தூரத்தை அமைக்கிறது (பிக்சல்களில்),
செல்பேடிங்- அட்டவணைக் கலத்தின் உரைக்கும் உள் எல்லைக்கும் இடையே உள்ள தூரத்தை அமைக்கிறது (பிக்சல்களில்).
இந்த அளவுருக்களைப் பயன்படுத்துவோம்:
முடிவு:
அட்டவணை இரட்டை எல்லைகளைக் கொண்டுள்ளது என்பதை நினைவில் கொள்க. நீங்கள் குறிப்பிட்டால் செல்ஸ்பேசிங்="0", பின்னர் எல்லைகள் வழக்கமான வடிவத்தை எடுக்கும்:
முடிவு:
பொதுவாக, எல்லைகளுக்கு இரண்டு அளவுருக்கள் பொறுப்பு:
சட்டகம்- அட்டவணையைச் சுற்றி சட்டத்தின் வகையை அமைக்கிறது மற்றும் பின்வரும் மதிப்புகளை எடுக்கலாம்:
வெற்றிடமானது- சட்டகம் இல்லை,
மேலே- மேல் சட்டகம் மட்டும்,
கீழே- கீழ் சட்டகம் மட்டும்,
hsides- மேல் மற்றும் கீழ் பிரேம்கள் மட்டுமே,
vsides- இடது மற்றும் வலது சட்டங்கள் மட்டுமே,
lhs- இடது சட்டகம் மட்டும்,
rhs- வலது சட்டகம் மட்டும்,
பெட்டி- சட்டத்தின் நான்கு பகுதிகளும்.
விதிகள்- உள் அட்டவணை எல்லைகளின் வகையை அமைக்கிறது மற்றும் பின்வரும் மதிப்புகளை எடுக்கலாம்:
எதுவும் இல்லை- செல்கள் இடையே எல்லைகள் இல்லை,
குழுக்கள்- வரிசைகள் மற்றும் நெடுவரிசைகளின் குழுக்களுக்கு இடையில் மட்டுமே எல்லைகள் (சிறிது பின்னர் விவாதிக்கப்படும்),
வரிசைகள்- கோடுகளுக்கு இடையில் மட்டுமே எல்லைகள்,
cols- எல்லைகள் நெடுவரிசைகளுக்கு இடையில் மட்டுமே உள்ளன,
அனைத்து- அனைத்து எல்லைகளையும் காட்டவும்.
இந்த அளவுருக்களைப் பயன்படுத்தி, நீங்கள் விரும்பும் வழியில் எல்லைகளை அமைக்கலாம். இங்கே நாம் ஒரே ஒரு உதாரணத்தை தருவோம், அவை அனைத்தையும் நீங்களே பரிசோதனை செய்யுங்கள்.
முடிவு:
உள்ள எல்லைகள் என்பதை கவனத்தில் கொள்ள வேண்டும் வெவ்வேறு உலாவிகள்சற்று வித்தியாசமாக காட்டப்படுகின்றன.
HTML குறிச்சொற்கள் tr மற்றும் td
அட்டவணைகள் வரிசையாக உருவாக்கப்படுகின்றன. எனவே, வரியில் (tr) குறிப்பிடப்பட்ட அளவுருக்கள் வரியின் அனைத்து கலங்களுக்கும் (td) அவற்றின் விளைவை நீட்டிக்கும். சரங்கள் மூன்று அளவுருக்களைக் கொண்டிருக்கலாம்:
சீரமைக்க- கலங்களில் உரையை கிடைமட்டமாக சீரமைக்கிறது, மதிப்புகளை எடுக்கலாம்: இடது (வலது), வலது (இடது), மையம் (மையம்),
valign- கலங்களில் உள்ள உரையை செங்குத்தாக சீரமைக்கிறது, மதிப்புகளை எடுக்கலாம்: மேல் (மேல்), கீழ் (கீழ்), மையமாக (நடுவில்),
bgcolor- வரியின் நிறத்தை அமைக்கிறது.
ஒரு உதாரணத்தைப் பார்ப்போம்:
அகலம்- நெடுவரிசை அகலத்தை அமைக்கிறது (பிக்சல்களில் அல்லது சதவீதமாக, 100% அட்டவணை அகலம்),
உயரம்- கலத்தின் உயரத்தை அமைக்கிறது, மேலும் ஒரே வரிசையில் உள்ள அனைத்து கலங்களும் இந்த உயரமாக மாறும்.
எடுத்துக்காட்டாக, குறிச்சொற்களில் எங்கள் குறியீட்டைச் சேர்ப்போம்
இந்த அளவுருக்கள்
1
2
3
முடிவு:
நீங்கள் அகலம் மற்றும் உயரத்தை அமைக்கவில்லை என்றால், உள்ளடக்கத்திற்கு ஏற்ப அட்டவணை உருவாக்கப்படும் என்பதை கவனத்தில் கொள்ள வேண்டும் (முந்தைய எடுத்துக்காட்டுகளில் இது இருந்தது).
இந்த பாடம் முடிந்தது, அட்டவணைகளை உருவாக்கி வடிவமைப்பதை பயிற்சி செய்யுங்கள், அடுத்த பாடத்தில் உங்களுக்கு இந்த திறன்கள் தேவைப்படும், அங்கு நாங்கள் சிக்கலான கட்டமைப்புகளின் அட்டவணையை உருவாக்குவோம்.
அட்டவணை தரவு- அட்டவணையில் காட்டப்படும் மற்றும் தர்க்கரீதியாக நெடுவரிசைகள் மற்றும் வரிசைகளாகப் பிரிக்கக்கூடிய தகவல். வலைப்பக்கங்களில் அட்டவணைத் தரவைக் காட்ட HTML குறிச்சொல் பயன்படுத்தப்படுகிறது
, இது அட்டவணையின் உள்ளடக்கங்களைக் கொண்ட ஒரு கொள்கலன். ஒரு HTML அட்டவணையின் உள்ளடக்கம் வரிக்கு வரி விவரிக்கப்படுகிறது, ஒவ்வொரு வரியும் ஒரு தொடக்க குறிச்சொல்லுடன் தொடங்குகிறது
மற்றும் நிறைவு குறிச்சொல்லுடன் முடிவடைகிறது
.
ஒரு குறிச்சொல்லின் உள்ளே
குறிச்சொற்களால் குறிப்பிடப்படும் அட்டவணை செல்கள் அமைந்துள்ளன
அல்லது
. வலைப்பக்கத்தில் காட்டப்படும் அனைத்து அட்டவணை உள்ளடக்கத்தையும் கொண்ட செல்கள் இது.
அட்டவணை சட்டகம்
முன்னிருப்பாக, ஒரு வலைப்பக்கத்தில் ஒரு HTML அட்டவணை ஒரு பார்டர் இல்லாமல் காட்டப்படும், அதே போல் மற்ற எல்லா உறுப்புகளையும் அட்டவணையில் சேர்க்கலாம் CSS சொத்துஎல்லை . ஆனால் நீங்கள் ஒரு சட்டத்தை ஒரு உறுப்புக்கு மட்டுமே சேர்த்தால் என்பதில் கவனம் செலுத்துவது மதிப்பு
, பின்னர் அது முழு டேபிளையும் சுற்றி காட்டப்படும். அட்டவணைக் கலங்களும் ஒரு பார்டரைக் கொண்டிருக்க, உறுப்புகளுக்கான எல்லைச் சொத்தை நீங்கள் அமைக்க வேண்டும்
இப்போது அட்டவணை மற்றும் கலங்கள் இரண்டும் எல்லைகளைக் கொண்டுள்ளன, மேலும் ஒவ்வொரு கலத்திற்கும் அட்டவணைக்கும் அவற்றின் சொந்த எல்லைகள் உள்ளன. இதன் விளைவாக, பிரேம்களுக்கு இடையில் வெற்று இடம் தோன்றியது, இந்த இடத்தின் அளவை எல்லை-இடைவெளி சொத்து மூலம் கட்டுப்படுத்தலாம், இது முழு அட்டவணைக்கும் அமைக்கப்பட்டுள்ளது. வேறு வார்த்தைகளில் கூறுவதானால், வெவ்வேறு செல்களுக்கு இடையே உள்ள இடைவெளியை தனித்தனியாக கட்டுப்படுத்த முடியாது.
எல்லை இடைவெளி சொத்து மதிப்பு 0 ஐப் பயன்படுத்தி கலங்களுக்கு இடையே உள்ள இடைவெளிகளை நீங்கள் அகற்றினாலும், கலங்களின் எல்லைகள் ஒன்றையொன்று தொட்டு, அளவை இரட்டிப்பாக்கும். செல் பார்டர்களை இணைக்க, பார்டர்-கலாப்ஸ் பண்பைப் பயன்படுத்தவும். இதற்கு இரண்டு அர்த்தங்கள் இருக்கலாம்:
தனி: இயல்புநிலை. செல்கள் காட்டப்படும் ஒரு குறுகிய தூரம்ஒருவருக்கொருவர், ஒவ்வொரு கலத்திற்கும் அதன் சொந்த எல்லை உள்ளது.
சரிவு: அருகில் உள்ள பிரேம்களை ஒன்றாக இணைக்கிறது, செல்களுக்கு இடையே உள்ள அனைத்து இடைவெளிகளும், செல்கள் மற்றும் டேபிள் பிரேமுக்கு இடையேயும் புறக்கணிக்கப்படும்.
ஆவணத்தின் தலைப்பு
பெயர்
குடும்பப்பெயர்
ஹோமர்
சிம்சன்
மார்ஜ்
சிம்சன்
பெயர்
குடும்பப்பெயர்
ஹோமர்
சிம்சன்
மார்ஜ்
சிம்சன்
முயற்சி »
அட்டவணை அளவு
டேபிள் கலங்களுக்கு பார்டர்களைச் சேர்த்த பிறகு, கலங்களின் உள்ளடக்கங்கள் விளிம்புகளுக்கு மிக அருகில் இருப்பதைக் கவனித்தேன். சேர்க்க இலவச இடம்கலங்களின் விளிம்புகள் மற்றும் அவற்றின் உள்ளடக்கங்களுக்கு இடையே உள்ள திணிப்பு சொத்தை நீங்கள் பயன்படுத்தலாம்:
Th, td (பேடிங்: 7px; ) முயற்சிக்கவும் »
அட்டவணையின் அளவு அதன் உள்ளடக்கத்தைப் பொறுத்தது, ஆனால் அட்டவணை மிகவும் குறுகலாக இருக்கும்போது அடிக்கடி சூழ்நிலைகள் எழுகின்றன, மேலும் அதை நீட்ட வேண்டிய அவசியம் ஏற்படும். அட்டவணையின் அகலம் மற்றும் உயரத்தைக் குறிப்பிடுவதன் மூலம் அகலம் மற்றும் உயர பண்புகளைப் பயன்படுத்தி மாற்றலாம் தேவையான அளவுகள்அல்லது அட்டவணை அல்லது செல்கள்:
அட்டவணை (அகலம்: 70%; ) வது (உயரம்: 50px; ) முயற்சிக்கவும் »
உரை சீரமைப்பு
இயல்பாக, டேபிள் ஹெடர் கலங்களில் உள்ள உரை மையமாக சீரமைக்கப்படும், அதே சமயம் வழக்கமான கலங்களில் உள்ள உரை சீரமைக்கப்பட்டிருக்கும்.
செங்குத்து-சீரமைப்பு CSS பண்பு, உரை உள்ளடக்கத்தின் செங்குத்து சீரமைப்பைக் கட்டுப்படுத்த உங்களை அனுமதிக்கிறது. இயல்பாக, கலங்களின் மையத்தில் உரை செங்குத்தாக சீரமைக்கப்படும். செங்குத்து-சீரமைப்பு சொத்து மதிப்புகளில் ஒன்றைப் பயன்படுத்தி செங்குத்து சீரமைப்பை மேலெழுதலாம்:
மேல்: கலத்தின் மேல் எல்லையில் உரை சீரமைக்கப்பட்டுள்ளது
கீழே: கலத்தின் கீழ் எல்லையில் உரை சீரமைக்கப்பட்டுள்ளது
ஆவணத்தின் தலைப்பு
பெயர்
குடும்பப்பெயர்
ஹோமர்
சிம்சன்
மார்ஜ்
சிம்சன்
முயற்சி »
அட்டவணை வரிசைகளின் பின்னணி நிறத்தை மாற்றுதல்
நிறைய தகவல்களுடன் பல வரிசைகளைக் கொண்ட பெரிய அட்டவணைகளைப் பார்க்கும்போது, ஒரு குறிப்பிட்ட வரிசையின் தரவு என்ன என்பதைக் கண்காணிப்பது கடினமாக இருக்கும். பயனர்கள் தங்கள் வழியைக் கண்டறிய உதவ, நீங்கள் இரண்டு வெவ்வேறு பின்னணி வண்ணங்களை மாறி மாறிப் பயன்படுத்தலாம். விவரிக்கப்பட்ட விளைவை உருவாக்க, நீங்கள் வகுப்பு தேர்வியைப் பயன்படுத்தலாம், அதை அட்டவணையின் ஒவ்வொரு இரண்டாவது வரிசையிலும் சேர்க்கலாம்:
ஆவணத்தின் தலைப்பு
பெயர்
குடும்பப்பெயர்
பதவி
ஹோமர்
சிம்சன்
தந்தை
மார்ஜ்
சிம்சன்
தாய்
பார்ட்
சிம்சன்
மகன்
லிசா
சிம்சன்
மகள்
முயற்சி »
மற்ற ஒவ்வொரு வரியிலும் வகுப்பு பண்புக்கூறைச் சேர்ப்பது மிகவும் கடினமானது. இந்தச் சிக்கலுக்கு மாற்றுத் தீர்வை வழங்குவதற்காக போலி வகுப்பு: nth-child ஆனது CSS3 இல் சேர்க்கப்பட்டது. இப்போது ஆவணத்தின் HTML மார்க்அப்பை மாற்றாமல், CSS ஐப் பயன்படுத்தி மட்டுமே இன்டர்லீவிங் விளைவை அடைய முடியும். போலி-வகுப்பு: nth-child ஐப் பயன்படுத்தி, முக்கிய வார்த்தைகளில் ஒன்றைப் பயன்படுத்தி ஒரு அட்டவணையின் அனைத்து இரட்டை அல்லது ஒற்றைப்படை வரிசைகளையும் நீங்கள் தேர்ந்தெடுக்கலாம்: கூட (இரட்டை) அல்லது ஒற்றைப்படை (ஒற்றைப்படை):
அட்டவணை தரவின் வாசிப்புத்திறனை மேம்படுத்துவதற்கான மற்றொரு வழி, உங்கள் சுட்டியை அதன் மேல் வட்டமிடும்போது அதன் பின்னணி நிறத்தை மாற்றுவது. இது அட்டவணையின் விரும்பிய உள்ளடக்கத்தை முன்னிலைப்படுத்தவும் தரவின் காட்சி உணர்வை அதிகரிக்கவும் உதவும்.
அத்தகைய விளைவைச் செயல்படுத்துவது மிகவும் எளிதானது, இதைச் செய்ய, நீங்கள் ஒரு போலி வகுப்பைச் சேர்க்க வேண்டும்: அட்டவணை வரிசை தேர்வியில் வட்டமிட்டு, விரும்பிய பின்னணி நிறத்தை அமைக்கவும்:
HTML அட்டவணையை மையப்படுத்துவது அட்டவணையின் அகலம் அதன் மூல உறுப்புகளின் அகலத்தை விட சிறியதாக இருந்தால் மட்டுமே சாத்தியமாகும். அட்டவணையை மையத்தில் சீரமைக்க, குறைந்தபட்சம் இரண்டு மதிப்புகளைக் கொடுத்து, விளிம்புச் சொத்தைப் பயன்படுத்த வேண்டும்: முதல் மதிப்பு இதற்குப் பொறுப்பாகும். விளிம்புமேலே மற்றும் கீழே உள்ள அட்டவணைகள், மற்றும் தானியங்கி மைய சீரமைப்புக்கான இரண்டாவது:
அட்டவணை (விளிம்பு: 10px தானியங்கு; ) முயற்சிக்கவும் »
அட்டவணையின் மேல் மற்றும் கீழ் வெவ்வேறு விளிம்புகள் தேவைப்பட்டால், நீங்கள் விளிம்புச் சொத்தை மூன்று மதிப்புகளாக அமைக்கலாம்: முதலாவது மேல் விளிம்பிற்கும், இரண்டாவது கிடைமட்ட சீரமைப்புக்கும், மூன்றாவது கீழ் விளிம்பிற்கும் பொறுப்பாகும்:
அட்டவணை (விளிம்பு: 10px தானியங்கு 30px; )
மேஜையின் உடல் அமைந்துள்ளது. உடல் வரிசைகள் மற்றும் நெடுவரிசைகளைக் கொண்டுள்ளது. அட்டவணை வரிக்கு வரி நிரப்பப்பட்டுள்ளது.
ஒவ்வொரு குறிச்சொல்
ஒரு புதிய வரியை உருவாக்குகிறது. மேலும் உள்ளமையில்
நெடுவரிசைகள் உருவாக்கப்படுகின்றன. நீங்கள் பல நெடுவரிசைகளை உருவாக்கலாம். இந்த வழக்கில், ஒவ்வொரு வரிசையிலும் உள்ள நெடுவரிசைகளின் எண்ணிக்கையை நீங்கள் கண்காணிக்க வேண்டும். எடுத்துக்காட்டாக, முதல் வரிசையில் 5 நெடுவரிசைகள் இருந்தால், பின்வரும் வரிசைகளும் 5 நெடுவரிசைகளைக் கொண்டிருக்க வேண்டும். இல்லையெனில் அட்டவணை மிதக்கும். கலங்களை ஒன்றிணைப்பது சாத்தியமாகும்.
html இல் அட்டவணையை உருவாக்குவது எப்படி
இங்கே ஒரு எடுத்துக்காட்டு, html குறியீடு:
எடுத்துக்காட்டு அட்டவணை
நெடுவரிசை 1
நெடுவரிசை 2
செல்லில் கவனம் செலுத்துங்கள்
. செல்களை கிடைமட்டமாக விரிவுபடுத்த சிறப்பு கோல்ஸ்பான் பண்புக்கூறைப் பயன்படுத்துகிறோம். அதன் எண் மதிப்பு, இணைக்கப்பட வேண்டிய நெடுவரிசைகளின் எண்ணிக்கையைக் குறிக்கிறது. இந்த பண்புக்கு ஒரு அனலாக் உள்ளது: குறிச்சொல்
(அட்டவணை தலைப்பு), நீங்கள் colspan ஐ உள்ளிட வேண்டும். விளைவு அப்படியே இருக்கும். ஆனால் பெரும்பாலும் அவர்கள் வழக்கமான டிடியைப் பயன்படுத்துகிறார்கள்.
இப்போது அனைத்து டேக் பண்புக்கூறுகளையும் கூர்ந்து கவனிப்போம்
.
குறிச்சொல் பண்புக்கூறுகள் மற்றும் பண்புகள்
குறிச்சொல்லைத் திறப்பதற்கு
நீங்கள் பல்வேறு பண்புகளை குறிப்பிடலாம்.
1. Property align="parameter" - அட்டவணை சீரமைப்பை அமைக்கிறது. பின்வரும் மதிப்புகளை எடுக்கலாம்:
மேலே உள்ள எடுத்துக்காட்டில், நாங்கள் அட்டவணையை மையமாக align="center" க்கு சீரமைத்தோம்.
இந்த பண்பு அட்டவணைக்கு மட்டுமல்ல, தனிப்பட்ட அட்டவணை கலங்களுக்கும் பயன்படுத்தப்படலாம்
அல்லது வரிகள்
. இதனால், வெவ்வேறு கலங்களில் சீரமைப்பு வித்தியாசமாக இருக்கும்.
உதாரணமாக
...
...
...
2. சொத்து பின்னணி="URL" - பின்னணி படத்தை அமைக்கிறது. URL க்கு பதிலாக, பின்னணி படத்தின் முகவரியை எழுத வேண்டும்.
உதாரணம்
எடுத்துக்காட்டு அட்டவணை
நெடுவரிசை 1
நெடுவரிசை 2
பக்கத்தில் பின்வருவனவற்றை மாற்றுகிறது:
கருத்தில் கொள்ளப்பட்ட எடுத்துக்காட்டில், எங்கள் பின்னணி படம் img கோப்புறையில் அமைந்துள்ளது (இது html பக்கத்தின் அதே கோப்பகத்தில் உள்ளது), மேலும் படம் fon.gif என்று அழைக்கப்படுகிறது. குறிச்சொல்லில் style="color:white;" சேர்த்துள்ளோம் என்பதை நினைவில் கொள்ளவும் . பின்னணி கிட்டத்தட்ட கருப்பு நிறத்தில் இருப்பதால், பின்னணியில் உரை கலப்பதைத் தடுக்க, உரையை வெண்மையாக்கினோம்.
3. சொத்து bgcolor="color" - அட்டவணையின் பின்னணி நிறத்தை அமைக்கிறது. முழு தட்டுகளிலிருந்தும் எந்த நிறத்தையும் நீங்கள் தேர்வு செய்யலாம் (html வண்ணங்களின் குறியீடுகள் மற்றும் பெயர்களைப் பார்க்கவும்)
4. சொத்து எல்லை = "எண்" - அட்டவணை எல்லையின் தடிமன் அமைக்கிறது. முந்தைய எடுத்துக்காட்டுகளில், எல்லை="1" என்று குறிப்பிட்டோம், அதாவது பார்டர் தடிமன் 1 பிக்சல்.
5. Property bordercolor="color" - எல்லையின் நிறத்தை அமைக்கிறது. எல்லை="0" எனில் பார்டர் இருக்காது மற்றும் பார்டர் நிறத்திற்கு அர்த்தம் இருக்காது.
6. சொத்து செல்பேடிங்="எண்" - ஃபிரேமிலிருந்து செல் உள்ளடக்கங்களுக்கு பிக்சல்களில் உள்தள்ளல்.
7. சொத்து செல்ஸ்பேசிங்="எண்" - பிக்சல்களில் உள்ள கலங்களுக்கு இடையே உள்ள தூரம்.
8. சொத்து எண்கள் = "எண்" - நெடுவரிசைகளின் எண்ணிக்கை. நீங்கள் அதை அமைக்கவில்லை என்றால், நெடுவரிசைகளின் எண்ணிக்கையை உலாவியே தீர்மானிக்கும். ஒரே வித்தியாசம் என்னவென்றால், இந்த அளவுருவைக் குறிப்பிடுவது பெரும்பாலும் அட்டவணையை ஏற்றுவதை விரைவுபடுத்தும்.
9. Property frame="parameter" - டேபிளை சுற்றி பார்டர்களை எப்படி காட்டுவது. பின்வரும் மதிப்புகளை எடுக்கலாம்:
void - எல்லைகளை வரைய வேண்டாம்
எல்லை - மேஜையைச் சுற்றி எல்லை
மேலே - மேசையின் மேல் விளிம்பில் எல்லை
கீழே - அட்டவணையின் கீழ் எல்லை
hsides - கிடைமட்ட எல்லைகளை மட்டும் சேர்க்கவும் (மேசையின் மேல் மற்றும் கீழ்)
vsides - செங்குத்து எல்லைகளை மட்டும் வரையவும் (அட்டவணையின் இடது மற்றும் வலதுபுறம்)
10. சொத்து உயரம்="எண்" - அட்டவணையின் உயரத்தை அமைக்கிறது: பிக்சல்கள் அல்லது சதவீதங்களில்.
11. சொத்து விதிகள் = "அளவுரு" - செல்களுக்கு இடையே உள்ள எல்லைகளை எங்கே காண்பிக்க வேண்டும். பின்வரும் மதிப்புகளை எடுக்கலாம்:
அனைத்தும் - ஒவ்வொரு டேபிள் கலத்தைச் சுற்றியும் ஒரு கோடு வரையப்பட்டுள்ளது
குழுக்கள் - குறிச்சொற்களால் உருவாக்கப்பட்ட குழுக்களுக்கு இடையே ஒரு வரி காட்டப்படும் , , ,
அல்லது
cols - கோடு நெடுவரிசைகளுக்கு இடையில் காட்டப்படும்
எதுவும் இல்லை - அனைத்து எல்லைகளும் மறைக்கப்பட்டுள்ளன
வரிசைகள் - குறிச்சொல் மூலம் உருவாக்கப்பட்ட அட்டவணை வரிசைகளுக்கு இடையே ஒரு எல்லை வரையப்படுகிறது
12. சொத்து அகலம் = "எண்" - அட்டவணையின் அகலத்தை அமைக்கிறது: பிக்சல்கள் அல்லது சதவீதங்களில்.
13. Property class="class_name" - அட்டவணை எந்த வகுப்பைச் சேர்ந்தது என்பதை நீங்கள் குறிப்பிடலாம்.
14. Property style="styles" - ஒவ்வொரு அட்டவணைக்கும் தனித்தனியாக பாணிகளை அமைக்கலாம்.
இப்போது மேசைக்குள் டைவ் செய்து டேபிள் கலங்களின் பண்புகளைப் பார்க்க வேண்டிய நேரம் இது. இந்த பண்புக்கூறுகள் தொடக்க குறிச்சொல்லில் எழுதப்பட வேண்டும்
.
பண்புக்கூறுகள் மற்றும் பண்புகள்
மற்றும்
1. Property align="parameter" - ஒரு தனிப்பட்ட அட்டவணை கலத்தின் சீரமைப்பை அமைக்கிறது. பின்வரும் மதிப்புகளை எடுக்கலாம்:
இடது - இடது சீரமைப்பு
மையம் - மைய சீரமைப்பு
வலது - வலது சீரமைப்பு
2. சொத்து பின்னணி="URL" - கலத்தின் பின்னணி படத்தை அமைக்கிறது. URL க்கு பதிலாக, பின்னணி படத்தின் முகவரியை எழுத வேண்டும்.
3. சொத்து bgcolor="color" - கலத்தின் பின்னணி நிறத்தை அமைக்கிறது.
4. Property bordercolor="color" - செல் பார்டரின் நிறத்தை அமைக்கிறது.
5. சொத்து char="letter" - எந்த எழுத்தில் இருந்து சீரமைப்பு செய்யப்பட வேண்டும் என்பதைக் குறிப்பிடுகிறது. align பண்புக்கூறின் மதிப்பை char ஆக அமைக்க வேண்டும்.
6. Property colspan="number" - ஒன்றிணைக்கப்பட வேண்டிய கிடைமட்ட கலங்களின் எண்ணிக்கையை அமைக்கிறது.
7. சொத்து உயரம்="எண்" - அட்டவணையின் உயரத்தை அமைக்கிறது: பிக்சல்களில் அல்லது சதவீதமாக.
8. சொத்து அகலம் = "எண்" - அட்டவணையின் அகலத்தை அமைக்கிறது: பிக்சல்களில் அல்லது சதவீதமாக.
9. Property rowspan="number" - இணைக்கப்பட வேண்டிய செங்குத்து கலங்களின் எண்ணிக்கையை அமைக்கிறது.
10. சொத்து valign="அளவுரு" - செல் உள்ளடக்கங்களின் செங்குத்து சீரமைப்பு.
மேல் - செல் உள்ளடக்கங்களை வரிசையின் மேல் விளிம்பில் சீரமைக்கவும்
நடுத்தர - நடுத்தர சீரமைப்பு
கீழே - கீழ் விளிம்பிற்கு சீரமைப்பு
அடிப்படை - அடிப்படைக்கு சீரமைப்பு
குறிப்பு 1
குறிச்சொல்லுக்கு
அதே விருப்பத்தேர்வுகள் உள்ளன
. ஒரு குறிச்சொல்லுக்கான அளவுருக்கள்
படிநிலையாக அனைவருக்கும் பயன்படுத்தப்படும்
அவனுக்குள்
அட்டவணையில் செல் பார்டர்கள் ஒன்றாக ஒட்டாமல் தடுப்பது எப்படி
நீங்கள் பார்டர் (செல் பார்டர்) மற்றும் கலங்களுக்கு இடையில் பூஜ்ஜிய திணிப்பு ஆகியவற்றைப் பயன்படுத்தினால், அவை இன்னும் ஒன்றாக ஒட்டப்பட்டு, இரட்டை எல்லையைப் பெறுவீர்கள். இதைத் தவிர்க்க, நீங்கள் எல்லைச் சரிவைக் குறிப்பிட வேண்டும்: அட்டவணை பாணிகளில் சரிவு:
...
அன்புள்ள வாசகரே, இப்போது நீங்கள் இன்னும் நிறைய கற்றுக்கொண்டீர்கள் html குறிச்சொல்அட்டவணை. இப்போது அடுத்த பாடத்திற்கு செல்லுமாறு நான் உங்களுக்கு அறிவுறுத்துகிறேன்.
HTML அட்டவணை எல்லைகளை CSS கருவிகளைப் பயன்படுத்தி எளிதாக மாற்றலாம். அவற்றின் காட்சி பண்புகளைப் பயன்படுத்தி கட்டமைக்கப்பட்டுள்ளது: சரிவு மற்றும் இடைவெளி.
அட்டவணைக் காட்சியைத் திருத்த, பார்டர் சொத்துக் குழுவைப் பயன்படுத்தவும். இது அகலம், நிறம், எல்லைகளின் இருப்பு/இல்லாமை, அவற்றின் நடை மற்றும் பிற காட்சி அம்சங்களைத் தனிப்பயனாக்க உங்களை அனுமதிக்கிறது.
அடிப்படைகள்
ஸ்டைலிங் இல்லாத அட்டவணை, எல்லைகள் இல்லாமல் கட்டமைக்கப்பட்ட உரையாகத் தோன்றும். html இல் உள்ள அட்டவணை குறிச்சொற்களைப் பயன்படுத்தி கட்டப்பட்டுள்ளது:
சரங்களுக்கு tr;
தலைப்புகளுக்கான வது;
நெடுவரிசைகளுக்கு td.
தலை
தலை
தலை
செல்
செல்
செல்
செல்
செல்
செல்
உலாவி சாளரத்தின் விளிம்பில் உள்ள உரை அளவு மற்றும் எழுத்துரு, பின்னணி, உள்தள்ளல்கள் பாடி கண்டெய்னரில் css இல் அமைக்கப்பட்டுள்ளன.
மேட்ரிக்ஸின் தோற்றத்தை வடிவமைக்க பாங்குகள் பயன்படுத்தப்படுகின்றன. html டேபிளின் பார்டரின் தடிமன், வகை மற்றும் வண்ணத்தைக் குறிப்பிட, பார்டர் சொத்து உங்களை அனுமதிக்கிறது.
ஒரு குறிப்பிட்ட பக்கத்திற்கு, இது எல்லை-மேல்(/வலது/கீழ்/இடது)-பாணி(/வண்ணம்/அகலம்/ஆரம்) என்ற டெம்ப்ளேட்டைப் பயன்படுத்தி அமைக்கப்படுகிறது.
(பார்டர்-மேல்-நிறம்: அடர்நீலம்;)
திணிப்பு கலத்தின் உள்ளே உள்ள திணிப்பை உரையிலிருந்து சட்டத்திற்கு அமைக்கிறது, உரை-சீரமைப்பு சீரமைப்பை அமைக்கிறது.
ஒரு அட்டவணையின் தோற்றத்தை வடிவமைக்க பாணிகள் பயன்படுத்தப்படுகின்றன. எல்லை சொத்து, எல்லையின் தடிமன், பாணி மற்றும் நிறத்தைக் குறிப்பிட உங்களை அனுமதிக்கிறது. திணிப்பு உரையிலிருந்து உள்தள்ளலை அமைக்கிறது, உரை-சீரமைப்பு சீரமைப்பை அமைக்கிறது.
பார்டரைப் பயன்படுத்த வேண்டிய அவசியமில்லை அல்லது பார்டர்-கலர், -அகலம் மற்றும் -ஸ்டைலை தனித்தனியாகக் குறிப்பிட வேண்டிய அவசியமில்லை, ஏனெனில் நீங்கள் ஒரு HTML அட்டவணையை எல்லைகள் இல்லாமல் முழு வடிவமைப்புடன் செய்யலாம். எடுத்துக்காட்டாக, பின்வரும் குறியீடு பின்னணி, திணிப்பு மற்றும் வட்டமான மூலைகளை அமைக்கிறது (பிந்தைய அணி உள் அல்லது வெளிப்புற கோடுகள் இல்லாமல்).
அட்டவணை (உரை-சீரமைப்பு: இடது; பின்னணி-நிறம்: rgba(228, 228, 245); எல்லை-மேல்-இடது-ஆரம்: 15எம் 1எம்; பார்டர்-கீழ்-வலது-ஆரம்: 15எம் 1எம்; ) td, வது ( திணிப்பு: 1.5vw)
ஒவ்வொரு கலத்திற்கும் ஒரு பின்புலத்தை அமைப்பதன் மூலம், பார்டர்கள் இல்லாத அட்டவணை ஒன்று இருப்பதைப் போல இருக்கும்.
நீங்கள் html அட்டவணையின் எல்லைகளை அகற்றி, உட்புறத்தை விட்டுவிடலாம். இதைச் செய்ய, எடுத்துக்காட்டாக, அவை செல்களுக்கு (டிஆர்) எல்லைச் சொத்தை அமைக்கின்றன, அருகிலுள்ள பக்கங்களில் பொதுவான சட்டங்களை அமைக்கின்றன (சரிவு) மற்றும் மேட்ரிக்ஸைச் சுற்றி (மறைக்கப்பட்டவை) கோடுகளை வரைவதைத் தடைசெய்கின்றன. கடைசி செயல் செல் கோடுகளை மறைக்கும், இது சரிவு இயக்கப்பட்டால், அட்டவணையின் வெளிப்புற விளிம்புகள் அதே இடத்தில் தோன்றும்.
html இல் உள்ள முக்கிய டேபிள் பண்புகளில் ஒன்றான பார்டர்-கோளாப்ஸ், செல் பார்டர்கள் எவ்வாறு காட்டப்படும் என்பதை தீர்மானிக்கிறது. சொத்து மூன்று மதிப்புகளில் ஒன்றைக் கொண்டிருக்கலாம்: சரிவு, தனி, மரபுரிமை.
அட்டவணை (எல்லை சரிவு: சரிவு;)
இயல்புநிலை தனித்தனியாக அமைக்கப்பட்டுள்ளது, எனவே ஒவ்வொரு கலத்திற்கும் அதன் சொந்த எல்லை இருக்கும். சரிவதற்கு நன்றி, நீங்கள் கலங்களின் கோடுகளை ஒன்றிணைக்கலாம், இதனால் அவற்றின் உள்ளடக்கங்கள் ஒரு சட்டத்தால் பிரிக்கப்படுகின்றன. மேலே விவரிக்கப்பட்ட மூன்று எல்லை நிலைகளை படம் காட்டுகிறது: பாணிகள் இல்லாமல்; எல்லை சரிவு இயல்புநிலையாக அமைக்கப்பட்டுள்ளது; மதிப்பு எல்லை - சரிவு, செல்கள் இடையே ஒரு பொதுவான வரி விட்டு.
இரட்டை பிரேம்கள்
சரிவு பண்பு ஒரு html அட்டவணையில் உள்ள கலங்களின் எல்லைகளை ஒன்றுக்கொன்று சார்பற்றதாகவும் பொதுவானதாகவும் மாற்ற உங்களை அனுமதிக்கிறது. எல்லை இடைவெளி சொத்து பெரும்பாலும் அதனுடன் பயன்படுத்தப்படுகிறது, இது செல் பிரேம்களுக்கு இடையிலான தூரத்தை ஒழுங்குபடுத்துகிறது. கிடைமட்ட மற்றும் செங்குத்து இடைவெளி இரண்டையும் நீங்கள் குறிப்பிடலாம்.
அட்டவணை (எல்லை இடைவெளி: 0.5vw 1vw; )
முதல் மதிப்பு செல்கள் இடையே உள்ள தூரத்தை கிடைமட்டமாக குறிக்கிறது, இரண்டாவது - செங்குத்தாக. அட்டவணைக்கு ஒரு சட்டகம் குறிப்பிடப்பட்டால், அதிலிருந்து செல்களுக்கான தூரமும் இடைவெளி பண்புகளால் உருவாகிறது, ஆனால் அது மேட்ரிக்ஸின் திணிப்பால் பாதிக்கப்படலாம். மேட்ரிக்ஸ் பின்னணியைக் கொண்டிருக்கும் சந்தர்ப்பங்களில், கலங்களுக்கு இடையில் உள்ள இலவச இடைவெளி அதனுடன் நிரப்பப்படும்.
டேபிளில் செல் பார்டர்கள் இணைக்கப்படவில்லை எனில், வெற்று செல்கள் பண்பு செல் கோடுகள் மற்றும் பின்னணியைக் காட்ட அனுமதிக்கிறது, அவை காலியாகக் கருதப்படும் (தெரியும் அல்லது எழுத்துகள் இல்லை). ஒவ்வொரு கலத்தின் எல்லைகளையும் பின்புலத்தையும் காட்ட விரும்பினால், காட்டும்படி சொத்தை அமைக்கவும்.
அட்டவணை (வெற்று செல்கள்: ஷோ;)
மறை மதிப்பு வெற்று தொகுதிகளின் எல்லைகள் மற்றும் பின்னணிகளை மறைக்கிறது. ஒரு வரிசையில் உள்ள அனைத்து கலங்களும் காலியாக இருந்தால், அந்த வரிசையில் பூஜ்ஜிய உயரமும் ஒரே ஒரு செங்குத்து கோடும் இருக்கும்.
உறுப்புகளின் குழுக்களுக்கு (கலங்கள், நெடுவரிசைகள், வரிசைகள், வரிசைகளின் குழுக்கள் அல்லது நெடுவரிசைகள்) எல்லைகளை ஒதுக்க, ஒரு விதி பண்பு உள்ளது. அதன் மதிப்பு நேரடியாக டேபிள் டேக்கில் html இல் எழுதப்பட்டுள்ளது.
உறுப்புகளின் பிரேம்களைத் தேர்ந்தெடுத்து வரைய இது உங்களை அனுமதிக்கிறது. html இல் உள்ள பண்புக்கூறைக் குறிப்பிடுவது போதுமானது, இது கலங்களுக்கு இடையில் உள் கோடுகளை உருவாக்கும். html டேபிள் பார்டர் cssல் கைமுறையாகக் குறிப்பிடப்பட வேண்டும்.
எனவே, முதல் படம் அட்டவணை வழியாக கூடுதல் சட்ட வடிவமைப்பு இல்லாமல் பண்புக்கூறின் தூய்மையான செயல்பாட்டைக் காட்டுகிறது. இரண்டாவது படத்தில், மேல் கோடு வரையப்பட்டுள்ளது, இது வழிமுறைகளைப் பயன்படுத்தி நிறுவப்பட்டது.
அட்டவணை (பார்டர்-மேல்: 1vw புள்ளியிடப்பட்ட #486743; )
ஒரு பண்புக்கூறு பல மதிப்புகளைக் கொண்டிருக்கலாம். அனைத்தும் 1px என்ற பார்டர் தடிமன் கொண்ட கலங்களுக்கு இடையே பார்டர்களை உருவாக்குகிறது. கோல்ஸ் நெடுவரிசைகளுக்கு இடையில் கோடுகளை உருவாக்குகிறது, வரிசைகள் - வரிசைகளுக்கு இடையில், எதுவும் விளிம்புகளை அழிக்காது. அனைத்து மற்றும் வரிசைகளின் மதிப்புகள் கொண்ட அட்டவணையின் எடுத்துக்காட்டுகளை படம் காட்டுகிறது.
பார்டர் மற்றும் பார்டர்கலரைப் பயன்படுத்தி விதிப் பண்புகளைப் பயன்படுத்தும் போது செல் பார்டர்களின் நிறத்தையும் சட்டத்தின் அகலத்தையும் மாற்றலாம்.
உடை முரண்பாடுகள்
கலங்கள், வரிசைகள், நெடுவரிசைகள் மற்றும் உறுப்புக் குழுக்களுக்கு அவற்றின் சொந்த எல்லை மதிப்புகளைக் கொடுக்கலாம். இருப்பினும், அவை மூன்று அளவுருக்களில் வேறுபடலாம்: பாணி, தடிமன் மற்றும் நிறம்.
சரிவு பயன்முறையில், ஸ்டைலிங் முரண்பாடுகள் எழுகின்றன. ஒரு எல்லை இரண்டு வெவ்வேறு கலங்களின் விதிக்கு உட்பட்டது என்ற உண்மையின் காரணமாக, முன்னுரிமை பெறும் பாணியைத் தேர்ந்தெடுப்பதில் சிக்கல் எழுகிறது. E. Malchuk எழுதுவது போல், மிகவும் "கவரும்" (மறைக்கப்பட்டதைத் தவிர) வெற்றி பெறுகிறது.
கூறுகளில் ஒன்றில் சர்ச்சைக்குரிய எல்லையின் பார்டர் பாணி உடைமை மறைக்கப்பட்டிருந்தால், அந்த பாணி வெற்றி பெறும். மறைக்கப்பட்டவைக்கு அதிக முன்னுரிமை உண்டு.
மிகச்சிறிய எடை எதுவுமில்லை. வரி காட்டப்படக்கூடாது என்றும் இது கட்டளையிடுகிறது, ஆனால் அறிவுறுத்தல் செயல்படுத்தப்படுவதற்கு, அந்த வரிக்கான அனைத்து கூறுகளும் இந்த (எதுவும் இல்லை) விதியைக் கொண்டிருக்க வேண்டும்.
மெல்லிய மற்றும் தடித்த எல்லைகளுக்கு இடையில், தடிமனானவைகளுக்கு அதிக முன்னுரிமை உண்டு.
அதே பிரேம்கள், ஆனால் வெவ்வேறு பாணிகள், இரட்டை திட (இரட்டை) எப்போதும் வெற்றி, திட, கோடு (கோடு), புள்ளிகள்.
ஒரே வேறுபாடுகள் நிறங்கள் என்றால், சிறிய கூறுகளின் தோற்றம் எப்போதும் அதிகமாக இருக்கும் (செல் அலங்காரத்திற்கு வரிசைகளை விட அதிக முன்னுரிமை உள்ளது, மற்றும் வரிசைகள் அட்டவணையை விட அதிகமாக இருக்கும்).
மோதல் விளக்கம்
ஏற்கனவே விவாதிக்கப்பட்ட அட்டவணையைப் பயன்படுத்தி பாணிகளின் மோதலை விளக்குவது எளிது. கலங்களுக்கு இரண்டு வகுப்புகளைச் சேர்த்து, அவற்றுக்கான வடிவமைப்பைக் குறிப்பிடுவது போதுமானது. Html வடிவம் எடுக்கிறது:
எல்லை வடிவமைப்பை கலத்தின் ஒவ்வொரு பக்கத்திற்கும் தனித்தனியாக அமைக்கலாம். இதைச் செய்ய, பார்டர் பாணியில் ஒரு மதிப்பைக் குறிப்பிடவில்லை, ஆனால் கலத்தின் பக்கங்களுடன் தொடர்புடைய நான்கைப் பட்டியலிடுங்கள்.
ஒன்று முதல் நான்கு வெவ்வேறு மதிப்புகளைக் குறிப்பிடுவதன் மூலம் ஒரு வரியில் தரவைக் குறிப்பிடலாம். ஒவ்வொன்றும் பாரம்பரியமாக ஒரு தரப்பினருக்கான அறிவுறுத்தலாக மாறும்.
நீங்கள் இரண்டு மதிப்புகளை அமைத்தால், முதலாவது கீழ் மற்றும் மேல் எல்லைகளுக்கு பொறுப்பாகும், இரண்டாவது - இடது மற்றும் வலது.
மூன்றில், முதலாவது மேல், இரண்டாவது இடது மற்றும் வலது மற்றும் மூன்றாவது கீழ் வரிக்கு பொறுப்பாகும்.
நான்கு மதிப்புகள் ஒவ்வொரு வரியையும் தனித்தனியாக வரையறுக்கின்றன, மேலிருந்து கடிகார திசையில் தொடங்கி இடதுபுறம்.
மேலே காட்டப்பட்டுள்ளபடி, ஒவ்வொரு பக்கத்திற்கும் தரவை வரையறுப்பதன் மூலம் செல் எல்லைகளின் வடிவமைப்பையும் நீங்கள் குறிப்பிடலாம்.
மொத்தம் பத்து பிரேம் ஸ்டைல்கள் உள்ளன. அவை அனைத்தும் வரியை மாற்றுகின்றன அல்லது அகற்றுகின்றன:
இல்லை - எல்லை இல்லை;
மறைக்கப்பட்ட - மிகவும் கண்டிப்பான எதுவும், பண்பின் தோற்றத்தைத் தடுக்கிறது (மோதல் சூழ்நிலையில்);
புள்ளியிட்ட - புள்ளிகளால் ஆனது;
கோடு - புள்ளி;
திட - திடமான;
இரட்டை - இரட்டை திட;
பள்ளம் - சட்டமானது மேற்பரப்பில் அழுத்தப்பட்டதாகத் தெரிகிறது;
முகடு - குவிந்த கோடு;
உட்செலுத்துதல் - உண்மையில், தனிமத்தின் ஒரு பக்கத்திற்கு அது ஒரு ரிட்ஜ் போல செயல்படுகிறது, முழு உறுப்புக்கும் பயன்படுத்தினால், மேல் மற்றும் இடது ஆகியவை நிழலாடப்படுகின்றன, மேலும் கீழ் மற்றும் வலதுபுறம் முன்னிலைப்படுத்தப்படும்;
ஆரம்பம் - ஒரு தனிமத்தின் ஒரு பக்கத்தில் பயன்படுத்தப்படும் போது பள்ளம் போல் செயல்படுகிறது, அது கீழ் மற்றும் வலதுபுறத்தை மறைத்து, மேல் மற்றும் இடது இலகுவாக இருக்கும்.
ஒவ்வொரு கலத்திற்கும் (மேல் மற்றும் இடது பக்கங்களுக்கு) பாணிகளில் ஒன்று பயன்படுத்தப்படுகிறது. அவர்கள் ஒருவருக்கொருவர் போட்டியிடவில்லை என்பதை உறுதிப்படுத்த, "பலவீனமானவர்கள்" உயர்ந்த மதிப்புகளை வழங்குகிறார்கள்.
மேட்ரிக்ஸில் வழங்கப்படும் தரவின் தன்மைக்கு பெரும்பாலும் அட்டவணையின் எல்லைகள், செல் பிரேம்கள், வரிசைகள் அல்லது நெடுவரிசைகளை மாற்றியமைக்க வேண்டும். இதற்கு நீங்கள் பயன்படுத்தலாம்:
மறைக்கப்பட்ட நன்மை அதன் முன்னுரிமை. ஒரே நேரத்தில் இரண்டு உறுப்புகளின் விதி எல்லைக்கு பொருந்தும் மற்றும் அவற்றில் ஒன்று எல்லை-பாணியில் மறைந்திருக்கும் மதிப்பைக் கொண்டிருந்தால், வரி காட்டப்படாது. அதாவது, நீங்கள் முழு அட்டவணையையும் எளிதாக உருவாக்கலாம், பின்னர் தேவையற்ற பிரேம்களைத் தேர்ந்தெடுத்து அகற்றலாம்.
கலங்களில் மறைத்து வைப்பதால் மற்ற முறைகளைப் பயன்படுத்தி எல்லையை மீட்டெடுக்க இயலாது (ஹெவிவெயிட் தவிர! முக்கியமானது). எனவே, செல்களின் சில பக்கங்களை நீங்கள் அகற்ற வேண்டும் என்றால், அதைப் பயன்படுத்தாமல் இருப்பது நல்லது.
டேபிள் இருக்குன்னு சொன்னாங்க. முதல் வரியில் உள்ள செங்குத்து எல்லைகளை அகற்றுவதே குறிக்கோள். இது ஒரு தனி குறிச்சொல்லுடன் (தலைப்பு) குறிக்கப்பட்டுள்ளது, எனவே கூடுதல் வகுப்பை உள்ளிட வேண்டிய அவசியமில்லை. எல்லை-இடது என்று குறிப்பிட்டு, முழு குறிச்சொல்லுக்கும் மறைத்து விண்ணப்பித்தால், உள் எல்லைகளுடன் சேர்த்து, அட்டவணையின் பக்க சட்டத்தின் ஒரு பகுதி அகற்றப்படும், இது நிபந்தனையின்படி தேவையில்லை. நீங்கள் எதுவும் மற்றும் மேட்ரிக்ஸ் வரியைப் பயன்படுத்தினால், உள் கோடுகளுக்கு முரண்படாத இரண்டு விதிகள் இருக்கும், மேலும் வெளிப்புற விளிம்பிற்கு அட்டவணையில் கொடுக்கப்பட்டுள்ள விதியுடன் எதுவும் முரண்படாது, மேலும் பக்கமானது இடத்தில் இருக்கும். .
தனிப்பட்ட செல் கோடுகளை அகற்றுவது, பாணி, அகலம் மற்றும் வண்ணத்தின் தனிப்பட்ட அமைப்பிற்காகக் காட்டப்பட்டுள்ளபடி, தொடர்புடைய உறுப்புகளுக்கு ஒதுக்கப்பட்ட வகுப்புகளைப் பயன்படுத்தி செய்யப்படுகிறது.
அதேசமயம், அட்டவணையில் குறிப்பிடப்பட்டுள்ள மேட்ரிக்ஸின் வெளிப்புற பிரேம்களைக் குறிப்பிடுவதன் மூலம் html அட்டவணையில் பக்க எல்லையை அகற்றுவது எளிது. ஒரு குறிப்பிட்ட வரியை cssல் குறிப்பிட்டால் போதும்.
அட்டவணை (எல்லை-இடது-பாணி: மறைக்கப்பட்ட;)
வரிசைகளில் உள்ள எல்லைகளை அகற்றுவது, TR இல் மறைந்திருக்கும் மதிப்புடன் எல்லைச் சொத்தைப் பயன்படுத்தி செயல்படுத்த எளிதானது. மறைந்து போவது மட்டுமல்ல கிடைமட்ட கோடுகள்அட்டவணைகள், ஆனால் பக்க அட்டவணைகள். மேட்ரிக்ஸ் செங்குத்து நெடுவரிசைகளாக சிதைகிறது.
Tr (எல்லை-பாணி: மறைக்கப்பட்ட;)
கடைசி முயற்சியாக!முக்கியம். அறிவுறுத்தலுக்குப் பிறகு அதைச் சேர்த்தால், அது கூடுதல் முன்னுரிமை பெறும்.
HTML அட்டவணை எல்லைகள் நெகிழ்வானவை மற்றும் தனிப்பயனாக்க எளிதானது. எல்லை சொத்து குழு உறுப்புகளை மறைக்க, நிறம், அகலம் அல்லது பாணியை மாற்ற உங்களை அனுமதிக்கிறது. அட்டவணைகளின் தீமை என்னவென்றால், அட்டவணையில் பயன்படுத்தப்படும் விதிகளின் கலவையின் விளைவாக எப்போதும் தெளிவாகக் கணிக்க முடியாது. தனிப்பட்ட உறுப்பு. இதைக் கருத்தில் கொண்டு, எல்லைகளுக்கான சாத்தியமான பாணிகளின் எண்ணிக்கையைக் குறைக்க அல்லது அவற்றைத் தேர்ந்தெடுத்துப் பயன்படுத்த பரிந்துரைக்கப்படுகிறது.
அட்டவணைகள் மிகவும் மோசமாக உள்ளன, மேலும் உலாவிகள் சில அட்டவணை பண்புகளை, குறிப்பாக, பிரேம்களை, அவற்றின் சொந்த வழியில் காண்பிக்கின்றன. அதே நேரத்தில், இந்த குறைபாடுகளை பாணிகளின் சக்தியைப் பயன்படுத்துவதன் மூலம் எளிதாக சரிசெய்ய முடியும். அதே நேரத்தில், அட்டவணைகளை வடிவமைப்பதற்கான வழிமுறைகள் பெரிதும் விரிவடைந்துள்ளன, இது தள வடிவமைப்பில் அட்டவணைகளை வெற்றிகரமாக பொருத்தவும், அட்டவணை தரவை இன்னும் தெளிவாக வழங்கவும் உங்களை அனுமதிக்கிறது.
செல் பின்னணி நிறம்
ஒரே நேரத்தில் அனைத்து டேபிள் கலங்களின் பின்புல வண்ணமும் பின்புல சொத்தின் மூலம் அமைக்கப்படுகிறது, இது TABLE தேர்விக்கு பயன்படுத்தப்படுகிறது. இந்த வழக்கில், பாணிகளைப் பயன்படுத்துவதற்கான விதிகளை நீங்கள் நினைவில் கொள்ள வேண்டும், குறிப்பாக, உறுப்பு பண்புகளின் பரம்பரை. பின்னணி சொத்து மரபுரிமையாக இல்லாவிட்டாலும், கலங்களுக்கான இயல்புநிலை பின்னணி மதிப்பு வெளிப்படையானது, அதாவது. வெளிப்படைத்தன்மை, எனவே பின்புல நிரப்பு விளைவும் செல்களுக்குப் பெறப்படுகிறது. TABLE உடன் ஒரே நேரத்தில், TD அல்லது TH தேர்வியின் நிறத்தை அமைத்தால், இந்த நிறம் கலத்தின் பின்னணியாக அமைக்கப்படும் (எடுத்துக்காட்டு 2.3).
எடுத்துக்காட்டு 2.3. பின்னணி நிறம்
அட்டவணைகள்
தலைப்பு 1
தலைப்பு 2
செல் 3
செல் 4
இந்த எடுத்துக்காட்டில், கலங்களுக்கு நீல பின்னணி வண்ணத்தைப் பெறுகிறோம் (குறிச்சொல்
) மற்றும் தலைப்பில் சிவப்பு (குறிச்சொல்
) TH தேர்வாளருக்கான பாணி வரையறுக்கப்படவில்லை என்பதே இதற்குக் காரணம், எனவே பெற்றோரின் பின்னணி "காட்டப்பட்டது", இந்த வழக்கில், அட்டவணை தேர்வாளர்.
மற்றும் TD தேர்வாளருக்கான நிறம் வெளிப்படையாகக் குறிப்பிடப்பட்டுள்ளது, எனவே கலங்கள் நீல நிறத்தில் "நிரப்பப்படுகின்றன".
இந்த எடுத்துக்காட்டின் முடிவு படத்தில் காட்டப்பட்டுள்ளது. 2.4
அரிசி. 2.4 பின்னணி நிறத்தை மாற்றுதல்
செல்கள் உள்ளே விளிம்புகள்
விளிம்பு என்பது கலத்தின் உள்ளடக்கத்தின் விளிம்பிற்கும் அதன் எல்லைக்கும் இடையே உள்ள தூரம். பொதுவாக குறிச்சொல்லின் செல்பேடிங் பண்புக்கூறு இந்த நோக்கத்திற்காகப் பயன்படுத்தப்படுகிறது.
. இது கலத்தின் அனைத்து பக்கங்களிலும் உள்ள பிக்சல்களில் விளிம்பு மதிப்பை வரையறுக்கிறது. எடுத்துக்காட்டு 2.4 இல் காட்டப்பட்டுள்ளபடி, திணிப்பு பாணி சொத்தை TD தேர்வியில் சேர்ப்பதன் மூலம் பயன்படுத்த முடியும்.
எடுத்துக்காட்டு 2.4. அட்டவணையில் புலங்கள்
அட்டவணைகள்
தலைப்பு 1
தலைப்பு 2
செல் 3
செல் 4
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
இந்த எடுத்துக்காட்டில், தேர்வாளர்களைக் குழுவாக்குவதன் மூலம், TD மற்றும் TH தேர்வாளர்களுக்கு ஒரே நேரத்தில் புலங்கள் அமைக்கப்படுகின்றன. எடுத்துக்காட்டின் முடிவு படம் காட்டப்பட்டுள்ளது. 2.5
அரிசி. 2.5 செல்களில் புலங்கள்
பேடிங் ஸ்டைல் பண்பு டேபிள் கலங்களுக்குப் பயன்படுத்தப்பட்டால், குறிச்சொல்லின் செல்பேடிங் பண்புக்கூறின் விளைவு
புறக்கணிக்கப்பட்டது.
செல்களுக்கு இடையே உள்ள தூரம்
கலங்களுக்கு இடையிலான தூரத்தை மாற்ற, குறிச்சொல்லின் செல்பேசிங் பண்புக்கூறைப் பயன்படுத்தவும்
. செல்களைச் சுற்றி எல்லைகளைப் பயன்படுத்தும்போது அல்லது பக்கத்தின் பின்னணியில் இருந்து தனித்து நிற்கும் வண்ணத்துடன் கலங்களை நிரப்பும்போது இந்தப் பண்புக்கூறின் விளைவு தெளிவாகத் தெரியும். பாணி சொத்து எல்லை-இடைவெளி செல் இடைவெளிக்கு மாற்றாக செயல்படுகிறது, இது கலங்களின் எல்லைகளுக்கு இடையே உள்ள தூரத்தை அமைக்கிறது. செல் எல்லைகளுக்கு இடையே உள்ள செங்குத்து மற்றும் கிடைமட்ட தூரத்தை ஒரு மதிப்பு அமைக்கிறது. இந்த சொத்து இரண்டு மதிப்புகளைக் கொண்டிருந்தால், முதலாவது கிடைமட்ட தூரத்தை (அதாவது, கலத்தின் இடது மற்றும் வலதுபுறம்) தீர்மானிக்கிறது, இரண்டாவது செங்குத்து தூரத்தை (மேலேயும் கீழேயும்) தீர்மானிக்கிறது.
எடுத்துக்காட்டு 2.5. செல் எல்லைகளுக்கு இடையே உள்ள தூரம்
XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
செல் இடைவெளியை மாற்றுகிறது
லியோனார்டோ
5
8
ரபேல்
4
11
மைக்கேலேஞ்சலோ
24
9
டொனாடெல்லோ
2
13
இந்த எடுத்துக்காட்டின் முடிவு படத்தில் காட்டப்பட்டுள்ளது. 2.6
அரிசி. 2.6 எல்லை-இடைவெளியைப் பயன்படுத்தும் போது அட்டவணைக் காட்சி
உலாவி இன்டர்நெட் எக்ஸ்புளோரர்பதிப்பு 7 வரை மற்றும் உட்பட பதிப்புகள் எல்லை-இடைவெளி பண்புகளை ஆதரிக்காது, எனவே இந்த உலாவியில் இயல்புநிலை செல்ஸ்பேசிங் மதிப்பு (பொதுவாக 2px) அட்டவணைகளுக்குப் பயன்படுத்தப்படும்.
ஒரு டேபிள் தேர்வியில் சரிவு மதிப்புடன் பார்டர்-சிதைவு பண்பைச் சேர்க்கும்போது, செல்ஸ்பேசிங் பண்புக்கூறு புறக்கணிக்கப்பட்டு, பார்டர்-ஸ்பேசிங் மதிப்பு பூஜ்ஜியத்திற்கு மீட்டமைக்கப்படும்.
எல்லைகள் மற்றும் சட்டங்கள்
முன்னிருப்பாக, அட்டவணையில் ஆரம்பத்தில் எல்லை இல்லை, மேலும் குறிச்சொல்லின் எல்லைப் பண்புக்கூறைப் பயன்படுத்தி அதன் கூட்டல் நிகழ்கிறது.
. உலாவிகள் அத்தகைய எல்லையை வித்தியாசமாகக் காட்டுகின்றன, எனவே இந்தப் பண்புக்கூறை குறிப்பிடாமல் இருப்பது நல்லது, மேலும் எல்லைகளை வரைவதை பாணிகளுக்கு விடவும். பாணிகளுடன் நேரடியாக தொடர்புடைய இரண்டு முறைகளைப் பார்ப்போம்.
அட்டவணை செல்களுக்கு இடையே உள்ள தூரத்தை அமைக்கிறது. அட்டவணை மற்றும் கலங்களுக்கு வெவ்வேறு பின்னணி வண்ணங்களைப் பயன்படுத்தினால், கலங்களுக்கு இடையில் கோடுகளின் கட்டம் தோன்றும், அதன் நிறம் அட்டவணையின் நிறத்துடன் பொருந்துகிறது, மேலும் தடிமன் பிக்சல்களில் உள்ள செல்பேசிங் பண்புக்கூறின் மதிப்புக்கு சமமாக இருக்கும். மேலே உள்ள எடுத்துக்காட்டு 2.3 இந்த விளைவைக் காட்டுகிறது, எனவே நான் அதை மீண்டும் செய்ய மாட்டேன்.
எல்லைகளை உருவாக்க இது மிகவும் வசதியான வழி அல்ல என்பதை நினைவில் கொள்க, ஏனெனில் இது வரையறுக்கப்பட்ட நோக்கத்தைக் கொண்டுள்ளது. இந்த வழியில் நீங்கள் ஒற்றை வண்ண கட்டத்தை மட்டுமே பெற முடியும், சரியான இடங்களில் செங்குத்து அல்லது கிடைமட்ட கோடுகள் அல்ல.
எல்லை சொத்துகளைப் பயன்படுத்துதல்
எல்லை பாணி சொத்து ஒரே நேரத்தில் ஒரு உறுப்பைச் சுற்றி எல்லை நிறம், நடை மற்றும் தடிமன் ஆகியவற்றை அமைக்கிறது. நீங்கள் வெவ்வேறு பக்கங்களில் தனித்தனி வரிகளை உருவாக்க வேண்டியிருக்கும் போது, வழித்தோன்றல்களைப் பயன்படுத்துவது நல்லது - எல்லை-இடது, எல்லை-வலது, எல்லை-மேல் மற்றும் எல்லை-கீழ் , இந்த பண்புகள் முறையே இடது, வலது, மேல் மற்றும் கீழ் எல்லையை வரையறுக்கின்றன. .
ஒரு டேபிள் தேர்விக்கு பார்டர் சொத்தை பயன்படுத்துவதன் மூலம், ஒட்டுமொத்த டேபிளைச் சுற்றி ஒரு பார்டரைச் சேர்க்கிறோம், மேலும் TD அல்லது TH தேர்வியில் கலங்களைச் சுற்றி ஒரு பார்டரைச் சேர்க்கிறோம் (எடுத்துக்காட்டு 2.6).
எடுத்துக்காட்டு 2.6. இரட்டை சட்டகத்தைச் சேர்த்தல்
எடுத்துக்காட்டு 2.4. அட்டவணையில் புலங்கள்
அட்டவணைகள்
தலைப்பு 1
தலைப்பு 2
செல் 3
செல் 4
இந்த எடுத்துக்காட்டு அட்டவணையைச் சுற்றி ஒரு கருப்பு இரட்டைக் கரையையும் ஒவ்வொரு கலத்தைச் சுற்றி ஒரு திடமான வெள்ளைக் கரையையும் பயன்படுத்துகிறது. எடுத்துக்காட்டின் முடிவு படம் காட்டப்பட்டுள்ளது. 2.7
அரிசி. 2.7 அட்டவணை மற்றும் கலங்களைச் சுற்றி பார்டர்
செல்கள் சேரும் இடத்தில் இரட்டைக் கோடுகள் உருவாகின்றன என்பதை நினைவில் கொள்ளவும். குறிச்சொல்லின் செல்பேசிங் பண்புக்கூறின் செயல்பாட்டின் காரணமாக அவை மீண்டும் பெறப்படுகின்றன
. எடுத்துக்காட்டுக் குறியீட்டில் இந்தப் பண்புக்கூறு எங்கும் தோன்றவில்லை என்றாலும், உலாவி அதை இயல்பாகப் பயன்படுத்துகிறது. நீங்கள் அமைத்தால்
, பின்னர் நாம் இரட்டை இல்லை, ஆனால் ஒற்றை கோடுகள், ஆனால் இரட்டை தடிமன். இந்த அம்சத்தை மாற்ற, டேபிள் தேர்வியில் (எடுத்துக்காட்டு 2.7) சேர்க்கப்படும் மதிப்பு சரிவு , எல்லை சரிவு பாணி பண்புகளைப் பயன்படுத்தவும்.
எடுத்துக்காட்டு 2.7. ஒற்றை சட்டகத்தை உருவாக்குதல்
எடுத்துக்காட்டு 2.4. அட்டவணையில் புலங்கள்
அட்டவணைகள்
தலைப்பு 1
தலைப்பு 2
செல் 3
செல் 4
இந்த உதாரணம் செல்களுக்கு இடையே ஒரு திடமான பச்சைக் கோட்டையும் மேஜையைச் சுற்றி ஒரு கருப்புக் கோட்டையும் உருவாக்குகிறது. அட்டவணையில் உள்ள அனைத்து எல்லைகளும் ஒரே தடிமன் கொண்டவை. எடுத்துக்காட்டின் முடிவு படம் காட்டப்பட்டுள்ளது. 2.8
அரிசி. 2.8 மேஜையைச் சுற்றி பார்டர்
செல் உள்ளடக்கங்களை சீரமைத்தல்
இயல்பாக, அட்டவணை கலத்தில் உள்ள உரை இடதுபுறமாக சீரமைக்கப்படும். இந்த விதிக்கு விதிவிலக்கு குறிச்சொல்
, இது மையமாக இருக்கும் ஒரு தலைப்பை வரையறுக்கிறது. சீரமைப்பு முறையை மாற்ற, உரை-சீரமைப்பு பாணி பண்புகளைப் பயன்படுத்தவும் (எடுத்துக்காட்டு 2.8).
எடுத்துக்காட்டு 2.8. செல் உள்ளடக்கங்களை கிடைமட்டமாக சீரமைக்கவும்
எடுத்துக்காட்டு 2.4. அட்டவணையில் புலங்கள்
அட்டவணைகள்
தலைப்பு 1
செல் 1
செல் 2
தலைப்பு 2
செல் 3
செல் 4
இந்த எடுத்துக்காட்டில், குறிச்சொல்லின் உள்ளடக்கம்
இடதுபுறம் சீரமைக்கப்பட்டது, மற்றும் குறிச்சொல்லின் உள்ளடக்கம்
- மையத்தில். எடுத்துக்காட்டின் முடிவு கீழே காட்டப்பட்டுள்ளது (படம் 2.9).
அரிசி. 2.9 கலங்களில் உரையை சீரமைத்தல்
ஒரு கலத்தில் செங்குத்து சீரமைப்பு வேறுவிதமாகக் குறிப்பிடப்படாவிட்டால் எப்போதும் மையமாக இருக்கும். இது எப்போதும் வசதியானது அல்ல, குறிப்பாக செல் உள்ளடக்கங்கள் உயரத்தில் மாறுபடும் அட்டவணைகளுக்கு. இந்த வழக்கில், எடுத்துக்காட்டு 2.9 இல் காட்டப்பட்டுள்ளபடி, செங்குத்து-சீரமைப்பு பண்புகளைப் பயன்படுத்தி கலத்தின் மேல் விளிம்பில் சீரமைப்பு அமைக்கப்படுகிறது.
எடுத்துக்காட்டு 2.9. செல் உள்ளடக்கங்களை செங்குத்தாக சீரமைக்கவும்
எடுத்துக்காட்டு 2.4. அட்டவணையில் புலங்கள்
அட்டவணைகள்
தலைப்பு 1
தலைப்பு 2
செல் 1
செல் 2
இந்த உதாரணம் தலைப்பின் உயரத்தை அமைக்கிறது
40 பிக்சல்கள் மற்றும் உரை கீழ் விளிம்பில் சீரமைக்கப்பட்டது. எடுத்துக்காட்டின் முடிவு படம் காட்டப்பட்டுள்ளது. 2.10
அரிசி. 2.10 கலங்களில் உரையை சீரமைத்தல்
வெற்று செல்கள்
உலாவிகள் ஒரு கலத்தை வித்தியாசமாக காண்பிக்கும். இந்த வழக்கில் "ஒன்றுமில்லை" என்பது கலத்திற்குள் ஒரு படமோ உரையோ சேர்க்கப்படவில்லை, மேலும் இடம் கணக்கில் எடுத்துக்கொள்ளப்படவில்லை. இயற்கையாகவே, செல்களை சுற்றி ஒரு பார்டர் அமைக்கப்பட்டால் மட்டுமே அவற்றின் தோற்றம் வேறுபடும். கண்ணுக்குத் தெரியாத எல்லையைப் பயன்படுத்தும் போது, செல்களின் தோற்றம், அவற்றில் ஏதேனும் இருக்கிறதா இல்லையா என்பதைப் பொருட்படுத்தாமல், ஒரே மாதிரியாக இருக்கும்.
பழைய உலாவிகள் வெற்றுக் காட்சி கலங்களின் பின்னணி நிறத்தைக் காட்டவில்லை
, எனவே உள்ளடக்கம் இல்லாமல் ஒரு கலத்தை விட்டுவிட்டு பின்னணி நிறத்தைக் காட்ட வேண்டிய அவசியம் ஏற்பட்டால், கலத்தின் உள்ளே பிரிக்கப்படாத இடம் () சேர்க்கப்பட்டது. இடம் எப்போதும் பொருத்தமானது அல்ல, குறிப்பாக செல் உயரத்தை 1-2 பிக்சல்களாக அமைக்க வேண்டும், அதனால்தான் ஒரு பிக்சல் வெளிப்படையான வடிவமைப்பு பரவலாகிவிட்டது. உண்மையில், அத்தகைய படத்தை உங்கள் விருப்பப்படி அளவிட முடியும், ஆனால் அது எந்த வகையிலும் வலைப்பக்கத்தில் காட்டப்படாது.
அதிர்ஷ்டவசமாக, ஒற்றை பிக்சல் வரைபடங்கள் மற்றும் அவற்றை அடிப்படையாகக் கொண்ட அனைத்து வகையான ஸ்பேசர்களின் சகாப்தம் கடந்துவிட்டது. செல் உள்ளடக்கங்கள் இல்லாமல் கூட அட்டவணைகளுடன் உலாவிகள் சரியாக வேலை செய்கின்றன.
வெற்று கலங்களின் தோற்றத்தைக் கட்டுப்படுத்த, வெற்று செல்கள் பண்புகளைப் பயன்படுத்தவும், மறைப்பதற்கு அமைக்கப்படும் போது, எல்லை மற்றும் பின்னணி வெற்று கலங்களில் காட்டப்படாது. ஒரு வரிசையில் உள்ள அனைத்து கலங்களும் காலியாக இருந்தால், முழு வரிசையும் மறைக்கப்படும். பின்வரும் சந்தர்ப்பங்களில் செல் காலியாகக் கருதப்படுகிறது:
சின்னங்கள் எதுவும் இல்லை;
கலத்தில் ஒரு புதிய வரி, தாவல் அல்லது இடம் மட்டுமே உள்ளது;
பார்வை மறைந்ததாக அமைக்கப்பட்டுள்ளது.
உடைக்காத இடத்தைச் சேர்ப்பது புலப்படும் உள்ளடக்கமாகக் கருதப்படுகிறது, அதாவது. செல் இனி காலியாக இருக்காது (எடுத்துக்காட்டு 2.10).
எடுத்துக்காட்டு 2.10. வெற்று செல்கள்
எடுத்துக்காட்டு 2.4. அட்டவணையில் புலங்கள்
வெற்று செல்களைப் பயன்படுத்துதல்
லியோனார்டோ
5
8
ரபேல்
11
மைக்கேலேஞ்சலோ
24
டொனாடெல்லோ
13
அட்டவணை பார்வை சஃபாரி உலாவிபடம் காட்டப்பட்டுள்ளது. 2.11அ. IE7 உலாவியில் உள்ள அதே அட்டவணை படம். 2.11b
ஏ. Safari, Firefox, Opera, IE8, IE9 உலாவியில்
பி. IE7 உலாவியில்
அரிசி. 2.11 வெற்று செல்கள் கொண்ட அட்டவணையின் காட்சி
உள்ள எல்லைகள் என்பதை கவனத்தில் கொள்ள வேண்டும் வெவ்வேறு உலாவிகள்சற்று வித்தியாசமாக காட்டப்படுகின்றன.
