Tables
CSS-ல் tables-ஐ அழகுபடுத்த அவற்றின் ஒவ்வொரு அங்கங்களும் தனித்தனியாகக் குறிப்பிடப்படுகின்றன. பின்வரும் உதாரணத்தில் table எவ்வாறு இருக்க வேண்டும், table heading எவ்வாறு இருக்க வேண்டும், table data எவ்வாறு இருக்க வேண்டும் என்று தனித்தனியே குறிப்பிடப்பட்டுள்ளது.
[code]
<html>
<head>
<style>
table {width:”60%”; height: “40%”; border: 3px solid red;}
th {border: 2px solid green;}
td {border: 1px solid orange;}
</style>
</head>
<body> <table>
<tr>
<th>Name</th>
<th>Marks</th>
<th>Rank</th>
</tr>
<tr>
<th>Viyan</th>
<th>1200/1200</th>
<th>First</th>
</tr>
<tr>
<th>Harini</th>
<th>1180/1200</th>
<th>Second</th>
</tr>
</table></body>
</html>
[/code]
மேற்கண்ட உதாரணத்தில் table, th & td ஆகிய 3-க்கும் வெவ்வேறு நிறங்களில் border அளிக்கப்பட்டுள்ளது. எனவே அவை 3-ம் table-ல் ஒன்றுடன் ஒன்று கலந்திறாமல் தனித்தனியாகத் தெரிவதை கவனிக்கவும். இவற்றை ஒன்றுடன் ஒன்று கலக்கச் செய்ய border-collapse ன் மதிப்பினை collapse என்று கொடுக்க வேண்டும். இது பின்வருமாறு.
[code]
table {width:60%; width:40%; border: 3px solid red; border-collapse: collapse;}
[/code]
து. நித்யா
தொடரின் பிற பகுதிகளைப் படிக்க – www.kaniyam.com/category/css-in-tamil/