அனைவருக்கும் 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-ஐப் பின்வருமாறு காணலாம்.
File: table1.html
<html>
<head><title></title></head>
<body>
<table>
<tr>
<th>Name</th>
<th>Marks</th>
<th>Rank</th>
</tr>
<tr>
<td>Viyan</td>
<td>1200/1200</td>
<td>First</td>
</tr>
<tr>
<td>Harini</td>
<td>1180/1200</td>
<td>Second</td>
</tr>
</table>
</body>
</html>
Border, height & width attributes
Border எனும் பண்பு ஒரு் table-க்கு அழகிய border-ஐ உருவாக்குவதற்கும், height எனும் பண்பு ஒரு் table-ன் நீளத்தை மாற்றி அமைப்பதற்கும், width எனும் பண்பு ஒரு் table-ன் அகலத்தை மாற்றி அமைப்பதற்கும் பயன்படுகிறது.
இவை மூன்றும் தொடக்கத்தில் நாம் கொடுக்கின்ற <table> tag-வுடன் இணைந்தே காணப்படும். வெறும் border எனும் வார்த்தையை மட்டும் கொடுத்தால் போதுமானது. மேலும் தடிமனான border வேண்டும் எனில் அதற்கு ஒரு மதிப்பும் தரலாம். உதாரணம் – border=3
height மற்றும் width-க்குக் கொடுக்கப்படும் மதிப்பு pixel-களின் எண்ணிக்கையிலோ அல்லது சதவிகிதமாகவோ இருக்கும். பொதுவாக சதவீதத்தில் கொடுப்பது புரிந்துகொள்ள சற்று சுலபமாக இருக்கும்.
இதனை பின்வரும் உதாரணத்தில் காணலாம்.
File: table2.html
<html>
<head><title></title></head>
<body>
<table border width=”60%” height=”40%”>
<tr>
<th>Name</th>
<th>Marks</th>
<th>Rank</th>
</tr>
<tr>
<td>Viyan</td>
<td>1200/1200</td>
<td>First</td>
</tr>
<tr>
<td>Harini</td>
<td>1180/1200</td>
<td>Second</td>
</tr>
</table>
</body>
</html>
Background colour attribute
இந்தப் பண்பு table-ல் நிறங்களைக் கொண்டுவரப் பயன்படுகிறது. Bgcolor=”yellow” என <table> tag-வுடன் இணைந்து கொடுக்கும்போது முழு table-ம் மஞ்சள் நிறத்தில் காணப்படும். இந்தப் பண்பினை ஏதேனும் ஒரு் cell-க்கு மட்டும் கொடுக்கும்போது அந்த இடம் மட்டும் நாம் குறிப்பிட்டுள்ள நிறத்தில் காணப்படும்.
இதனைப் பின்வரும் உதாரணத்தில் காணலாம்.
File: table3.html
<html>
<head><title></title></head>
<body>
<table border bgcolor=”yellow”>
<tr>
<th>Name</th>
<th>Marks</th>
<th>Rank</th>
</tr>
<tr>
<td width=”80%” height=”20%”>Viyan</td>
<td>1200/1200</td>
<td bgcolor=”White”>First</td>
</tr>
<tr>
<td align=”center”>Harini</td>
<td>1180/1200</td>
<td>Second</td>
</tr>
</table>
</body>
</html>