Use of Table tag /টেবিল ট্যাগের ব্যবহার :
বন্ধুরা সবাই কেমন আছেন , আশা করছি সবাই ভালো আছেন, তো আজকে টিউটোরিয়াল টিতে আমরা শিখবো কিভাবে একটি টেবিল তৈরি করা হয় HTML ব্যবহার করে -----
আপনারা নিশ্চয় অনেক ওয়েবসাইট নিয়ে ঘাটাঘটি করেছেন , তো সেইসব ওয়েবসাইটে কোনো টেবিল ভিত্তিক ডাটা নিশ্চয় লক্ষ্য করেছেন বা খেলাধুলোর স্কোরবোর্ড বা বিভিন্ন শেয়ার মার্কেটের ডাটা গুলি টেবিলের মধ্যে সুন্দর ভাবে সাজিয়ে রাখা হয় এই সমস্ত কাজ গুলো টেবিল ট্যাগের সাহায্য নিয়ে করা হয় । টেবিল ভিত্তিক ডাটা দেখানোর জন্য HTML এর বেশ কিছু ট্যাগ আছে যেগুলি দিয়ে নানান ধরণের টেবিল তৈরি করা যায় ।
তো আসুন দেখে নেই HTML টেবিল ট্যাগসমূহ ---
<html>
<head>
<title>Use of HTML table tag</title>
<style>
table{
font-family: arial,sans-serif;
border-collapse: collapse;
width: 100%;
}
td,th{
border: 1px solid black;
text-align: center;
padding: 8px;
}
tr:nth-child(even){
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<th>Players Name</th>
<th>Team Position</th>
<th>Country Name</th>
</tr>
<tr>
<td>Rohit Sharma</td>
<td>Batsman</td>
<td>India</td>
</tr>
<tr>
<td>Virat Kholi</td>
<td>Batsman</td>
<td>India</td>
</tr>
<tr>
<td>Jasprit Bumrah</td>
<td>Bowler</td>
<td>India</td>
</tr>
</tbody>
</table>
</body>
</html>
উপরের কোড টুকু কপি করে নোটপ্যাড ওপেন করে পেস্ট করুন তারপরে ফাইল টিকে index.html নামে সেভ করে যে কোনো ব্রাউজারে রান করালেই বুঝতে পারবেন সহজেই ।
আশা করি আপনাদের জন্য এই ছোট্টো টিউটোরিয়ালটি যথাযোগ্য হবে ।
ধন্যবাদ !!
 |
| HTML Table Example |
<table>
টেবিল তৈরি করার জন্য ব্যবহার করা হয় ।
<th>
টেবিলের হেডার তৈরি করার জন্য ব্যাবহার করা হয় ।
<tr>
টেবিলের সারি তৈরি করার জন্য ব্যবহার করা হয় ।
<td>
টেবিলের ডাটা তৈরি করার জন্য ব্যবহার করা হয় ।
<caption>
টেবিলের ক্যাপশন সেট করার জন্য তৈরি করা হয় ।
<colgroup>
একাধিক কলমকে গ্রূপ করার জন্য ব্যবহার করা হয় ।
<thead>
টেবিলের হেডার সেট করার জন্য ব্যবহার করা হয় ।
<tbody>
টেবিলের বডি সেট করার জন্য ব্যবহার করা হয় ।
<tfoot>
টেবিলের ফুটার সেট করার জন্য ব্যবহার করা হয় ।
উদাহরণ :
<head>
<title>Use of HTML table tag</title>
<style>
table{
font-family: arial,sans-serif;
border-collapse: collapse;
width: 100%;
}
td,th{
border: 1px solid black;
text-align: center;
padding: 8px;
}
tr:nth-child(even){
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<th>Players Name</th>
<th>Team Position</th>
<th>Country Name</th>
</tr>
<tr>
<td>Rohit Sharma</td>
<td>Batsman</td>
<td>India</td>
</tr>
<tr>
<td>Virat Kholi</td>
<td>Batsman</td>
<td>India</td>
</tr>
<tr>
<td>Jasprit Bumrah</td>
<td>Bowler</td>
<td>India</td>
</tr>
</tbody>
</table>
</body>
</html>
উপরের কোড টুকু কপি করে নোটপ্যাড ওপেন করে পেস্ট করুন তারপরে ফাইল টিকে index.html নামে সেভ করে যে কোনো ব্রাউজারে রান করালেই বুঝতে পারবেন সহজেই ।
আশা করি আপনাদের জন্য এই ছোট্টো টিউটোরিয়ালটি যথাযোগ্য হবে ।
ধন্যবাদ !!
0 মন্তব্যসমূহ