HTML அட்டவணைகள்வரிசைகள் அல்லது நெடுவரிசைகளைப் பயன்படுத்தி தரவை ஒழுங்கமைத்து காண்பிக்கவும். வரிசைகள் மற்றும் நெடுவரிசைகளின் குறுக்குவெட்டு மூலம் உருவாக்கப்பட்ட கலங்களால் அட்டவணைகள் உருவாக்கப்படுகின்றன. அட்டவணை செல்கள்தலைப்புகள், பட்டியல்கள், உரை, படங்கள், படிவ கூறுகள் மற்றும் பிற அட்டவணைகள் போன்ற எந்த HTML கூறுகளையும் கொண்டிருக்கலாம். ஒவ்வொரு அட்டவணையுடன் தொடர்புடைய தலைப்பை நீங்கள் சேர்க்கலாம், அதை அட்டவணைக்கு முன் அல்லது பின் வைக்கலாம்.
வலைப்பக்கங்களின் தளவமைப்பு மற்றும் தனிப்பட்ட உறுப்புகளின் தளவமைப்புக்கு அட்டவணைகள் இனி பயன்படுத்தப்படாது, ஏனெனில் இந்த நுட்பம் தளத்தின் கட்டமைப்பு நெகிழ்வுத்தன்மை மற்றும் இணக்கத்தன்மையை வழங்காது, HTML மார்க்அப்பை கணிசமாக அதிகரிக்கிறது.
அனைத்து அட்டவணை உறுப்புகளுக்கும், அவற்றின் சொந்த பண்புக்கூறுகளும் உள்ளன.
HTML இல் அட்டவணைகளை உருவாக்குதல்
- உள்ளடக்கம்:
1. ஒரு அட்டவணையை எவ்வாறு உருவாக்குவது
இணைக்கப்பட்ட குறிச்சொல்லைப் பயன்படுத்தி அட்டவணை உருவாக்கப்பட்டது
வரைபடம். 1. CSS பண்புகளுடன் வடிவமைக்காமல் அட்டவணையின் தோற்றம்இயல்பாக, அட்டவணை மற்றும் கலங்களுக்கு புலப்படும் எல்லைகள் இல்லை. எல்லைகள்எல்லைச் சொத்தைப் பயன்படுத்தி அமைக்கப்பட்டுள்ளன:
/* அட்டவணையின் வெளிப்புற எல்லைகள் சாம்பல், 1px தடிமன் */ அட்டவணை (எல்லை: 1px திட சாம்பல்;) /* அட்டவணையின் முதல் வரிசையின் கலங்களின் எல்லைகள் */ வது (எல்லை: 1px திட சாம்பல்;) /* எல்லைகள் டேபிள் பாடியின் செல்கள் */ td (எல்லை: 1px திட சாம்பல்;)
அட்டவணை செல்கள் இடையே இடைவெளிகள்அட்டவணைப் பண்புகளைப் பயன்படுத்தி அகற்றப்படுகின்றன (எல்லை-சரிவு: சரிவு;) .
அகலம்அட்டவணை அதன் உள் உள்ளடக்கத்தின் அகலத்திற்கு இயல்புநிலையாகும். அகலத்தை அமைக்க, நீங்கள் அகல பண்புகளை அமைக்க வேண்டும்:
/* அட்டவணையின் அகலத்தை அது அமைந்துள்ள கொள்கலன் தொகுதியின் அகலத்திற்கு சமமாக மாற்றும் */ அட்டவணை (அகலம்: 100%;) /* அட்டவணை */ அட்டவணைக்கு நிலையான அகலத்தை அமைக்கும் (அகலம்: 600px; )
டேபிள் கலங்களில் பேடிங் மற்றும் பார்டர்கள் குறிப்பிடப்பட்டிருந்தால், அட்டவணையின் அகலத்தில் பின்வரும் மதிப்புகள் இருக்கும்:
padding-left மற்றும் padding-right , எல்லையின் அகலம்-இடது மற்றும் வரிசையின் கடைசி கலத்தின் எல்லை-வலது அகலம். கலங்களின் அகலம் மற்றும் எல்லைகள் குறிப்பிடப்பட்டால், அட்டவணையின் அகலமானது, கலங்களின் அகலத்தின் கூட்டுத்தொகையாகவும், வரிசையிலுள்ள கடைசி கலத்தின் எல்லை-இடது அகலம் மற்றும் எல்லை-வலது அகலமாகவும் இருக்கும்.
2. அட்டவணை வரிசைகளை எவ்வாறு உருவாக்குவது
டேபிள் வரிசைகள் அல்லது வரிசைகள் குறிச்சொல்லைப் பயன்படுத்தி உருவாக்கப்படுகின்றன
3. அட்டவணை நெடுவரிசை தலைப்புக் கலத்தை எவ்வாறு உருவாக்குவது
4. டேபிள் பாடி செல் தயாரிப்பது எப்படி
5. ஒரு அட்டவணையில் ஒரு தலைப்பை (தலைப்பு) எவ்வாறு சேர்ப்பது
அட்டவணை கையொப்பத்தை உருவாக்குகிறது. குறிச்சொல்லுக்குப் பிறகு நேரடியாகச் சேர்க்கப்பட்டது
6. அட்டவணை வரிசைகள் மற்றும் நெடுவரிசைகளை தொகுத்தல்
தர்க்கரீதியாக ஒரே மாதிரியான கலங்களை முன்னிலைப்படுத்தி, நெடுவரிசைகளின் கட்டமைப்புக் குழுவை உருவாக்குகிறது. ஒரே மாதிரியான வடிவமைப்பிற்காக ஒன்று அல்லது அதற்கு மேற்பட்ட நெடுவரிசைகளைக் குழுவாக்குகிறது, ஒவ்வொரு கலத்திற்கும் ஒவ்வொரு வரிசைக்கும் பாணிகளை மீண்டும் செய்வதை விட நெடுவரிசைகளுக்கு பாணிகளைப் பயன்படுத்த உங்களை அனுமதிக்கிறது. குறிச்சொற்களுக்குப் பிறகு நேரடியாகச் சேர்க்கப்பட்டது அரிசி. 2. குறிச்சொற்களைப் பயன்படுத்தி அட்டவணை நெடுவரிசைகளை வேறு நிறத்தில் தனிப்படுத்துதல் மற்றும்
7. அட்டவணை பிரிவுகளை தொகுத்தல்
உறுப்பு ஒரு சீரான தோற்றத்தை வழங்க அட்டவணை வரிசைகளுக்கான தலைப்புகளின் குழுவை உருவாக்குகிறது. உறுப்புகளுடன் இணைந்து பயன்படுத்தப்படுகிறது
உறுப்பு பின்வரும் வரிசையில் பயன்படுத்தப்பட வேண்டும்: ஒரு குழந்தை உறுப்பு
பண்பு | விளக்கம், ஏற்றுக்கொள்ளப்பட்ட மதிப்பு | |||
---|---|---|---|---|
கோல்ஸ்பான் | கிடைமட்டமாக ஒன்றிணைக்க ஒரு வரிசையில் உள்ள கலங்களின் எண்ணிக்கை. | |
||
தலைப்புகள் | தற்போதைய தரவுக் கலத்திற்கான தலைப்புத் தகவலைக் கொண்ட தலைப்புக் கலங்களின் பட்டியலைக் குறிப்பிடுகிறது. பேச்சு உலாவிகளுக்காக வடிவமைக்கப்பட்டுள்ளது. | ... | ... | |
ரோஸ்பான் | நெடுவரிசையில் செங்குத்தாக ஒன்றிணைக்க வேண்டிய கலங்களின் எண்ணிக்கை. | சாத்தியமான மதிப்புகள்: 1 முதல் 999 வரையிலான எண். |
||
இடைவெளி | ஒரு ஒற்றை பாணியை வரையறுக்க இணைந்த நெடுவரிசைகளின் இயல்புநிலை எண்ணிக்கை 1 ஆகும். ஏற்றுக்கொள்ளப்பட்ட மதிப்புகள்: ஏதேனும் நேர்மறை முழு எண். |
10. அட்டவணையை உருவாக்குவதற்கான எடுத்துக்காட்டு
அரிசி. 4. HTML அட்டவணையைப் பயன்படுத்தி உணவக மெனுவை உருவாக்கவும்
சமையலறை | குளிர் உணவுகள் | சூடான உணவுகள் | இனிப்பு | ||
---|---|---|---|---|---|
சாலடுகள் | சிற்றுண்டி | முதல் உணவு | இரண்டாவது படிப்புகள் | ||
ரஷ்யன் | வினிகிரெட் | குதிரைவாலி கொண்ட நாக்கு | சார்க்ராட் உடன் ஷிச்சி | உருளைக்கிழங்கு பாலாடை | தேனுடன் வேகவைத்த ஆப்பிள்கள் |
ஒலிவி | மாட்டிறைச்சி ஜெல்லி | வீட்டில் தயாரிக்கப்பட்ட ரசோல்னிக் | புளிப்பு கிரீம் சுடப்படும் Crucian கெண்டை | பான்கேக் பை | |
"ஃபர் கோட்" கீழ் ஹெர்ரிங் | ஜெல்லிட் பைக் பெர்ச் | இறைச்சி hodgepodge | கட்லெட்டுகள் "போஜார்ஸ்கி" | கேக் "உருளைக்கிழங்கு" | |
ஸ்பானிஷ் | ஸ்காலப் செவிச் | எம்பனதாஸ் | பூண்டுடன் ரொட்டி சூப் | கடல் உணவுகளுடன் Paella | Churros |
வெண்ணெய் மற்றும் டுனா டிம்பல் | அஹோடோமேட் | அஸ்துரியன் ஃபபாடா | பன்றி இறைச்சி ரக்ஸோ | அல்மோய்க்சவேனா | |
ஹாம் கொண்ட பீன்ஸ் | சான்ஃபைனா | ரவை பாலாடை கொண்ட மீன் சூப் | உருளைக்கிழங்கு டார்ட்டில்லா | புனுவேலோஸ் | |
பிரெஞ்சு | Vosges சாலட் | சிக்கன் ரில்லெட் | கத்திரிக்காய் கிரீம் சூப் "ரெனோயர்" | உருளைக்கிழங்கு ஓக்ரேடன் | பிரியோச்சி |
பன்சனெல்லா சாலட் | சீஸ் சுவையானது | பிரஞ்சு பூசணி சூப் | கோழி கிராடின் | லிகுரியன் எலுமிச்சை பை | |
டார்டாரஸ் | Marinated சால்மன் | சூப் "கான்டி" | டார்டிஃப்லெட் | சவரின் "வெற்றி" |
3.8 அட்டவணை கலங்களை ஒன்றிணைத்தல்
நடைமுறையில், ஒரு செல் உயரம் மற்றும் அகலத்தில் பல செல்களை இணைக்கும் ஒரு பெரிய எண்ணிக்கையிலான அட்டவணைகள் உள்ளன (படம் 3.2 ஐப் பார்க்கவும்). HTML இல், colspan மற்றும் rowspan பண்புகளைப் பயன்படுத்தி செல்கள் இணைக்கப்படுகின்றன. கோல்ஸ்பான் பண்புக்கூறு, கொடுக்கப்பட்ட செல் கிடைமட்டமாக பரவியிருக்கும் கலங்களின் எண்ணிக்கையைக் குறிப்பிடுகிறது, மேலும் ரோஸ்பான் பண்புக்கூறு அது செங்குத்தாக பரவியிருக்கும் கலங்களின் எண்ணிக்கையைக் குறிப்பிடுகிறது.
படத்தில். படம் 3.12 இணைக்கப்பட்ட கலங்களைக் கொண்ட அட்டவணையைக் காட்டுகிறது. அட்டவணையின் தலைப்பு, வரிசையில் உள்ள மூன்று கலங்களையும் இணைக்கும் கலத்தில் உள்ளது. அட்டவணையில் மேலும் இரண்டு செல்கள் உள்ளன, அவை ஒவ்வொன்றும் இரண்டு கலங்களை செங்குத்தாக இணைக்கின்றன. அத்தகைய அட்டவணைக்கான குறியீடு பட்டியல் 3.7 இல் காட்டப்பட்டுள்ளது.
அரிசி. 3.12.இணைக்கப்பட்ட கலங்கள் கொண்ட அட்டவணை
பட்டியல் 3.7.செல் மெர்ஜ் பண்புகளைப் பயன்படுத்துவதற்கான எடுத்துக்காட்டு
ஒரு செல் ஒரு வரிசையில் உள்ள அனைத்து செல்களையும் இணைக்கிறது | ||
---|---|---|
இரண்டு வரி செல் | செல் 2x2 | செல் 2x3 |
செல் 3x2 | செல் 3x3 | |
இரண்டு வரி செல் | செல் 4x2 | செல் 4x3 |
செல் 5x2 | செல் 5x3 |