ব্লগার ওয়েবসাইটে কিভাবে রিসপেনসিভ টেবিল বানাবেন | how to make responaive table in blogger website
আজকের আর্টিকেলে আমরা শিখব কিভাবে আপনারা আপনাদের ব্লগার ওয়েবসাইটের জন্য Responsive Table তৈরি করবেন। বন্ধুরা আপনারা যদি জব ওয়েবসাইট তৈরি করেন কিভাবে কোন অ্যাপ্লিকেট ওয়েবসাইট তৈরি করেন তাহলে কিন্তু অবশ্যই আপনাদেরকে টেবিলের প্রয়োজন পড়বে না হলে আপনি আপনার কনটেন্ট সুন্দর করে গুছিয়ে আপনার ইউজারদের সামনে তুলে ধরতে পারবেন না।
রিস্পনসিভ টেবিলের দ্বারা আপনি আপনার ওয়েবসাইটের দেওয়া তথ্য গুলি সুন্দরভাবে visitor দের সামনে উপস্থাপন করতে পারবেন। তাহলে বন্ধুরা আপনারা যদি একজন ব্লগার হয়ে থাকেন তাহলে অবশ্যই আমাদের এই আর্টিকেলটি সম্পন্ন করবেন এবং জেনে নেবেন কিভাবে আপনারা Responsive Table তৈরি করবেন।
How to Making Responsive Table on Blogger Posst?
আপনার ব্লগার পোস্ট এর ভিতর Responsive টেবিল সেট করবার জন্য আপনাদেরকে যে সমস্ত স্টেপ ফলো করতে হবে আমরা তা নিচে বিস্তারিত আলোচনা করে দিলাম।
- নিচে দেওয়া CSS কোড দিকে প্রথমে কপি করতে হবে
- তারপর আপনি আপনার ব্লগার এ ড্যাসবোডে যাবেন
- থিম অপশনটিতে ক্লিক করবেন
- Edit Html ক্লিক করবেন
- Past করবেন </head> অপশনটির ওপরে সমস্ত css code
| Name | Location | Age | |
|---|---|---|---|
| Prokash Technical | prokashdurlov1@gmail. com | India | 24 |
| Mark Ruffalo | [email protected] | United States | 54 |
| Tom Holland | [email protected] | United Kingdom | 25 |
| Tony Stark | [email protected] | United States | 57 |
| Benedict | [email protected] | UK | 45 |
এই টাইপেরResponsive Table তৈরি করার জন্য আপনাদেরকে আপনার পোস্টের ভিতরে নির্দিষ্ট জায়গায় বসিয়ে দিতে হবে।
HTML
<div class="Side_scroll_table">
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Location</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abhishek</td>
<td>[email protected]</td>
<td>India</td>
<td>24</td>
</tr>
<tr>
<td>Mark Ruffalo</td>
<td>[email protected]</td>
<td>United States</td>
<td>54</td>
</tr>
<tr>
<td>Tom Holland</td>
<td>[email protected]</td>
<td>United Kingdom</td>
<td>25</td>
</tr>
<tr>
<td>Tony Stark</td>
<td>[email protected]</td>
<td>United States</td>
<td>57</td>
</tr>
<tr>
<td>Benedict</td>
<td>[email protected]</td>
<td>UK</td>
<td>45</td>
</tr>
</tbody>
</table>
</div>
<style>
.Side_scroll_table {margin: 1.5rem 0;overflow: auto;white-space: nowrap;}
table {border-collapse: collapse;border-spacing: 0;width: 100%;}
th, td {padding: 1rem 1.5rem;text-align: left;}
th {background-color: #008c5f; /* header background color */ color: #fff; /* header text color */font-weight: 600;}
tr {padding: 0;}
td {vertical-align: top;}
tr:nth-child(even) td {background-color: rgba(0, 0, 0, .075); /* striped background color */}
</style>
Note: বন্ধুরা হয়তো এবার আপনারা আমাদের এই আর্টিকেল থেকে কিছু বিষয়বস্তু বুঝতে পেরেছেন কিভাবে আপনারা আপনাদের ওয়েবসাইটের জন্য Responsive Table তৈরি করবেন। আশা করি আপনাদের দেওয়া এই আর্টিকেলটি আপনাদের যদি কোন কাজে লেগে থাকে আপনারা অবশ্যই আমাদের কমেন্ট বক্সে জানাবেন।