03-26-2005, 04:29 PM
எதிர்பாராதவிதமாக ஏற்பட்ட தாமதத்திற்கு வருந்துகிறேன். இன்றைய தொடரில் சட்டங்களை கொண்டு இணையப்பக்கம் வடிவமைத்தல் (Layout with Tables) பற்றி குறிப்பிடுகிறேன். நாங்கள் விரும்பிய இடங்களில் படங்களையோ எழுத்துக்களையோ தோன்றச்செய்வதற்கு இச்சட்டங்கள்(Tables) முக்கியமானதாகும். அத்துடன் கற்றுக்கொள்வதற்கு மிகவும் இலகுவானதாகும். இலகுவானதொரு சட்டத்தை பார்ப்போம்.
<html>
<head>
<title>தமிழ்வாணனின் பக்கம்</title>
</head>
<body style="font-family: Arial Unicode Ms, Latha">
வணக்கம் இது HTML தொடர் - 07.
<table border="1">
<caption>தமிழ்நெடுங்கணக்கு</caption>
<tr>
<th>வகை</th>
<th>தொகை</th>
</tr>
<tr>
<td>உயிர்எழுத்துகள்</td>
<td>12</td>
</tr>
<tr>
<td>மெய்எழுத்துகள்</td>
<td>18</td>
</tr>
<tr>
<td>உயிர்மெய்எழுத்துகள்</td>
<td>216</td>
</tr>
<tr>
<td>ஆய்தஎழுத்து</td>
<td>01</td>
</tr>
</body>
</html>
<img src='http://www.geocities.com/thamilsangamam/webpotoes/page7.JPG' border='0' alt='user posted image'>
மேற்குறிப்பிட்ட மீயுரையை பரிசோதித்து பாருங்கள் .ஒரு சட்டம் (Table) ஆனது ஒன்று அல்லது ஒன்றுக்கு மேற்பட்ட நிரைகளையும் (Row) நிரல்களையும் (Column) களையும் கொண்டிருக்கும். நிரையை உருவாக்க <tr> மூலகமும் நிரலை உருவாக்க </td> மூலகமுமே பயன்படுகிறது. இங்கு பயன்படுத்தப்பட்டுள்ள <th> மூலகம் சட்டத்தின் தலைப்பை உருவாக்கவே பயன்படுத்தப்பட்டுள்ளது. சட்டத்தின் தடிப்பு (border) எனும் பண்பால் 1 என குறிப்பிடப்பட்டுள்ளது.அதனை தேவைக்கேற்ப 0 இலிருந்து பெறுமானங்களை தெரிவுசெய்யலாம்.
அடுத்து சட்டத்தில் முக்கியமான விடயமான colspan, rowspan எனும் இருவிடயங்கள் பற்றி பார்ப்போம்.
<html>
<head>
<title>தமிழ்வாணனின் பக்கம்</title>
</head>
<body style="font-family: Arial Unicode Ms, Latha">
வணக்கம் இது HTML தொடர் - 07.
<table border="1">
<caption>எனது தொடர்புக்கு </caption>
<tr>
<td rowspan=2>தொலைபேசி இல</td>
<td>0346782345</td>
</tr>
<tr>
<td>0994984321</td>
</tr>
</body>
</html>
இங்கு எனக்குறிப்பதன் மூலம் இரண்டு row கள் ஒரு column இல் ஒன்றாக்கப்பட்டுள்ளதை காணலாம்.
இதனை போலவே இரண்டு column கள் ஒரு row இல் ஒன்றாக்கப்பட்டுள்ளதை கீழுள்ள மீயுரையில் காணலாம் காணலாம்.
<html>
<head>
<title>தமிழ்வாணனின் பக்கம்</title>
</head>
<body style="font-family: Arial Unicode Ms, Latha">
வணக்கம் இது HTML தொடர் - 07.
<table border="1">
<caption>எனது தொடர்புக்கு </caption>
<tr>
<td colspan=3 align="center">தொலைபேசி இல</td>
</tr>
<tr>
<td>0346782345</td>
<td>035683456</td>
<td>0994984321</td>
</tr>
</body>
</html>
இவை தொடர்பான மேலதிக விடயங்களை அடுத்ததொடரில் பார்ப்போம். கருத்துக்கள் வரவேற்கப்படுகின்றன.
என்றும் அன்புடன்
தமிழ்வாணன்.
<html>
<head>
<title>தமிழ்வாணனின் பக்கம்</title>
</head>
<body style="font-family: Arial Unicode Ms, Latha">
வணக்கம் இது HTML தொடர் - 07.
<table border="1">
<caption>தமிழ்நெடுங்கணக்கு</caption>
<tr>
<th>வகை</th>
<th>தொகை</th>
</tr>
<tr>
<td>உயிர்எழுத்துகள்</td>
<td>12</td>
</tr>
<tr>
<td>மெய்எழுத்துகள்</td>
<td>18</td>
</tr>
<tr>
<td>உயிர்மெய்எழுத்துகள்</td>
<td>216</td>
</tr>
<tr>
<td>ஆய்தஎழுத்து</td>
<td>01</td>
</tr>
</body>
</html>
<img src='http://www.geocities.com/thamilsangamam/webpotoes/page7.JPG' border='0' alt='user posted image'>
மேற்குறிப்பிட்ட மீயுரையை பரிசோதித்து பாருங்கள் .ஒரு சட்டம் (Table) ஆனது ஒன்று அல்லது ஒன்றுக்கு மேற்பட்ட நிரைகளையும் (Row) நிரல்களையும் (Column) களையும் கொண்டிருக்கும். நிரையை உருவாக்க <tr> மூலகமும் நிரலை உருவாக்க </td> மூலகமுமே பயன்படுகிறது. இங்கு பயன்படுத்தப்பட்டுள்ள <th> மூலகம் சட்டத்தின் தலைப்பை உருவாக்கவே பயன்படுத்தப்பட்டுள்ளது. சட்டத்தின் தடிப்பு (border) எனும் பண்பால் 1 என குறிப்பிடப்பட்டுள்ளது.அதனை தேவைக்கேற்ப 0 இலிருந்து பெறுமானங்களை தெரிவுசெய்யலாம்.
அடுத்து சட்டத்தில் முக்கியமான விடயமான colspan, rowspan எனும் இருவிடயங்கள் பற்றி பார்ப்போம்.
<html>
<head>
<title>தமிழ்வாணனின் பக்கம்</title>
</head>
<body style="font-family: Arial Unicode Ms, Latha">
வணக்கம் இது HTML தொடர் - 07.
<table border="1">
<caption>எனது தொடர்புக்கு </caption>
<tr>
<td rowspan=2>தொலைபேசி இல</td>
<td>0346782345</td>
</tr>
<tr>
<td>0994984321</td>
</tr>
</body>
</html>
இங்கு எனக்குறிப்பதன் மூலம் இரண்டு row கள் ஒரு column இல் ஒன்றாக்கப்பட்டுள்ளதை காணலாம்.
இதனை போலவே இரண்டு column கள் ஒரு row இல் ஒன்றாக்கப்பட்டுள்ளதை கீழுள்ள மீயுரையில் காணலாம் காணலாம்.
<html>
<head>
<title>தமிழ்வாணனின் பக்கம்</title>
</head>
<body style="font-family: Arial Unicode Ms, Latha">
வணக்கம் இது HTML தொடர் - 07.
<table border="1">
<caption>எனது தொடர்புக்கு </caption>
<tr>
<td colspan=3 align="center">தொலைபேசி இல</td>
</tr>
<tr>
<td>0346782345</td>
<td>035683456</td>
<td>0994984321</td>
</tr>
</body>
</html>
இவை தொடர்பான மேலதிக விடயங்களை அடுத்ததொடரில் பார்ப்போம். கருத்துக்கள் வரவேற்கப்படுகின்றன.
என்றும் அன்புடன்
தமிழ்வாணன்.