CSS দিয়ে টেবিল স্টাইলিং: বর্ডার, কোল্যাপ্স, ক্যাপশন, এমপ্টি-সেলস, টেবিল-লে আউট

CSS ব্যবহার করে টেবিলের জন্য স্টাইল সংজ্ঞায়িত করা যায়।

• border

  CSS border প্রপার্টি border-width, border-style এবং border-color সংজ্ঞায়িত করতে ব্যবহৃত হয়।

• border-collapse

  এই প্রপার্টি নির্দেশ করে যে

উদাহরণ

নিচের উদাহরণগুলো টেবিল স্টাইলিং বোঝায়:

<!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>

আউটপুট

এটি নিচের আউটপুট দেবে:

উদাহরণ

<!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 border-style প্রপার্টি: বর্ডার স্টাইল ও পক্ষাবদ্ধ স্টাইল

CSS এবং JavaScript দিয়ে অ্যাকর্ডিয়ন (Accordion) তৈরি করা

• C প্রোগ্রামিং
• C++
• Redis
• Bash প্রোগ্রামিং
• Python
• Java
• তথ্যশালা
• HTML
• JavaScript
• প্রোগ্রামিং
• CSS
• Ruby
• SQL
• iOS
• Android
• MongoDB
• MySQL
• C#
• PHP
• SQL Server