எளிய தமிழில் 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 என்னும் பண்பு அட்டவணையின் அகலத்தைக் கொடுக்கப் பயன்படுகிறது. அட்டவணையின் அகலத்தைத் திரையின் ஒரு குறிப்பிட்ட விழுக்காடாகக் கொடுப்பது நல்லது. அப்போதுதான் உலவித் திரையின் அகலம் மாறுவதற்கேற்ப அட்டவணையின் அகலமும் தானாக மாறும். உம். 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>

<table width="100%" cellspacing="5" cellpadding="5" border="5">

<tr>
<th>Name</th>
<th>Tamil</th>
<th>English</th>
<th>Computer Science</th>
</tr>

<tr>
<td>Latha</td>
<td>85</td>
<td>76</td>
<td>92</td>
</tr>

<tr>
<td>Revathi</td>
<td>97</td>
<td>85</td>
<td>63</td>
</tr>

<tr>
<td> Bavya </td>
<td>99</td>
<td>98</td>
<td>100</td>
</tr>

<tr>

<td>68</td>
<td>77</td>
<td>90</td>
</tr>
</table>
</body>
</html>

மேற்கண்ட நிரல்வரிகளை நோட்பேடில் எழுதி, அதை .html என்ற விரிவுடன் சேமித்து, உலவியில் சேமித்த கோப்பைத் திறந்து பாருங்கள். இப்போது நீங்கள் உருவாக்கிய அட்டவணையானது அட்டகாசமாக உலவியில் வெளிப்பட்டிருக்கும்.

எளிய தமிழில் HTML கற்றுக்கொள்ள தொடரின் அனைத்துப் பதிவுகளையும் காண இந்த இணைப்பைச் சொடுக்கிப் படிக்கவும்.