सीएसएस के साथ स्टाइलिंग टेबल

<घंटा/>

CSS के साथ तालिकाओं को स्टाइल करने के लिए, हम सीमाएँ, पतन, चौड़ाई और ऊँचाई निर्धारित कर सकते हैं। हम पैडिंग भी सेट कर सकते हैं, उसमें टेक्स्ट को संरेखित कर सकते हैं, आदि। आइए कुछ उदाहरण देखें -

उदाहरण

CSS में किसी तालिका में बॉर्डर जोड़ने के लिए, बॉर्डर प्रॉपर्टी का उपयोग करें। आइए अब एक उदाहरण देखें -

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
   border: 2px dashed orange;
}
</style>
</head>
<body>
<h2>Team Ranking Table</h2>
<table>
<tr>
<th>Team</th>
<th>Rank</th>
<th>Points</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td>England</td>
<td>2</td>
<td>180</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td>NewZealand</td>
<td>4</td>
<td>130</td>
</tr>
<tr>
<td>SouthAfrica</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>WestIndies</td>
<td>6</td>
<td>80</td>
</tr>
<tr>
<td>Pakistan</td>
<td>7</td>
<td>70</td>
</tr>
</table>
</body>
</html>

आउटपुट

सीएसएस के साथ स्टाइलिंग टेबल

उदाहरण

तालिका सीमाओं को संक्षिप्त करने के लिए, सीएसएस में सीमा-संकुचित संपत्ति का उपयोग करें। आइए टेबल बॉर्डर को संक्षिप्त करने के लिए एक उदाहरण देखें -

<!DOCTYPE html>
<html>
<head>
<style>
table {
   border-collapse: collapse;
   background-color: black;
   color: white;
}
th, td {
   border: 2px dashed yellow;
}
</style>
</head>
<body>
<h2>Team Ranking Table</h2>
<table>
<tr>
<th>Team</th>
<th>Rank</th>
<th>Points</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td>England</td>
<td>2</td>
<td>180</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td>NewZealand</td>
<td>4</td>
<td>130</td>
</tr>
<tr>
<td>SouthAfrica</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>WestIndies</td>
<td>6</td>
<td>80</td>
</tr>
<tr>
<td>Pakistan</td>
<td>7</td>
<td>70</td>
</tr>
</table>
</body>
</html>

आउटपुट

सीएसएस के साथ स्टाइलिंग टेबल

उदाहरण

बॉर्डर और कंटेंट के बीच स्पेस सेट करने के लिए, नीचे दिए गए उदाहरण के अनुसार पैडिंग प्रॉपर्टी का उपयोग करें -

<!DOCTYPE html>
<html>
<head>
<style>
table {
   border: 1px solid black;
   background-color: blue;
   color: white;
}
th, td {
   border: 1px solid black;
   padding: 20px;
   text-align: center;
}
table#demo {
   table-layout: fixed;
   width: 100%;
}
</style>
</head>
<body>
<h2>Team Ranking Table</h2>
<table id="demo">
<tr>
<th>Team</th>
<th>Rank</th>
<th>Points</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td>England</td>
<td>2</td>
<td>180</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td>NewZealand</td>
<td>4</td>
<td>130</td>
</tr>
<tr>
<td>SouthAfrica</td>
<td>5</td>
<td>100</td>
</tr>
</table>
</body>
</html>

आउटपुट

सीएसएस के साथ स्टाइलिंग टेबल