স্টাইলিং টেবিল CSS এর সাথে কাজ করে

আমরা CSS ব্যবহার করে টেবিলের জন্য শৈলী সংজ্ঞায়িত করতে পারি। নিম্নলিখিত বৈশিষ্ট্যগুলি

এবং এর উপাদানগুলি −

স্টাইল করতে ব্যবহৃত হয়

সীমান্ত
CSS বর্ডার প্রপার্টি বর্ডার-প্রস্থ, বর্ডার-স্টাইল এবং বর্ডার-রং নির্ধারণ করতে ব্যবহৃত হয়।
সীমান্ত-পতন
একটি

উপাদানগুলির একটি ভাগ করা বা পৃথক সীমানা থাকা উচিত কিনা তা নির্দিষ্ট করতে এই বৈশিষ্ট্যটি ব্যবহার করা হয়৷

৷

ক্যাপশন

ক্যাপশন-সাইড প্রপার্টিটি টেবিল ক্যাপশন বক্সটিকে উল্লম্বভাবে অবস্থান করতে ব্যবহৃত হয়।

খালি-কোষ

এই বৈশিষ্ট্যটি একটি টেবিলের খালি কক্ষের প্রদর্শন নির্দিষ্ট করতে ব্যবহৃত হয়।

টেবিল-লেআউট একটি টেবিলের সারি, কলাম এবং ঘর সাজানোর জন্য ব্রাউজার দ্বারা ব্যবহার করা অ্যালগরিদমকে সংজ্ঞায়িত করতে।

উদাহরণ

নিম্নলিখিত উদাহরণগুলি টেবিলের স্টাইলিং-

চিত্রিত করে

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: 'Bookman Old Style', serif;
}
th {
   letter-spacing: 1.9px;
}
#one {
   border-right: thick solid blue;
}
td {
   text-align: center;
}
</style>
</head>
<body>
<h2>Employee List</h2>
<div>
<table>
<tr>
<th id="one">Employee</th>
<th>Department</th>
</tr>
<tr>
<td>John </td>
<td>Marketing</td>
</tr>
<tr>
<td>Brad</td>
<td>Finance</td>
</tr>
<tr>
<td>Tim </td>
<td>IT</td>
</tr>
<tr>
<td>Steve</td>
<td>Operations</td>
</tr>
</table>
</div>
</body>
</html>

আউটপুট

এটি নিম্নলিখিত আউটপুট দেয় -

স্টাইলিং টেবিল CSS এর সাথে কাজ করে

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
table {
   float: left;
   empty-cells: hide;
   box-shadow: inset 0 0 4px orange;
}
tr {
   box-shadow: inset 0 0 10px greenyellow;
}
td {
   font-style: italic;
   box-shadow: inset 0 0 8px red;
}
table,td {
   margin: 6px;
   padding: 6px;
   border: 1px solid black;
}
table
</style>
</head>
<body>
<table>
<caption>Demo Table</caption>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
<tr>
<td>demo</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>demo</td>
</tr>
<tr>
<td></td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html>

আউটপুট

এটি নিম্নলিখিত আউটপুট দেয় -

স্টাইলিং টেবিল CSS এর সাথে কাজ করে

CSS-এ বর্ডার-স্টাইল প্রপার্টি

কিভাবে CSS এবং JavaScript দিয়ে অ্যাকর্ডিয়ন তৈরি করবেন?