এইচটিএমএল <table> ট্যাগ
<table> ট্যাগের ব্রাউজার সাপোর্ট
| এলিমেন্ট | Google Chrome | Edge/IE | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
<table> |
সকল ভার্সন | সকল ভার্সন | সকল ভার্সন | সকল ভার্সন | সকল ভার্সন |
সংজ্ঞা ও ব্যবহার
<table> ট্যাগ দ্বারা এইচটিএমএল ডকুমেন্টের মধ্যে টেবিল তৈরি করা হয়।
সাধারনত একটি এইচটিএমএল <table> এলিমেন্টের মধ্যে এক বা একাধিক <tr>, <th>, এবং <td> এলিমেন্ট থাকে।
<tr> এলিমেন্ট দ্বারা টেবিলের সারি, <th> এলিমেন্ট দ্বারা টেবিলের হেডার, এবং
<td> এলিমেন্ট দ্বারা টেবিলের ডাটা বা সেলকে বুঝায়।
<table> এলিমেন্টের মধ্যে আরো যেসব ট্যাগ থাকতে পারেঃ <caption>, <col>, <colgroup>, <thead>, <tfoot>, এবং <tbody>
নিচের উদাহরণে একটি টেবিল তৈরি করে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল table ট্যাগ</title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>মাস</th>
<th>সঞ্চয়</th>
</tr>
<tr>
<td>জানুয়ারি</td>
<td>১০০০/=</td>
</tr>
<tr>
<td>ফেব্রুয়ারি </td>
<td>৫০০/=</td>
</tr>
</table>
</body>
</html>
ফলাফল
এট্রিবিউট
নিচের টেবিলে <table> ট্যাগের এট্রিবিউট, এট্রিবিউটের ভ্যালু এবং তাদের ব্যবহার তুলে ধরা হলোঃ
| এট্রিবিউট | ভ্যালু | বর্ণনা |
|---|---|---|
| align | left center right |
এইচটিএমএল(৫) এ সাপোর্ট করে না। টেক্সট অনুসারে <table> এলিমেন্টের alignment নির্ধারণ করে। |
| bgcolor | rgb(x,x,x) #xxxxxx colorname |
এইচটিএমএল(৫) সাপোর্ট করে না। টেবিলের ব্যাকগ্রাউন্ড কালার সেট করে। |
| border | 1 0 |
টেবিলের বর্ডার নির্ধারণ করার জন্য ব্যবহার করা হয়। |
| cellpadding | pixels | এইচটিএমএল(৫) এ সাপোর্ট করে না। সেল বর্ডার এবং সেল কনটেন্টের মধ্যে স্পেস বা ফাঁকা স্থান নির্ধারণ করে। |
| cellspacing | pixels | এইচটিএমএল(৫) এ সাপোর্ট করে না। দুটি সেলের মধ্যে ফাঁকা স্থান নির্ধারণ করে। |
| frame | void above below hsides lhs rhs vsides box border |
এইচটিএমএল(৫) এ সাপোর্ট করে না। বর্ডারের বাহিরের কোন অংশটি প্রদর্শন করবে তা নির্ধারণ করে। |
| rules | none groups rows cols all |
এইচটিএমএল(৫) এ সাপোর্ট করে না। বর্ডারের ভিতরের কোন অংশটি প্রদর্শন করবে তা নির্ধারণ করে। |
| summary | text | এইচটিএমএল(৫) এ সাপোর্ট করে না। টেবিল কনটেন্টের সংক্ষিপ্ত অংশকে বুঝায়। |
| width | pixels % |
এইচটিএমএল(৫) এ সাপোর্ট করে না। টেবিলের width নির্ধারণ করে। |
<table> ট্যাগে গ্লোবাল এবং ইভেন্ট এট্রিবিউট সাপোর্ট করে কিনা?
| গ্লোবাল এট্রিবিউট | ইভেন্ট এট্রিবিউট |
|---|---|
| সাপোর্ট করে | সাপোর্ট করে |
<table> ট্যাগের ডিফল্ট স্টাইল
অধিকাংশ ব্রাউজারেই <table> এলিমেন্ট নিম্নলিখিত স্টাইল ভ্যালুগুলো সহকারে প্রদর্শিত হয়ঃ
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}