எளிய தமிழில் CSS – 4 – Tables

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]

 

து. நித்யா

nithyadurai87@gmail.com

தொடரின் பிற பகுதிகளைப் படிக்க – www.kaniyam.com/category/css-in-tamil/

%d bloggers like this: