সিএসএস দিয়ে টেবিল স্টাইল করার জন্য, আমরা সীমানা সেট করতে পারি, ভেঙে পড়তে পারি, প্রস্থ এবং উচ্চতা সেট করতে পারি। আমরা প্যাডিং, এলিগ টেক্সট ইত্যাদিও সেট করতে পারি। আসুন কিছু উদাহরণ দেখি -
উদাহরণ
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> আউটপুট
উদাহরণ
টেবিলের সীমানা ভেঙে ফেলার জন্য, CSS-এ বর্ডার-কলেপ প্রপার্টি ব্যবহার করুন। টেবিলের সীমানা −
কেল্যাপস করার একটা উদাহরণ দেখা যাক<!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> আউটপুট
