அனைவருக்கும் 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>

License

Icon for the Creative Commons Attribution-ShareAlike 4.0 International License

எளிய தமிழில் HTML Copyright © 2015 by து. நித்யா is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License, except where otherwise noted.

Share This Book