Tables

அனைவருக்கும் Table என்றால் என்னவென்று தெரிந்திருக்கும். இப்போது HTML-ல் ஒரு table-ஐ உருவாக்குவது எப்படியென்று பார்க்கப்போகிறோம்.

முதலில் ஒரு table-ன் தொடக்கத்தின் <table> எனும் tag-ஐயும், கடைசியாக அதற்கான இணை tag-ஐயும் கொடுக்க வேண்டும். பின்னர் table-ல் இடம்பெறப்போகும் ஒவ்வொரு row-ன் ஆரம்பத்தில் <tr>-ம், இறுதியில் </tr> tags-ஐயும் (tr for table row) கொடுக்க வேண்டும். இது table-ன் தலைப்பாக அமையப்போகும் row-க்கும் பொருந்தும்.

அடுத்தபடியாக table-ன் தலைப்பாக இடப்பெறப்போகும் ஒவ்வொரு வார்த்தையின் முன்னரும் பின்னரும் <th></th> tags-ம் (th for table heading), table-க்குள் தகவல்களாக இடம்பெறப்போகும் ஒவ்வொரு வார்த்தையின் முன்னரும் பின்னரும் <td></td> tags-ம் (td for table data) இடம்பெற வேண்டும்.

இத்தகைய tags-ஐப் பயன்படுத்தி உருவாக்கப்பட்ட ஒரு table-ஐப் பின்வருமாறு காணலாம்.

Border, height & width attributes

Border எனும் பண்பு ஒரு table-க்கு அழகிய border-ஐ உருவாக்குவதற்கும், height எனும் பண்பு ஓர் table-ன் நீளத்தை மாற்றி அமைப்பதற்கும், width எனும் பண்பு ஒரு table-ன் அகலத்தை மாற்றி அமைப்பதற்கும் பயன்படுகிறது.

இவை மூன்றும் தொடக்கத்தில் நாம் கொடுக்கின்ற <table> tag-வுடன் இணைந்தே காணப்படும். border-க்கு எந்த ஒரு மதிப்பும் கொடுக்கத்தேவையில்லை. வெறும் border எனும் வார்த்தையை மட்டும் கொடுத்தால் போதுமானது.

height மற்றும் width-க்குக் கொடுக்கப்படும் மதிப்பு pixel-களின் எண்ணிக்கையிலோ அல்லது சதவிகிதமாகவோ இருக்கும். பொதுவாக சதவீதத்தில் கொடுப்பது புரிந்துகொள்ள சற்று சுலபமாக இருக்கும்.

இதனை பின்வரும் உதாரணத்தில் காணலாம்.

Background colour attribute

இந்தப் பண்பு table-ல் நிறங்களைக் கொண்டுவரப் பயன்படுகிறது. Bgcolor=”yellow” என <table> tag-வுடன் இணைந்து கொடுக்கும்போது முழு table-ம் மஞ்சள் நிறத்தில் காணப்படும். இந்தப் பண்பினை ஏதேனும் ஒரு cell-க்கு மட்டும் கொடுக்கும்போது அந்த இடம் மட்டும் நாம் குறிப்பிட்டுள்ள நிறத்தில் காணப்படும்.

இதனைப் பின்வரும் உதாரணத்தில் காணலாம்.

Links

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

முதலில் link1.htm எனும் ஒரு program-ல் Rhymes-க்கான ஒரு அறிமுகத்தைக் கொடுத்துவிட்டு, அதனடியில் Click here for Chubby Cheeks Rhyme என்று ஒரு link-ஐ உருவாக்கவும். link-ஐ உருவாக்குவதற்கு anchor tags அதாவது <a></a> பயன்படும். இதற்கிடையில் கொடுக்கப்படும் வார்த்தைகள் நீலநிறத்தில் அடிக்கோடிடப்பட்ட link-ஆகத் தென்படும். இதனை நாம் சொடுக்கும்போது எந்த இடத்திற்குச் செல்ல வேண்டும் என்பதை href எனும் பண்பு தீர்மானிக்கும். hypertext reference என்பதே href ஆகும்.

மேற்கண்ட program-ல் href-ன் மதிப்பு link2.htm என்று காணப்படுவதால் கீழ்வரும் program-க்கு நம்மை அழைத்துச் செல்லும்.

link2.htm பின்வருமாறு.

இந்த program-ன் கடைசியில் உள்ள click here to go back to introduction என்பதை நாம் சொடுக்கும்போது href-ன் மதிப்பு link1.htm என்றிருப்பதால், இது நம்மை முந்தைய program-க்கே கொண்டு செல்லும்.

எனவே இதன் வெளிப்பாடுகள் பின்வருமாறு அமையும்.

Internal Links

இரண்டு program-களுக்கிடையில் links-ஐ உருவாக்குவது பற்றி முந்தைய program-ல் பார்த்தோம். இப்போது ஒரே program-ல் பல program-களுக்கான links-ஐ உருவாக்குவது பற்றி பார்க்கலாம்.

இதற்கான program பின்வருமாறு அமையும். இந்தப் புத்தகத்தில், table-களைப் பற்றியும் அதன் attributes-ஐப் பற்றியும் தெரிந்து கொள்ள நாம் உருவாக்கிய 3 program-களுக்கான links-ஐ பின்வரும் program-ல் உருவாக்கியுள்ளோம்.

இதன் வெளிப்பாடு பின்வருமாறு அமையும்.

இதில் முதல் link-ஐ சொடுக்கும்போது table1 எனும் program-ன் வெளிப்பாடும், இரண்டாவது link-ஐ சொடுக்கும்போது table2-ன் வெளிப்பாடும், மூன்றாவது link-ஆனது table3-ன் வெளிப்பாட்டையும் முறையே பின்வருமாறு வெளிப்படுத்தும்.

External Links

நாம் உருவாக்கிய program-களுக்கிடையில் links-ஐ உருவாக்குவதற்கும், பல்வேறு வலைதளப்பக்கங்களுக்கு links-ஐ உருவாக்குவதற்கும் பெரிய வித்தியாசம் ஒன்றும் இல்லை. வெறும் href-ன் மதிப்பு மட்டுமே மாறும். பல்வேறு வலைதள பக்கங்களுக்குமான முழுமுகவரியையும் href-ன் மதிப்பாகக் கொடுக்கும்போது, அது நம்மை பல்வேறு வலைதளங்களுக்குக் கொண்டு செல்லும்.

இதனை நாம் பின்வரும் program-ல் காணலாம்.

href-ன் மதிப்பாக mailto: என்பதைத் தொடர்ந்து ஏதேனும் ஓர் முகவரியைக் கொடுத்தால், அந்த முகவரிக்கு மின்னஞ்சல் அனுப்பப்படும். இது மேற்கண்ட program-ல் மூன்றாவதாக இடம்பெற்றுள்ளது. மேற்கண்ட program-ன் வெளிப்பாடு பின்வருமாறு அமையும்.

இதில் முதல் link-ஐ சொடுக்கும்போது பின்வரும் வெளிப்பாடும், இரண்டாவது link-ஐ சொடுக்கும்போது அடுத்த படத்தில் உள்ள வெளிப்பாடும், கடைசியாக உள்ள link-ஐ சொடுக்கும்போது எனது முகவரிக்கு ஒரு மின்னஞ்சலும் அனுப்பப்படும்.