இது
டேட்டாவை டேபுளர் ஃபார்மேட்டில் வெளிப்படுத்துவதற்கு
உதவுகின்றது. ஒரு ரோவில் எத்தனை காலம்ன் வேண்டுமானால் இருக்கலாம்.. இவை
<table><tr><th><td> என்ற எலெமெண்டுகள் மூலம் வடிவமைக்கப்படுகின்றது.
<table>
என்பது மொத்த டேபிளைக் குறிக்கின்றது.<tr> என்பது ஒரு ரோவைக் குறிக்கின்றது.<th>
என்பது முதல் ரோவில் உள்ள காலம்ன் களைக் குறிக்கின்றது. <td>என்பது மற்ற ரோவில்
உள்ள காலம்ன்களைக் குறிக்கின்றது.
Html
டேபிள் சான்று.
1.
<table>
2.
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3.
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4.
<tr><td>James</td><td>William</td><td>80</td></tr>
5.
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6.
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7.
</table>
வெளியீடு:
|
First_Name
|
Last_Name
|
Marks
|
|
Sonoo
|
Jaiswal
|
60
|
|
James
|
William
|
80
|
|
Swati
|
Sironi
|
82
|
|
Chetna
|
Singh
|
72
|
|
|
|
|
பார்டர்.
ஒரு டேபிளுக்கு பின் வரும் முறைகளில் பார்டர் கொடுக்கலாம்.
1. Border பண்பை
பயன்படுத்தலாம்
2. Css மூலம்
பார்டர் கொடுக்கலாம்.
Html பார்டர் பண்பு:
பின் வரும் சான்று நிரலில் உள்ளது போல் பார்டர் கொடுக்கலாம்.
சான்று நிரல்.
1.
<table border="1">
2.
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3.
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4.
<tr><td>James</td><td>William</td><td>80</td></tr>
5.
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6.
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7.
</table>
Css border பண்பு.
கீழே உள்ளவாறு css மூலம் பார்டர் கொடுக்கலாம்.
1.
<style>
2.
table, th, td {
3.
border: 1px solid black;
4.
}
5.
</style>
பின் வரும் வழியில் பார்டரை கொளாப்ஸ் (collapse) செய்யலாம்.
1.
<style>
2.
table, th, td {
3.
border: 2px solid black;
4.
border-collapse: collapse;
5.
}
6.
</style>
Cell padding.
இந்த பண்பானது பார்டருக்கும் டேட்டாவுக்கும் உள்ள தொலைவை
குறிப்பிடப் பயன்படுகின்றது. பின் வரும் வழியில் அதை பயன்படுத்தலாம்.
1.
<style>
2.
table, th, td {
3.
border: 1px solid pink;
4.
border-collapse: collapse;
5.
}
6.
th, td {
7.
padding: 10px;
8.
}
9.
</style>
டேபிள் அகலம்.
ஒரு டேபிளின் அகலத்தை css width பண்பின் மூலம் கொடுக்கலாம்.
இது பிக்செல் அல்லது சதவீதமாக கொடுக்கலாம்.
சான்று நிரல்.
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<title>table</title>
5.
<style>
6.
table{
7.
border-collapse: collapse;
8.
width: 100%;
9.
}
10.
th,td{
11.
border: 2px solid green;
12.
padding: 15px;
13.
}
14.
15.
</style>
16.
</head>
17.
<body>
18.
<table>
19.
<tr>
20.
<th>1 header</th>
21.
<th>1 header</th>
22.
<th>1 header</th>
23.
</tr>
24.
<tr>
25.
<td>1data</td>
26.
<td>1data</td>
27.
<td>1data</td>
28.
</tr>
29.
<tr>
30.
<td>2 data</td>
31.
<td>2 data</td>
32.
<td>2 data</td>
33.
</tr>
34.
<tr>
35.
<td>3 data</td>
36.
<td>3 data</td>
37.
<td>3 data</td>
38.
</tr>
39.
</table>
40.
</body>
41.
</html>
Colspan.
இந்த பண்பானது ஒரு காலம்னின் அகலத்தை இரண்டு அல்லது அதற்கு
மேற்பட்ட காலம்னின் அகலமாக கொடுப்பதற்கு பயன்படுகின்றது
சான்று நிரல்.
|
1. <table style="width:100%">
2. <tr>
3. <th>Name</th>
4. <th colspan="2">Mobile No.</th>
5. </tr>
6. <tr>
7. <td>Ajeet Maurya</td>
8. <td>7503520801</td>
9. <td>9555879135</td>
10.
</tr>
11.
</table>
Output:
HTML
Table rowspan
இது ஒரு ரோவின் உயரத்தை இரண்டு ரோ உயரம் அல்லது அதற்கு மேல் ஸ்பேன்(span) செய்ய பயன்படுகின்றது.
சான்று நிரல்.
CSS code:
1. <style>
2. table, th, td {
3. border: 1px solid black;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. </style>
HTML code:
1. <table>
2. <tr><th>Name</th><td>Ajeet Maurya</td></tr>
3. <tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr>
4. <tr><td>9555879135</td></tr>
5. </table>
வெளியீடு:
HTML
table caption உடன்
இந்த பண்பானது ஒரு டேபிளின் தலைப்பை குறிப்பிட
பயன்படுகின்றது.
1. <table>
2. <caption>Student Records</caption>
3. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
4. <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
5. <tr><td>Mike</td><td>Warn</td><td>60</td></tr>
6. <tr><td>Shane</td><td>Warn</td><td>42</td></tr>
7. <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
8. </table>
Styling
HTML table even and odd cells
CSS code:
1. <style>
2. table, th, td {
3. border: 1px solid black;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. table#alter tr:nth-child(even) {
10.
background-color: #eee;
11.
}
12.
table#alter tr:nth-child(odd) {
13.
background-color: #fff;
14.
}
15.
table#alter th {
16.
color: white;
17.
background-color: gray;
18.
}
19.
</style>
வெளியீடு.
நன்றி.
முத்து
கார்த்திகேயன்,மதுரை.
|
|||||||||||
No comments:
Post a Comment