আমরা CSS ব্যবহার করে টেবিলের জন্য শৈলী সংজ্ঞায়িত করতে পারি। নিম্নলিখিত বৈশিষ্ট্যগুলি প্রায়শই
এবং এর উপাদানগুলি - শৈলীতে ব্যবহৃত হয়- সীমান্ত
CSS বর্ডার প্রপার্টি বর্ডার-প্রস্থ, বর্ডার-স্টাইল এবং বর্ডার-রং নির্ধারণ করতে ব্যবহৃত হয়।
- সীমান্ত-পতন
একটি
ক্যাপশন-সাইড প্রপার্টিটি টেবিল ক্যাপশন বক্সটিকে উল্লম্বভাবে অবস্থান করতে ব্যবহৃত হয়।
এই বৈশিষ্ট্যটি একটি টেবিলের খালি কক্ষের প্রদর্শন নির্দিষ্ট করতে ব্যবহৃত হয়।
একটি টেবিলের সারি, কলাম এবং ঘর সাজানোর জন্য ব্রাউজার দ্বারা ব্যবহার করা অ্যালগরিদমকে সংজ্ঞায়িত করতে৷
উদাহরণ
নিম্নলিখিত উদাহরণগুলি টেবিলের স্টাইলিং-
চিত্রিত করে<!DOCTYPE html> <html> <head> <style> table, table * { border: thin solid; padding: 5px; font-style: italic; } caption { caption-side: bottom; } td { box-shadow: inset 0 0 6px green; } </style> </head> <body> <table> <caption>Demo caption</caption> <tr> <td>demo</td> </tr> <tr> <td>demo</td> <td></td> </tr> <tr> <td>demo</td> <td>demo</td> <td></td> </tr> </table> </body> </html>
আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় -
উদাহরণ
<!DOCTYPE html> <html> <head> <style> div { display: flex; float: left; } table { border: 3px solid black; } td { border: 3px solid lightgreen; } th { border: 3px solid lightblue; } #t2 { border-collapse: collapse; } </style> </head> <body> <h2>Team Rankings</h2> <div> <table id="t1"> <tr> <th>Team (Test)</th> <th>Rank </th> </tr> <tr> <td>India </td> <td>1 </td> </tr> <tr> <td>Australia</td> <td>2</td> </tr> </table> </div> <div> <table id="t2"> <tr> <th>Team (ODI) </th> <th>Rank </th> </tr> <tr> <td>India </td> <td>1 </td> </tr> <tr> <td>England</td> <td>2</td> </tr> </table> </div> </body> </html>
আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় -
- C প্রোগ্রামিং
- C++
- Redis
- BASH প্রোগ্রামিং
- Python
- Java
- তথ্যশালা
- HTML
- JavaScript
- প্রোগ্রামিং
- CSS
- Ruby
- SQL
- IOS
- Android
- mongodb
- MySQL
- C#
- PHP
- SQL সার্ভার