Horizontal Alignment
CSS text-align பண்பு <th> அல்லது <td> இல் உள்ள உள்ளடக்கத்தின் கிடைமட்ட சீரமைப்பை அமைக்க பயன்படுகிறது.
இந்த பண்பு பின்வரும் மதிப்புகளில் ஒன்றைக் கொண்டிருக்கலாம்:
- left - உரையை இடதுபுறமாக சீரமைக்கிறது
- right - உரையை வலதுபுறமாக சீரமைக்கிறது
- center - உரையை மையத்தில் சீரமைக்கிறது
குறிப்பு:
இயல்பாக, <th> உறுப்புகளின் உள்ளடக்கம் மைய-சீரமைக்கப்பட்டதாகவும், <td> உறுப்புகளின் உள்ளடக்கம் இடது-சீரமைக்கப்பட்டதாகவும் உள்ளது!
CSS text-align: center
<td> உறுப்புகளின் உள்ளடக்கத்தை மைய-சீரமைக்க, text-align: center பயன்படுத்தவும்:
| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Example
<td> உறுப்புகளை மைய-சீரமைக்க:
td {
text-align: center;
}CSS text-align: left
<th> உறுப்புகளின் உள்ளடக்கத்தை இடதுபுறமாக சீரமைக்க கட்டாயப்படுத்த, <th> உறுப்புகளில் text-align: left பயன்படுத்தவும்:
| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Example
<th> உறுப்புகளை இடது-சீரமைக்க:
th {
text-align: left;
}Vertical Alignment
CSS vertical-align பண்பு <th> அல்லது <td> இல் உள்ள உள்ளடக்கத்தின் செங்குத்து சீரமைப்பை (மேல், கீழ், அல்லது நடு போன்றவை) அமைக்கிறது.
குறிப்பு:
இயல்பாக, அட்டவணையில் உள்ள உள்ளடக்கத்தின் செங்குத்து சீரமைப்பு நடு (middle) ஆகும் (<th> மற்றும் <td> இரண்டு உறுப்புகளுக்கும்).
பின்வரும் எடுத்துக்காட்டு <td> உறுப்புகளுக்கான செங்குத்து உரை சீரமைப்பை கீழ் (bottom) ஆக அமைக்கிறது:
| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Example
<td> உறுப்புகளுக்கு செங்குத்து சீரமைப்பை கீழ் (bottom) ஆக அமைக்கவும்:
td {
height: 50px;
vertical-align: bottom;
}Exercise
<td> உறுப்புகளுக்குள் உள்ள உள்ளடக்கத்தின் இயல்புநிலை கிடைமட்ட சீரமைப்பு என்ன?