HTML கற்போம் - 6
Cell spacing
<html>
<body>
<h4>Without cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing="0":</h4>
<table border="1" cellspacing="0">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing="10":</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Without cellspacing:
First
|
Row
|
Second
|
Row
|
With cellspacing="0":
First
|
Row
|
Second
|
Row
|
With cellspacing="10":
First
|
Row
|
Second
|
Row
|
HTML Unordered Lists
வரிசைப்படுத்தப்படாத பட்டியல்களை அமைப்பதற்கு <ul> tag (ul – unordered list). ஒவ்வரு பட்டியல் உருப்படியையும் வரையறை செய்வாதற்கு <li> tag (li- list)பயன்படுகின்றது.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Browser இல் பின்வருமாறு காட்சியளிக்கும்.
HTML Ordered Lists
வரிசைப்படுத்தப்பட்ட பட்டியல்களை அமைப்பதற்கு <ol> tag (ol – ordered list). ஒவ்வரு பட்டியல் உருப்படியையும் வரையறை செய்வாதற்கு <li> tag (li- list)பயன்படுகின்றது.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Browser இல் பின்வருமாறு காட்சியளிக்கும்.
- Coffee
- Milk
HTML Definition Lists
பட்டியலில் உள்ள ஒவ்வரு உருப்படி பற்றிய விபரிப்புக்களை வழங்குவதற்கு
<dl> - definition list
<dt> - definition item in the list
<dd> - describes the item in the list
போன்ற tag பயன்படுத்தப்படுகின்றது.
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Browser இல் பின்வருமாறு காட்சியளிக்கும்.
1. Coffee
- black hot drink
2. Milk
- white cold drin
வெவ்வேறு வகையான வருசைப்படுத்தப்பட்ட பட்டியல்களை சமர்பிக்கும் முறைக்கான உதாரணம்.
<html>
<body>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
Browser இல் பின்வருமாறு காட்சியளிக்கும்.
Numbered list:
- Apples
- Bananas
- Lemons
- Oranges
Letters list:
- Apples
- Bananas
- Lemons
- Oranges
Lowercase letters list:
- Apples
- Bananas
- Lemons
- Oranges
Roman numbers list:
- Apples
- Bananas
- Lemons
- Oranges
Lowercase Roman numbers list:
- Apples
- Bananas
- Lemons
- Oranges
அடுக்குமுறைப்பட்டியல்களை சமர்பிக்கும் முறைக்கான உதாரணம்.
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Browser இல் பின்வருமாறு காட்சியளிக்கும்.
A nested List:
Tag
|
Description
|
<ol>
|
Defines an ordered list
|
<ul>
|
Defines an unordered list
|
<li>
|
Defines a list item
|
<dl>
|
Defines a definition list
|
<dt>
|
Defines an item in a definition list
|
<dd>
|
Defines a description of an item in a definition list
|
