सीएसएस तालिका शैली

टेबल पैडिंग

किसी तालिका में बॉर्डर और सामग्री के बीच की जगह को नियंत्रित करने के लिए, padding<td> और <th> तत्वों पर संपत्ति का उपयोग करें:

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

पहला नाम	अंतिम नाम	बचत
पीटर	दौड़ के लिये कभी भी न उतारा गया घोड़ा	$100
लोइस	दौड़ के लिये कभी भी न उतारा गया घोड़ा	$150
जो	स्वानसन	$300

border-bottomक्षैतिज विभाजकों के लिए गुण को <वें> और <td> में जोड़ें :

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

:hoverमाउस पर तालिका पंक्तियों को हाइलाइट करने के लिए <tr> पर चयनकर्ता का उपयोग करें :

पहला नाम	अंतिम नाम	बचत
पीटर	दौड़ के लिये कभी भी न उतारा गया घोड़ा	$100
लोइस	दौड़ के लिये कभी भी न उतारा गया घोड़ा	$150
जो	स्वानसन	$300

tr:hover {background-color: yellow;}

पहला नाम	अंतिम नाम	बचत
पीटर	दौड़ के लिये कभी भी न उतारा गया घोड़ा	$100
लोइस	दौड़ के लिये कभी भी न उतारा गया घोड़ा	$150
जो	स्वानसन	$300

ज़ेबरा-धारीदार तालिकाओं के लिए, nth-child()चयनकर्ता का उपयोग करें और background-colorसभी सम (या विषम) तालिका पंक्तियों में जोड़ें:

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

नीचे दिया गया उदाहरण <th> तत्वों की पृष्ठभूमि का रंग और टेक्स्ट का रंग निर्दिष्ट करता है:

पहला नाम	अंतिम नाम	बचत
पीटर	दौड़ के लिये कभी भी न उतारा गया घोड़ा	$100
लोइस	दौड़ के लिये कभी भी न उतारा गया घोड़ा	$150
जो	स्वानसन	$300

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