CSS Tables
HTML அட்டவணைகளை CSS மூலம் பெரிதும் மேம்படுத்தலாம்:
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Berglunds snabbköp | Christina Berglund | Sweden |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Königlich Essen | Philip Cramer | Germany |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
CSS Table Borders
அட்டவணை எல்லைகளின் அகலம், பாணி மற்றும் நிறத்தைக் குறிப்பிட CSS border பண்பு பயன்படுத்தப்படுகிறது.
border பண்பானது பின்வரும் குறுகிய பண்புகளுக்கானது:
- border-width - எல்லையின் அகலத்தை அமைக்கிறது
- border-style - எல்லையின் பாணியை அமைக்கிறது (தேவை)
- border-color - எல்லையின் நிறத்தை அமைக்கிறது
கீழே உள்ள எடுத்துக்காட்டு <table>, <th>, மற்றும் <td> உறுப்புகளுக்கு 1px திடமான எல்லையைக் குறிப்பிடுகிறது:
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
Example
table, th, td {
border: 1px solid;
}CSS Table Border Color
கீழே உள்ள எடுத்துக்காட்டு <table>, <th>, மற்றும் <td> உறுப்புகளுக்கு 1px திடமான பச்சை எல்லையைக் குறிப்பிடுகிறது:
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
Example
table, th, td {
border: 1px solid green;
}ஏன் இரட்டை எல்லைகள்?
மேலே உள்ள எடுத்துக்காட்டுகளில் உள்ள அட்டவணைகளுக்கு இரட்டை எல்லைகள் இருப்பதைக் கவனிக்கவும். இது <table>, <th>, மற்றும் <td> உறுப்புகள் தனித்தனி எல்லைகளைக் கொண்டிருப்பதால் ஏற்படுகிறது.
இரட்டை எல்லைகளை அகற்ற, கீழே உள்ள எடுத்துக்காட்டைப் பாருங்கள்.
CSS Collapse Table Borders
CSS border-collapse பண்பு அட்டவணை எல்லைகள் ஒற்றை எல்லையாக சுருக்கப்பட வேண்டுமா அல்லது நிலையான HTML இல் உள்ளதைப் போல் பிரிக்கப்பட வேண்டுமா என்பதை அமைக்கிறது.
இந்த பண்பு பின்வரும் மதிப்புகளில் ஒன்றைக் கொண்டிருக்கலாம்:
- separate - இயல்புநிலை மதிப்பு. எல்லைகள் பிரிக்கப்படுகின்றன; ஒவ்வொரு கலமும் அதன் சொந்த எல்லைகளைக் காண்பிக்கும்
- collapse - எல்லைகள் சாத்தியமானபோது ஒற்றை எல்லையாக சுருக்கப்படுகின்றன
பின்வரும் அட்டவணை சுருக்கப்பட்ட எல்லைகளைக் கொண்டுள்ளது:
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
Example
border-collapse பண்பைப் பயன்படுத்துதல்:
table {
border-collapse: collapse;
}CSS Table Padding
அட்டவணையில் உள்ள எல்லை மற்றும் உள்ளடக்கத்திற்கு இடையே உள்ள இடத்தைக் கட்டுப்படுத்த, <td> மற்றும் <th> உறுப்புகளில் padding பண்பைப் பயன்படுத்தவும்:
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Example
th, td {
padding: 10px;
}CSS Border Spacing
CSS border-spacing பண்பு அடுத்தடுத்த கலங்களின் எல்லைகளுக்கு இடையே உள்ள தூரத்தை அமைக்கிறது.
குறிப்பு:
இந்த பண்பு border-collapse "separate" என அமைக்கப்பட்டிருக்கும்போது மட்டுமே செயல்படும்.
பின்வரும் அட்டவணையில் 15px border-spacing உள்ளது:
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
Example
border-spacing பண்பைப் பயன்படுத்துதல்:
table {
border-collapse: separate;
border-spacing: 15px;
}CSS Outside Table Borders
அட்டவணையைச் சுற்றி மட்டும் எல்லை வேண்டும் என்றால் (உள்ளே அல்ல), <table> உறுப்புக்கு மட்டும் border பண்பைக் குறிப்பிடவும்:
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
Example
table {
border: 1px solid;
}Exercise
ஒரு அட்டவணையில் இரட்டை எல்லைகளை அகற்ற எந்த CSS பண்பு பயன்படுத்தப்படுகிறது?