CSS Table Styling

அட்டவணைகளை கவர்ச்சிகரமாக வடிவமைக்கவும்

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;
  text-align: left;
}

CSS Horizontal Dividers

அட்டவணைக்கு கிடைமட்ட பிரிப்பான்களை உருவாக்க, <th> மற்றும் <td> உறுப்புகளுக்கு border-bottom பண்பைச் சேர்க்கவும்:

First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Example

th, td {
  border-bottom: 1px solid #ddd;
}

CSS Hoverable Table

சுட்டியை நகர்த்தும்போது அட்டவணை வரிசைகளை முன்னிலைப்படுத்த <tr> இல் CSS :hover தேர்ந்தெடுப்பியைப் பயன்படுத்தவும்:

First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Example

tr:hover {background-color: coral;}

CSS Zebra-striped Table

சீப்ரா-பட்டை அட்டவணைகளுக்கு, nth-child() தேர்ந்தெடுப்பியைப் பயன்படுத்தி அனைத்து இரட்டை (அல்லது ஒற்றைப்படை) அட்டவணை வரிசைகளுக்கும் பின்னணி நிறத்தைச் சேர்க்கவும்:

First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Example

tr:nth-child(even) {background-color: #f2f2f2;}

CSS Table Color

கீழே உள்ள எடுத்துக்காட்டு <th> உறுப்புகளுக்கு ஒரு பின்னணி நிறம் மற்றும் உரை நிறத்தைக் குறிப்பிடுகிறது:

First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Example

th {
  background-color: #04AA6D;
  color: white;
}

Exercise

இது என்ன? இந்தப் பக்கத்தின் தலைப்புகள் பற்றி சில கேள்விகளுக்கு பதிலளிப்பதன் மூலம் உங்கள் திறமைகளை சோதிக்கவும்.

🎯 th மற்றும் td க்கான padding மற்றும் alignment ஐ அமைக்க சரியான CSS பண்புகளை இழுத்து விடவும்.

th, td {
  : 15px;
  : left;
}
padding
margin
text-align
align
border
color