HTML அட்டவணை அளவுகள்
HTML அட்டவணைகள் ஒவ்வொரு நெடுவரிசை, வரிசை அல்லது முழு அட்டவணைக்கும் வெவ்வேறு அளவுகளைக் கொண்டிருக்கலாம்.
| நெடுவரிசை 1 (40%) | நெடுவரிசை 2 (30%) | நெடுவரிசை 3 (30%) |
|---|---|---|
| வரிசை 1 (100px உயரம்) | தரவு | தரவு |
| வரிசை 2 (60px உயரம்) | தரவு | தரவு |
ஒரு அட்டவணை, வரிசை அல்லது நெடுவரிசையின் அளவைக் குறிப்பிட width அல்லது height பண்புகளுடன் style பண்புக்கூறைப் பயன்படுத்தவும்.
HTML அட்டவணை அகலம்
அட்டவணையின் அகலத்தை அமைக்க, <table> உறுப்புக்கு style பண்புக்கூறைச் சேர்க்கவும்:
எடுத்துக்காட்டு
அட்டவணையின் அகலத்தை 100% என அமைக்கவும்:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>குறிப்பு:
அகலத்திற்கான அளவு அலகாக சதவீதத்தைப் பயன்படுத்துவது என்பது இந்த உறுப்பு அதன் பெற்றோர் உறுப்புடன் ஒப்பிடும்போது எவ்வளவு அகலமாக இருக்கும் என்பதாகும், இந்த விஷயத்தில் அது <body> உறுப்பாகும்.
HTML அட்டவணை நெடுவரிசை அகலம்
ஒரு குறிப்பிட்ட நெடுவரிசையின் அளவை அமைக்க, <th> அல்லது <td> உறுப்பில் style பண்புக்கூறைச் சேர்க்கவும்:
எடுத்துக்காட்டு
முதல் நெடுவரிசையின் அகலத்தை 70% என அமைக்கவும்:
<table style="width:100%">
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>| Firstname (70%) | Lastname | Age |
|---|---|---|
| Jill | Smith | 50 |
HTML அட்டவணை வரிசை உயரம்
ஒரு குறிப்பிட்ட வரிசையின் உயரத்தை அமைக்க, அட்டவணை வரிசை உறுப்பில் style பண்புக்கூறைச் சேர்க்கவும்:
எடுத்துக்காட்டு
இரண்டாவது வரிசையின் உயரத்தை 200 பிக்சல்களாக அமைக்கவும்:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>| Firstname | Lastname | Age |
|---|---|---|
| Jill (200px உயரம்) |
Smith | 50 |
| Eve | Jackson | 94 |