HTML <td> ট্যাগ
- পূর্ববর্তী পৃষ্ঠা <tbody>
- পরবর্তী পৃষ্ঠা <template>
সংজ্ঞা ও ব্যবহার
<td> ট্যাগ এইচটিএমএল টেবিলের প্রমাণ্য ডাটা সেল নির্দিষ্ট করে।
HTML টেবিলের দুই ধরণের সেল রয়েছে:
- শিরোনাম সেল - শিরোনাম তথ্য যুক্ত (ক্রেস ইউজ): <th> এলিমেন্ট সৃষ্টি ()
- ডাটা সেল - ডাটা যুক্ত (ক্রেস ইউজ):
<td>এলিমেন্ট সৃষ্টি ()
ডিফল্টে,<td> তার মধ্যের টেক্সট সাধারণ এবং ডানদিকে সামান্য করা হয়。
<th> তার মধ্যের টেক্সট ডিফল্টে বড় এবং মধ্যস্থানীয় হয়。
অন্যান্য দেখুন:
HTML শিক্ষা:HTML ট্যাবল
HTML DOM রেফারেন্স ম্যানুয়েল:TableData অবজেক্ট
ক্রেস শিক্ষা:টেবিল স্টাইল সেট
প্রকৃতি
উদাহরণ 1
একটি সাধারণ এইচটিএমএল টেবিল, দুই সারি এবং চারটি টেবিল সেল রয়েছে:
<table>
<tr>
<td>সেল A</td>
<td>সেল B</td>
</tr>
<tr>
<td>সেল C</td>
<td>সেল D</td>
</tr>
</table>
উদাহরণ 2
কিভাবে সামান্য করা যায় <td> এর ভিতরের কিভাবে উপরোক্তভাবে সাজানো যায় (CSS ব্যবহার করে):
<table style="width:100%">
<tr>
<th>মাস</th>
<th>সঞ্চয়</th>
</tr>
<tr>
<td>জানুয়ারী</td>
<td style="text-align:right">￥3400</td>
</tr>
<tr>
<td>ফেব্রুয়ারী</td>
<td style="text-align:right">￥4500</td>
</tr>
</table>
উদাহরণ 3
কিভাবে টেবিল সেলের পিছনের রঙ যোগ করা যায় (ক্রেস ইউজ):
<table>
<tr>
<th>মাস</th>
<th>সঞ্চয়</th>
</tr>
<tr>
<td style="background-color:#FF0000">জানুয়ারী</td>
<td style="background-color:#00FF00">￥3400</td>
</tr>
</table>
উদাহরণ 4
টেবিল সেলেব্লস কিরণা কিভাবে নির্ধারণ করা যায় (CSS ব্যবহার করে):
<table>
<tr>
<th>মাস</th>
<th>সঞ্চয়</th>
</tr>
<tr>
<td style="height:100px">জানুয়ারী</td>
<td style="height:100px">￥3400</td>
</tr>
</table>
উদাহরণ 5
কিভাবে টেবিল সেলেব্লসে অবলম্বন না করতে কিভাবে নির্ধারণ করা যায় (CSS ব্যবহার করে):
<table>
<tr>
<th>কবিতা</th>
</tr>
<tr>
<td style="white-space:nowrap">朝辞白帝彩云间，千里江陵一日还。两岸猿声啼不住，轻舟已过万重山。</td>
</tr>
</table>
উদাহরণ 6
কিভাবে ভিক্তিসারণ করা যায় <td> এর ভিতরের কিভাবে উপরোক্তভাবে সাজানো যায় (CSS ব্যবহার করে):
<table style="width:50%;">
<tr>
<th>মাস</th>
<th>সঞ্চয়</th>
</tr>
<tr style="height:100px">
<td style="vertical-align:bottom">জানুয়ারী</td>
<td style="vertical-align:bottom">￥3400</td>
</tr>
</table>
উদাহরণ 7
টেবিল সেলেব্লস কিরণা কিভাবে নির্ধারণ করা যায় (CSS ব্যবহার করে):
<table style="width:100%">
<tr>
<th>মাস</th>
<th>সঞ্চয়</th>
</tr>
<tr>
<td style="width:70%">জানুয়ারী</td>
<td style="width:30%">￥3400</td>
</tr>
</table>
উদাহরণ 8
টেবিল শিরোনাম কিভাবে তৈরি করা যায়:
<table>
<tr>
<th>নাম</th>
<th>ই-মেল</th>
<th>টেলিফোন</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>bill.gates@example.com</td>
<td>138-1234-5678</td>
</tr>
</table>
উদাহরণ 9
শিরোনামসহ টেবিল কিভাবে তৈরি করা যায়:
<table>
<caption>মাসের সঞ্চয়</caption>
<tr>
<th>মাস</th>
<th>সঞ্চয়</th>
</tr>
<tr>
<td>জানুয়ারী</td>
<td>￥3400</td>
</tr>
<tr>
<td>ফেব্রুয়ারী</td>
<td>￥4500</td>
</tr>
</table>
উদাহরণ 10
দুর্গম হাইপারফাইবার টেবিল সেলেব্লস কিভাবে নির্ধারণ করা যায়:
<table>
<tr>
<th>নাম</th>
<th>ই-মেল</th>
<th colspan="2">টেলিফোন</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>bill.gates@example.com</td>
<td>138-1234-5678</td>
<td>186-2345-6789</td>
</tr>
</table>
অ্যাট্রিবিউট
| অ্যাট্রিবিউট | মান | বর্ণনা |
|---|---|---|
| colspan | নম্বর | সেল যে সংখ্যক কলাম চুড়ান্ত হবে তা নির্ধারণ করুক |
| headers | header_id | সেলের সঙ্গে সংযুক্ত একটি বা একাধিক হেডার সেল নির্ধারণ করুক |
| rowspan | নম্বর | সেল যে সংখ্যক সার চুড়ান্ত হবে তা নির্ধারণ করুক |
গ্লোবাল অ্যাট্রিবিউট
<td> ট্যাগটি ইভেন্ট অ্যাট্রিবিউটসও সমর্থন করে HTML-এর গ্লোবাল অ্যাট্রিবিউট。
ইভেন্ট অ্যাট্রিবিউট
<td> ট্যাগটি ইভেন্ট অ্যাট্রিবিউটসও সমর্থন করে HTML-এর ইভেন্ট অ্যাট্রিবিউট。
ডিফল্ট সিএসএস সেটিং
অধিকাংশ ব্রাউজার নিম্নলিখিত ডিফল্ট মান দেখাবে <td> এলিমেন্ট:
td {
display: table-cell;
vertical-align: inherit;
}
ব্রাউজার সমর্থন
| চ্রোম | এজ | ফায়ারফক্স | স্যাফারি | ওপেরা |
|---|---|---|---|---|
| চ্রোম | এজ | ফায়ারফক্স | স্যাফারি | ওপেরা |
| সমর্থন | সমর্থন | সমর্থন | সমর্থন | সমর্থন |
- পূর্ববর্তী পৃষ্ঠা <tbody>
- পরবর্তী পৃষ্ঠা <template>
