HTML அட்டவணை பாணியமைப்பு
உங்கள் அட்டவணைகள் சிறப்பாகத் தோன்ற CSS ஐப் பயன்படுத்தவும்.
HTML அட்டவணை - வரிக்குதிரை கோடுகள்
ஒவ்வொரு மற்ற அட்டவணை வரிசையிலும் பின்புல நிறத்தைச் சேர்த்தால், நீங்கள் ஒரு நல்ல வரிக்குதிரை கோடுகள் விளைவைப் பெறுவீர்கள்.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
ஒவ்வொரு மற்ற அட்டவணை வரிசை உறுப்பையும் பாணியமைக்க, இந்த வழியில் :nth-child(even) தேர்வியைப் பயன்படுத்தவும்:
எடுத்துக்காட்டு
tr:nth-child(even) {
background-color: #D6EEEE;
}குறிப்பு:
நீங்கள் (even) க்குப் பதிலாக (odd) ஐப் பயன்படுத்தினால், பாணியமைப்பு வரிசை 2,4,6 போன்றவற்றுக்குப் பதிலாக வரிசை 1,3,5 போன்றவற்றில் நடக்கும்.
HTML அட்டவணை - செங்குத்து வரிக்குதிரை கோடுகள்
செங்குத்து வரிக்குதிரை கோடுகளை உருவாக்க, ஒவ்வொரு மற்ற வரிசைக்குப் பதிலாக ஒவ்வொரு மற்ற நெடுவரிசையையும் பாணியமைக்கவும்.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
இந்த வழியில் அட்டவணை தரவு உறுப்புகளுக்கு :nth-child(even) ஐ அமைக்கவும்:
எடுத்துக்காட்டு
td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}குறிப்பு:
தலைப்புகள் மற்றும் வழக்கமான அட்டவணை கலங்கள் இரண்டிலும் பாணியமைப்பை வைத்திருக்க விரும்பினால், :nth-child() தேர்வியை th மற்றும் td உறுப்புகள் இரண்டிலும் வைக்கவும்.
செங்குத்து மற்றும் கிடைமட்ட வரிக்குதிரை கோடுகளை இணைத்தல்
மேலே உள்ள இரண்டு எடுத்துக்காட்டுகளிலிருந்து பாணியமைப்பை இணைக்கலாம் மற்றும் ஒவ்வொரு மற்ற வரிசை மற்றும் ஒவ்வொரு மற்ற நெடுவரிசையிலும் கோடுகள் இருக்கும்.
நீங்கள் ஒரு வெளிப்படையான நிறத்தைப் பயன்படுத்தினால், ஒன்றுடன் ஒன்று சேரும் விளைவைப் பெறுவீர்கள்.
நிறத்தின் வெளிப்படைத்தன்மையைக் குறிப்பிட rgba() நிறத்தைப் பயன்படுத்தவும்:
எடுத்துக்காட்டு
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}கிடைமட்ட பிரிப்பான்கள்
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
ஒவ்வொரு அட்டவணை வரிசையின் கீழே மட்டும் எல்லைகளைக் குறிப்பிட்டால், கிடைமட்ட பிரிப்பான்கள் கொண்ட ஒரு அட்டவணையைப் பெறுவீர்கள்.
கிடைமட்ட பிரிப்பான்களைப் பெற அனைத்து tr உறுப்புகளுக்கும் border-bottom பண்பைச் சேர்க்கவும்:
எடுத்துக்காட்டு
tr {
border-bottom: 1px solid #ddd;
}ஹோவர் செய்யக்கூடிய அட்டவணை
சுட்டியைக் கொண்டு செல்லும் போது அட்டவணை வரிசைகளை முன்னிலைப்படுத்த tr இல் :hover தேர்வியைப் பயன்படுத்தவும்:
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
(மேலே உள்ள வரிசைகளின் மீது சுட்டியைக் கொண்டு செல்லவும்)
எடுத்துக்காட்டு
tr:hover {background-color: #D6EEEE;}