CSS Table Width and Height
அட்டவணையின் அகலமும் உயரமும் width மற்றும் height பண்புகளால் வரையறுக்கப்படுகின்றன.
CSS Table Width
அட்டவணையின் அகலத்தை அமைக்க CSS width பண்பு பயன்படுத்தப்படுகிறது.
அகலத்தை பின்வரும் முறைகளில் அமைக்கலாம்:
- சதவீதத்தில் (%)
- நிலையான நீளமாக (px)
- auto முக்கிய சொல்லின் மூலம்
CSS Table Width in Percent
முழு திரையையும் பரவும் அட்டவணையை உருவாக்க (முழு-அகலம்), width: 100%; பயன்படுத்தவும்:
| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Example
முழு-அகல அட்டவணை:
table {
width: 100%;
}
th {
height: 70px;
}பக்கத்தின் பாதியை மட்டும் பரவும் அட்டவணையை உருவாக்க, width: 50%; பயன்படுத்தவும்:
| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Example
50% அகல அட்டவணை:
table {
width: 50%;
}CSS Table Width in a Fixed Width
நிலையான அகலம் கொண்ட அட்டவணையை உருவாக்க, width: 500px பயன்படுத்தவும்:
| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Example
நிலையான அகல அட்டவணை:
table {
width: 500px;
}CSS Table Width Using auto
உலாவியை அகலத்தை கணக்கிட அனுமதிக்க, width: auto; பயன்படுத்தவும்:
| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Example
width: auto பயன்படுத்துதல்:
table {
width: auto;
}CSS Table Height
அட்டவணையின் உயரத்தை அமைக்க CSS height பண்பு பயன்படுத்தப்படுகிறது.
உயரத்தை பின்வரும் முறைகளில் அமைக்கலாம்:
- சதவீதத்தில் (%)
- நிலையான நீளமாக (px)
- auto முக்கிய சொல்லின் மூலம்
கீழே உள்ள எடுத்துக்காட்டு அட்டவணை தலைப்புகளின் (<th>) உயரத்தை 70px ஆக அமைக்கிறது:
| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Example
அட்டவணை தலைப்புகளின் உயரத்தை நிலையான உயரமாக அமைக்கவும்:
th {
height: 70px;
}Exercise
அட்டவணையின் அகலத்தை அமைக்க எந்த CSS பண்பு பயன்படுத்தப்படுகிறது?