বিভিন্ন ওয়েব সাইটে টেবিল ভিত্তিক ডেটা দেখেছেন নিশ্চয়ই। বিশেষ করে খেলাধুলার সাইটের খেলোয়ারদের স্কোর, প্রোফাইল, সময়সূচি, শেয়ার বাজারের হিসাব ইত্যাদি কাজে টেবিল লাগে। টেবিলভিত্তিক ডেটা দেখানোর জন্য এইচটিএমএল এর বেশকিছু ট্যাগ আছে যেগুলি দিয়ে নানন ধরনের টেবিল তৈরী করা যায়।
এক নজরে এইচটিএমএল টেবিল ট্যাগসমূহ
ট্যাগট্যাগের বিবরণ
<table>টেবিল তৈরি করার জন্য ব্যবহার করা হয়।
<th>টেবিলের হেডার তৈরি করার জন্য ব্যবহার করা হয়।
<tr>টেবিলের সারি(row) তৈরি করার জন্য ব্যবহার করা হয়।
<td>টেবিলের সেল বা ডেটা তৈরি করার জন্য ব্যবহার করা হয়।
<caption>টেবিলের ক্যাপশন সেট করার জন্য ব্যবহার করা হয়।
<colgroup>একের অধিক কলামকে গ্রুপ করার জন্য ব্যবহার করা হয়
।<col><colgroup> এলিমেন্টের মধ্যে কলাম প্রোপার্টি সেট করার জন্য ব্যবহার করা হয়
।<thead>টেবিলের হেডার সেট করার জন্য ব্যবহার করা হয়।
<tbody>টেবিলের বডি সেট করার জন্য ব্যবহার করা হয়।
<tfoot>টেবিলের ফুটার সেট করার জন্য ব্যবহার করা হয়।
উদাহরণ প্রোগ্রাম:
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল টেবিলের উদাহরণ</title>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<th>খেলোয়াড়ের নাম</th>
<th>দলীয় অবস্থান</th>
<th>দেশ</th>
</tr>
<tr>
<td>মাশরাফি বিন মূর্তজা</td>
<td>ক্যাপ্টেন এবং বোলার</td>
<td>বাংলাদেশ</td>
</tr>
<tr>
<td>সাব্বির রহমান</td>
<td>ব্যাটসম্যান</td>
<td>বাংলাদেশ</td>
</tr>
<tr>
<td>মুস্তাফিজুর রহমান</td>
<td>বোলার</td>
<td>বাংলাদেশ</td>
</tr>
<tr>
</tbody>
</table>
</body>
</html>
এইচটিএমএল টেবিল তৈরি
এইচটিএমএল টেবিল তৈরি করার জন্য <table> ট্যাগ ব্যবহার করা হয়।
<tr> ট্যাগের মাধ্যমে টেবিলের সারি(row) এবং <th> ট্যাগের মাধ্যমে টেবিলের হেডিং নির্ধারণ করা হয়। ডিফল্টভাবে হেডিংগুলো বোল্ড হয় এবং টেক্সটগুলো টেবিল সেলের মাঝখানে থাকে।
<td> ট্যাগের মাধ্যমে টেবিলের ডেটা বা তথ্যগুলো টেবিলের মধ্যে যোগ করা হয়। <td> ট্যাগ এর সংখ্যা যত বাড়বে টেবিলের কলাম সংখ্যাও তত বাড়বে।
উদাহরণ প্রোগ্রাম:
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল টেবিল</title>
</head>
<body>
<table border="1" style="width:100%">
<tr>
<th>নাম</th>
<th>বয়স</th>
<th>ঠিকানা</th>
</tr>
<tr>
<td>সুমি আক্তার</td>
<td>৫০</td>
<td>খুলনা</td>
</tr>
<tr>
<td>রোকেয়া আক্তার</td>
<td>৮৫</td>
<td>রাজশাহী</td>
</tr>
</table>
</body>
</html>
বি:দ্র: Output দেখার জন্যে একটা নোটপ্যাড open করে উপরের উদাহরনের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি যে কোন Browser দিয়ে open করুন।
এক নজরে এইচটিএমএল টেবিল ট্যাগসমূহ
ট্যাগট্যাগের বিবরণ
<table>টেবিল তৈরি করার জন্য ব্যবহার করা হয়।
<th>টেবিলের হেডার তৈরি করার জন্য ব্যবহার করা হয়।
<tr>টেবিলের সারি(row) তৈরি করার জন্য ব্যবহার করা হয়।
<td>টেবিলের সেল বা ডেটা তৈরি করার জন্য ব্যবহার করা হয়।
<caption>টেবিলের ক্যাপশন সেট করার জন্য ব্যবহার করা হয়।
<colgroup>একের অধিক কলামকে গ্রুপ করার জন্য ব্যবহার করা হয়
।<col><colgroup> এলিমেন্টের মধ্যে কলাম প্রোপার্টি সেট করার জন্য ব্যবহার করা হয়
।<thead>টেবিলের হেডার সেট করার জন্য ব্যবহার করা হয়।
<tbody>টেবিলের বডি সেট করার জন্য ব্যবহার করা হয়।
<tfoot>টেবিলের ফুটার সেট করার জন্য ব্যবহার করা হয়।
উদাহরণ প্রোগ্রাম:
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল টেবিলের উদাহরণ</title>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<th>খেলোয়াড়ের নাম</th>
<th>দলীয় অবস্থান</th>
<th>দেশ</th>
</tr>
<tr>
<td>মাশরাফি বিন মূর্তজা</td>
<td>ক্যাপ্টেন এবং বোলার</td>
<td>বাংলাদেশ</td>
</tr>
<tr>
<td>সাব্বির রহমান</td>
<td>ব্যাটসম্যান</td>
<td>বাংলাদেশ</td>
</tr>
<tr>
<td>মুস্তাফিজুর রহমান</td>
<td>বোলার</td>
<td>বাংলাদেশ</td>
</tr>
<tr>
</tbody>
</table>
</body>
</html>
এইচটিএমএল টেবিল তৈরি
এইচটিএমএল টেবিল তৈরি করার জন্য <table> ট্যাগ ব্যবহার করা হয়।
<tr> ট্যাগের মাধ্যমে টেবিলের সারি(row) এবং <th> ট্যাগের মাধ্যমে টেবিলের হেডিং নির্ধারণ করা হয়। ডিফল্টভাবে হেডিংগুলো বোল্ড হয় এবং টেক্সটগুলো টেবিল সেলের মাঝখানে থাকে।
<td> ট্যাগের মাধ্যমে টেবিলের ডেটা বা তথ্যগুলো টেবিলের মধ্যে যোগ করা হয়। <td> ট্যাগ এর সংখ্যা যত বাড়বে টেবিলের কলাম সংখ্যাও তত বাড়বে।
উদাহরণ প্রোগ্রাম:
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল টেবিল</title>
</head>
<body>
<table border="1" style="width:100%">
<tr>
<th>নাম</th>
<th>বয়স</th>
<th>ঠিকানা</th>
</tr>
<tr>
<td>সুমি আক্তার</td>
<td>৫০</td>
<td>খুলনা</td>
</tr>
<tr>
<td>রোকেয়া আক্তার</td>
<td>৮৫</td>
<td>রাজশাহী</td>
</tr>
</table>
</body>
</html>
বি:দ্র: Output দেখার জন্যে একটা নোটপ্যাড open করে উপরের উদাহরনের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি যে কোন Browser দিয়ে open করুন।
Post a Comment