HTML Tutorials 26-அட்டவணைகள்(Tables)
கடந்த எளிய தமிழில் HTML கற்றுக்கொள்ள தொடரில் HTML -லில்
பட்டியல்கள் அமைப்பது எப்படி என்பதைப் பார்த்தோம்.
இன்றையப்
பதிவில் HTML-ல் அட்டவணைகள்(Tables) அமைப்பது எப்படி
என்பதைப் பார்ப்போம்.
இதற்கு <TABLE></TABLE> என்ற குறிஒட்டுகள்
பயன்படுகின்றன.
எந்த ஒரு HTML ஆவணத்திலும் அட்டவணைகள் அமைக்க
இந்த குறிஒட்டுகளைத்தான்
பயன்படுத்த முடியும். இதற்கிடையேதான்
தகவல்களை கொடுத்து அட்டவணைப்படுத்த
முடியும். அட்டவணைக்கு
தலைப்பு கொடுக்க வேண்டுமெனில் <CAPTION>
என்னும் குறிஒட்டைப்
அட்டவணையில்
வரிசைகளை உருவாக்க <TR> மற்றும் </TR> குறி
ஒட்டுகளைப்
பயன்படுத்த வேண்டும். ஒரு சிற்றறையில் தலைப்பு
இருந்தால் அதனை
<TH>..</TH> என்ற குறி ஒட்டுகளுக்கு இடையே
கொடுக்க வேண்டும்.
தகவல்களை <TD>..</TD> என்னும் குறி ஒட்டுகளுக்கு
இடையே கொடுக்க
வேண்டும்.
HTML-ல் அட்டவணை எழுதப்படும் குறிஒட்டுகளும், அதனுடைய
வேலையை விளக்கி ஒரு அட்டவணைப்படுத்தப்பட்டுள்ளது.
Tag
|
Definition
|
<TABLE>
|
Start of table definition
|
<CAPTION>Caption Contents</CAPTION>
|
Caption definition
|
<TR>
|
Start of first row definition
|
<TH>cell contents</TH>
|
First cell in row 1(a head)
|
<TH>cell contents</TH>
|
Last cell in row 1(a head)
|
<TR>cell contents</TR>
|
End of first row definition
|
</TR>
|
End of first row definition
|
<TR>
|
Start of second row definition
|
<TD>cell contents</TD>
|
First cell in row 2
|
<TD>cell contents</TD>
|
Last cell in row 2
|
</TR>
|
End of second row definition
|
<TR>
|
Start of last row definition
|
<TH>cell contents</TH>
|
First cell in row 1(a head)
|
<TH>cell contents</TH>
|
Last cell in row 1(a head)
|
</TR>
|
End of last row definition
|
</TABLE>
|
End of table definition
|
<TABLE> குறி ஒட்டுடன் வழக்கமாக WIDTH, CELLSPACING, CELLPADDING
மற்றும் BORDER போன்ற பண்புகள் பயன்படுத்தப்படுகின்றன.
WIDTH பண்பு
பயன்படுகிறது. அட்டவணையின்
அகலத்தைத் திரையின் ஒரு குறிப்பிட்ட
விழுக்காடாகக் கொடுப்பது நல்லது.
அப்போதுதான் உலவித் திரையின்
அகலம் மாறுவதற்கேற்ப அட்டவணையின் அகலமும்
தானாக மாறும். உம்.
Width="80%" எனக்கொடுக்கலாம். இவ்வாறு குறிப்பிட்ட
சதவீத்தில்
கொடுக்கும்போது திரையின் அகலத்திற்கு ஏற்றவாறு அட்டவணையும்
அகலத்தை மாற்றிக்கொள்ளும்.
கீழ்க்கண்ட அட்டவணையை உருவாக்குவது எப்படி என்பதைக் காண்போம்.
CELLSPACING பண்பு
சிற்ற்றையின்
ஓரத்திற்கும், உரைக்கும் இடையே உள்ள இடைவெளியைக்
குறிப்பிட CELLPADING
என்னும் பண்பு பயன்படுகிறது. இதன் மதிப்பையும்
புள்ளிகளில் (Pixels)
கொடுக்க வேண்டும்.
BORDER பண்பு
அட்டவணை
ஓரத்தின் தடிமனைக் குறிப்பட BORDER என்னும் பண்பு
பயன்படுகிறது. இதன்
மதிப்பையும் புள்ளிகளில் கொடுக்க வேண்டும்.
BORDER="0" என்று கொடுத்தால்
அட்டவணையின் ஓரம் தனியாகத்
தெரியாது.
அட்டவணையில்
வரிசைகளை ஒவ்வொன்றாக உருவாக்க வேண்டும்.
ஒவ்வொரு வரிசையையம் தொடங்கி,
அதில் உள்ள தகவல்களைக்
கொடுத்துவிட்டு, அந்த வரிசையை மூட வேண்டும்.
<TR> மற்றும் </TR>
குறி ஒட்டுகள், முறையே வரிசையைத்
தொடங்கவும், மூடவும்
பயன்படுகின்றன. வரிசைகளுக்குள் <TD> மற்றும்
</TD> குறிஒட்டுகளைப்
பயன்படுத்தி சிற்ற்றைகளை உருவாக்கலாம்.
<TH> மற்றும் </TH> குறி
ஒட்டுகளைப் பயன்படுத்தி
உருவாக்கப்படும் தலைப்புகள் சிற்றறையின்
மையத்தில் தடிமனாகக் காட்டப்படும்.
Name
|
Tamil
|
English
|
Computer
|
Latha
|
85
|
76
|
92
|
Revathi
|
97
|
85
|
63
|
Bavya
|
99
|
98
|
100
|
Ravi
|
68
|
77
|
90
|
இதுபோல வலைப்பக்கத்தில் அட்டவணையை உருவாக்க கீழ்க்கண்டவாறு
HTML நிரல்வரிகளை எழுத வேண்டும்.
<html>
<head>
<title>Creating a Table</title>
</head>
<body>
<!--Starting a table-->
<table width="100%" cellspacing="5" cellpadding="5" border="5">
<!--Row1-->
<tr>
<th>Name</th>
<th>Tamil</th>
<th>English</th>
<th>Computer Science</th>
</tr>
<!--Row2-->
<tr>
<td>Latha</td>
<td>85</td>
<td>76</td>
<td>92</td>
</tr>
<!--Row3-->
<tr>
<td>Revathi</td>
<td>97</td>
<td>85</td>
<td>63</td>
</tr>
<!--Row4-->
<tr>
<td> Bavya </td>
<td>99</td>
<td>98</td>
<td>100</td>
</tr>
<!--Row5-->
<tr>
<td> Ravi</td>
<td>68</td>
எளிய தமிழில் HTML கற்றுக்கொள்ள தொடரின் அனைத்துப் பதிவுகளையும்
<td>77</td>
<td>90</td>
</tr>
</table>
</body>
</html>
மேற்கண்ட
நிரல்வரிகளை நோட்பேடில் எழுதி, அதை .html என்ற விரிவுடன்
சேமித்து,
உலவியில் சேமித்த கோப்பைத் திறந்து பாருங்கள். இப்போது
நீங்கள் உருவாக்கிய
அட்டவணையானது அட்டகாசமாக உலவியில்
வெளிப்பட்டிருக்கும்.
காண இந்த இணைப்பைச் சொடுக்கிப் படிக்கவும்.
