HTML TABLE உறுப்பு பண்புக்கூறுகளைப் பயன்படுத்துதல்

அட்டவணை பண்புகளை கற்றல் மூலம் HTML அட்டவணைகள் மிக பெறுவது

HTML அட்டவணை பண்புகளை நீங்கள் HTML அட்டவணைகள் மீது நிறைய கட்டுப்பாடு கொடுக்க. இன்னும் சுவாரஸ்யமான மற்றும் உங்கள் பக்கம் தோற்றத்தை மாற்ற அட்டவணைகள் கிடைக்கும் நிறைய உள்ளன.

HTML TABLE உறுப்பு பண்புக்கூறுகள்

HTML5 இல் உறுப்பு உலகளாவிய பண்புக்கூறுகளையும் ஒரு பிற பண்புகளையும் பயன்படுத்துகிறது:. அது 1 அல்லது வெற்று மதிப்பு (அதாவது border = "") மட்டுமே மாறிவிட்டது. நீங்கள் எல்லை அகலத்தை மாற்ற விரும்பினால், நீங்கள் எல்லை அகல CSS சொத்து பயன்படுத்த வேண்டும்.

செல்லுபடியாகும் HTML5 அட்டவணை பண்புகளைப் பற்றி அறிய கீழே காண்க.

HTML5 இல் வழக்கற்றதாக மாறிய HTML 4.01 விவரக்குறிப்பின் பகுதியாக பல பண்புக்கூறுகளும் உள்ளன:

மற்றும் HTML 4.01 இல் நீக்கப்பட்ட ஒரு பண்பு மற்றும் HTML5 இல் வழக்கற்று உள்ளது.

HTML 4.01 TABLE பண்புக்கூறுகளைப் பற்றி மேலும் அறிக.

எந்த HTML குறிப்பின் பகுதியாக இல்லாத பல பண்புக்கூறுகளும் உள்ளன.

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

உலாவி குறிப்பிட்ட TABLE பண்புக்கூறுகளைப் பற்றி மேலும் அறிக.

HTML5 TABLE உறுப்பு பண்புக்கூறுகள்

மேலே குறிப்பிட்டுள்ளபடி, உலக பண்புகளை தாண்டி ஒரே பண்பு, ஒரு HTML5 TABLE உறுப்பு: எல்லை.

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

எல்லை பண்புக்கூறு சேர்க்க, ஒரு எல்லை மற்றும் காலியானால் (அல்லது கற்பிதத்தை விட்டு வெளியேறினால்) இருந்தால் மதிப்பு 1 ஆக அமைக்கப்படும். பெரும்பாலான உலாவிகள் எந்த எல்லையிலும் 0, மற்றும் வேறு எந்த முழு மதிப்பு (2, 3, 30, 500, போன்றவை) பிக்சல்களின் எல்லை அகலத்தை அறிவிக்கும், ஆனால் இது HTML5 இல் வழக்கற்று உள்ளது. அதற்கு பதிலாக, நீங்கள் எல்லை விளிம்பு மற்றும் பிற பாணியை வரையறுக்க CSS எல்லை பாணி பண்புகளை பயன்படுத்த வேண்டும்.

ஒரு அட்டவணையை ஒரு எல்லைடன் உருவாக்க, எழுது:

border = "1" >

இது ஒரு எல்லைடன் ஒரு அட்டவணை

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

HTML5 இல் (மற்றும் HTML 4.01) செல்லுபடியாகும் உறுப்பு பண்புகளை நாம் விவரிக்கிறோம். இது HTML 4.01 இல் செல்லுபடியான TABLE பண்புக்கூறுகளை விவரிக்கிறது, ஆனால் HTML5 இல் வழக்கற்று உள்ளது. நீங்கள் இன்னும் HTML 4.01 ஆவணங்களை எழுதுகிறீர்கள் என்றால், இந்த பண்புகளை நீங்கள் பயன்படுத்தலாம், ஆனால் அவர்களில் பெரும்பாலோர் உங்கள் பக்கங்களை HTML5 க்கு நகர்த்தும்போது எதிர்காலத்தை உறுதிப்படுத்தக்கூடிய மாற்றுகளை கொண்டுள்ளனர்.

செல்லுபடியான HTML 4.01 பண்புக்கூறுகள்

நாங்கள் மேலே விவரிக்கப்பட்ட பண்பு.

HTML5 இல் இருந்து HTML 4.01 இல் உள்ள ஒரே வித்தியாசம் பிக்சல்களின் எல்லை அகலத்தை வரையறுக்க எந்த முழு முழுமையையும் (0, 1, 2, 15, 20, 200, முதலியவை) குறிப்பிடலாம்.

ஒரு 5px எல்லைடன் அட்டவணை உருவாக்க, எழுது:

border = "5" >

இந்த அட்டவணையில் 5px எல்லை உள்ளது.

எல்லைகளைக் கொண்ட இரண்டு அட்டவணைகள் ஒரு உதாரணம் பார்க்கலாம்.

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

20 க்கு செல் திணிப்பு அமைக்க, எழுது:

cellpadding = "20" >


இந்த அட்டவணையில் 20 செல்பேட் உள்ளது.

செல் எல்லைகளை 20 பிக்சல்கள் மூலம் பிரிக்கும்.

செல்பேடிங் மூலம் அட்டவணைக்கு ஒரு உதாரணம் காண்க

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

செல் இடைவெளியை ஒரு அட்டவணையில் சேர்க்க, எழுது:

cellspacing = "20" >


இந்த அட்டவணையில் 20 செல்பேசி உள்ளது.

செல்கள் 20 பிக்சல்கள் மூலம் பிரிக்கப்படும்.

செல் ஸ்பேஸ் ஒரு அட்டவணை பார்க்க

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

இடது பக்க எல்லையுடன் ஒரு அட்டவணைக்கு HTML இங்கே உள்ளது:

frame = "lhs" >


இந்த அட்டவணை
இருக்கும்

மட்டும்
இடது பக்கம் ஆனது.

கீழே உள்ள சட்டத்துடன் மற்றொரு எடுத்துக்காட்டு:

frame = "below" >

இந்த அட்டவணையில் கீழே உள்ள சட்டகம் உள்ளது.

பிரேம்கள் சில அட்டவணைகள் பாருங்கள்

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

வரிசைகளுக்கு இடையேயான வரிகளை ஒரு அட்டவணையை உருவாக்க, எழுது:

விதிகள் = "வரிசைகள்" >


இந்த 4x4 அட்டவணை உள்ளது
வரிசைகள் நெடுவரிசைகளல்ல

உடன் கோடிட்டுக் காட்டப்பட்டுள்ளது
விதிகள் கற்பிதம்.

மற்றும் நெடுவரிசைகளுக்கு இடையே உள்ள மற்றொரு கோடு:

rules = "cols" >


இது
ஒரு அட்டவணை
இங்கு

பத்திகள்
உள்ளன
தனிப்படுத்தப்பட்ட

இங்கே விதிகள் ஒரு அட்டவணை ஒரு உதாரணம் ஆகும்

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

சுருக்கமாக ஒரு எளிய அட்டவணையை எழுதுவது எப்படி:

summary = "இது நிரப்பல் தகவலைக் கொண்ட ஒரு மாதிரி அட்டவணை ஆகும். இந்த அட்டவணையின் நோக்கம் சுருக்கத்தை நிரூபிக்க வேண்டும்." >


நெடுவரிசை 1 வரிசை 1
நெடுவரிசை 2 வரிசை 1

நெடுவரிசை 1 வரிசை 2
நெடுவரிசை 2 வரிசை 2

ஒரு சுருக்கத்தை ஒரு அட்டவணை காண்க

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

பிக்சல்களில் ஒரு குறிப்பிட்ட அகலத்துடன் அட்டவணை உருவாக்க, எழுதவும்:

width = "300" >

இந்த அட்டவணையில் அது உள்ள கொள்கலன் அகலத்தின் 80% ஆகும்.

மற்றும் பெற்றோர் உறுப்பு ஒரு சதவீதம் என்று ஒரு அகலம் ஒரு அட்டவணை உருவாக்க, எழுத:

width = "80%" >

இந்த அட்டவணையில் அது உள்ள கொள்கலன் அகலத்தின் 80% ஆகும்.

ஒரு அட்டவணையை ஒரு அகலத்துடன் பார்க்கலாம்

விலக்கப்பட்ட HTML 4.01 TABLE பண்புக்கூறு

HTML 4.01 இல் நீக்கப்பட்டது மற்றும் HTML5 இல் வழக்கொழிந்திருக்கும் TABLE உறுப்பு ஒரு பண்பு உள்ளது: align . இந்த கற்பிதம், அதற்கு இடையில் உள்ள உரைக்கு தொடர்புடைய பக்கத்தில் உள்ள அட்டவணையை எங்கே அமைக்க வேண்டும் என்பதை அமைக்கலாம். இந்த பண்பு HTML 4.01 இல் நீக்கப்பட்டது, நீங்கள் அதைப் பயன்படுத்துவதை தவிர்க்க வேண்டும். அதற்கு பதிலாக, நீங்கள் CSS சொத்து அல்லது விளிம்பு இடது பயன்படுத்த வேண்டும்: கார்; மற்றும் விளிம்பு வலது: கார்; பாணியை. மிதவை சொத்து நீங்கள் கொடுக்கும் align பண்பு என்ன நெருக்கமான என்று ஒரு முடிவு கொடுக்கிறது, ஆனால் அது பக்கம் உள்ளடக்கங்களை மற்ற காட்சி பாதிக்கும். விளிம்பு-வலது: கார்; மற்றும் விளிம்பு இடது: கார்; W3C ஒரு மாற்று என்று பரிந்துரை என்ன.

Align attribute ஐப் பயன்படுத்தி ஒரு நீக்கப்பட்ட எடுத்துக்காட்டை இங்கே காணலாம்:

align = "right" >


இந்த அட்டவணை வலது சீரமைக்கப்பட்டது

உரை அதை இடதுபுறமாக நகரும்

Align attribute பயன்படுத்தி ஒரு நீக்கப்பட்ட உதாரணம் பார்க்கலாம்.

மற்றும் சரியான (அல்லாத நீக்கப்பட்டது) HTML அதே விளைவு பெற, எழுத:

style = "float: right;" >


இந்த அட்டவணை வலது சீரமைக்கப்பட்டது

உரை அதை இடதுபுறமாக நகரும்

பின்வரும் எந்த HTML குறிப்பின் பகுதியல்லாத TABLE பண்புக்கூறுகள் பின்வருமாறு விளக்குகின்றன.

முந்தைய தகவல் HTML 4.01 இல் செல்லுபடியான HTML உறுப்பு பண்புகளை விவரிக்கிறது ஆனால் HTML5 இல் வழக்கற்று உள்ளது.

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

உங்கள் HTML அட்டவணையில் இந்த பண்புகளை பயன்படுத்துவதை நாங்கள் பரிந்துரைக்கவில்லை .

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

இந்த பண்புக்கு சிறந்த மாற்று பாணி சொத்து.

ஒரு அட்டவணை பின்புல நிறத்தை மாற்ற, எழுது:

style = "background-color: #ccc;" >

இந்த அட்டவணையில் சாம்பல் பின்னணி உள்ளது

Bgcolor பண்புக்கூறு போலவே, எல்லை வண்ண பண்புக்கூறு கற்பிதத்தின் நிறத்தை மாற்ற உதவுகிறது. இந்த பண்புக்கு Internet Explorer மட்டுமே ஆதரிக்கப்படுகிறது. அதற்கு பதிலாக, நீங்கள் எல்லை-வண்ண பாணி சொத்து பயன்படுத்த வேண்டும்.

உங்கள் அட்டவணையின் எல்லை வண்ணத்தை மாற்ற, எழுது:

style = "border-color: red;" >

இந்த அட்டவணையில் சிவப்பு எல்லை உள்ளது.

உங்கள் அட்டவணையை சுற்றி ஒரு 3D எல்லை உருவாக்க அனுமதிக்க எல்லை நிற ஒளி மற்றும் எல்லை colordark பண்புகளை இன்டர்நெட் எக்ஸ்ப்ளோரர் சேர்க்கப்பட்டுள்ளது. எனினும், IE8 மற்றும் வரை, இது IE7 தரநிலை முறை மற்றும் க்யூர்க்ஸ் பயன்முறையில் மட்டுமே துணைபுரிகிறது. மைக்ரோசாப்ட் இந்த பண்புகளை ஆதரிக்காது என்று கூறுகிறது.

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

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

CSS உயரம் சொத்து மூலம் நீங்கள் CSS சொத்து பயன்படுத்த என்றால் உயரம் கட்டுப்படுத்த முடியும் எந்த கூடுதல் உள்ளடக்கத்தை என்ன நடக்கும் என்பதை வரையறுக்க.

அட்டவணையில் குறைந்தபட்ச உயரத்தை அமைக்க, எழுது:

style = "height: 30em;" >

இந்த அட்டவணை குறைந்தது 30 ems high.

இரண்டு பண்புக்கூறுகள் மற்றும் இடது / வலதுபுறம் (ஹஸ்பெஸ்) மற்றும் மேல் / கீழ் (வெர்சஸ்) அட்டவணையைச் சேர்ந்தது. நீங்கள் அதற்கு பதிலாக பாணி சொத்து பயன்படுத்த வேண்டும்.

செங்குத்து இடைவெளியை 20 பிக்சல்கள் மற்றும் கிடைமட்ட இடத்தை 40 பிக்சல்களுக்கு அமைக்க, எழுதவும்:

style = "margin: 20px 40px;"



இந்த அட்டவணையில் 20 பிக்சல்களின் வெர்சஸ் மற்றும் 40 பிக்சல்களின் hspace உள்ளது.

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

நிறைய உரையுடன் உரையை எழுதுவதற்கு எழுதவும்:

<அட்டவணை>
style = "white-space: nowrap;" > இது ஒரு டன் உள்ளடக்கம் கொண்ட ஒரு நிரலாகும். ஆனால் கொள்கலன் விட பரந்திருந்தாலும், உரை அடுத்த வரியில் போட கூடாது, ஆனால் அதற்கு பதிலாக உலாவி சாளரத்தை அனைத்து உள்ளடக்கத்தையும் பார்க்க கிடைமட்டமாக உருட்டும் கட்டாயப்படுத்தவும்.

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

கீழே உள்ள செருகுவதற்கு ஒரு செல் கட்டாயப்படுத்த (முன்னிருப்பாக, நொடிக்குப் பதிலாக) எழுதவும்:

<அட்டவணை>
இந்த உயிரணு மீதமுள்ளதை விட நீளமானது, எனவே உயரம் உயரமாக இருக்கும். எனவே செங்குத்தாக சீரமைக்கப்பட்ட கலம் கீழே அமைந்திருப்பதைக் காண்பீர்கள்.
style = "vertical-align: bottom;" > பொருளடக்கம் கீழே.
நடுத்தர பொருளடக்கம்