HTML <tr> ট্যাগ

  • পূর্ববর্তী পৃষ্ঠা <title>
  • পরবর্তী পৃষ্ঠা <track>

অর্থাৎ এবং প্রয়োগ

<tr> ট্যাগ নির্দিষ্ট করে HTML ট্যাবিলের সাওয়ার হয়।

<tr> এলিমেন্ট একটি বা একাধিক <th> বা <td> এলিমেন্ট

অন্যান্য দেখুন:

HTML শিক্ষাক্রম:HTML ট্যাবল

HTML DOM সংক্ষিপ্ত পড়াশোনা মানক:TableRow অবজেক্ট

CSS শিক্ষাক্রম:ট্যাবিল স্টাইল সংযোজন

একটি উদাহরণ

উদাহরণ 1

একটি সাধারণ তিন সাওয়ার HTML ট্যাবিল; একটি শিরোদণ্ড ও দুটি ডাটা সাওয়ার:

<table>
  <tr>
    <th>মাস</th>
    <th>সঞ্চয়</th>
  <td>186-2345-6789</td>
  <tr>
    <td>জানুয়ারী</td>
    <td>￥3400</td>
  <td>186-2345-6789</td>
  <tr>
    <td>ফেব্রুয়ারী</td>
    <td>￥4500</td>
  <td>186-2345-6789</td>
</tr>

</table>

উদাহরণ 2

কিভাবে সাজানো যায়: <tr> এর মধ্যের বিষয় (ক্রমানুসারে CSS):

<table style="width:100%">
  <tr>
    <th>মাস</th>
    <th>সঞ্চয়</th>
  <td>186-2345-6789</td>
  <tr style="text-align:right">
    <td>জানুয়ারী</td>
    <td>￥3400</td>
  <td>186-2345-6789</td>
</tr>

</table>

উদাহরণ 3

কিভাবে ট্যাবিল সারিতে পটভূমির রঙ যোগ করা যায় (ক্রমানুসারে CSS):

<table>
  <tr style="background-color:#FF0000">
    <th>মাস</th>
    <th>সঞ্চয়</th>
  <td>186-2345-6789</td>
  <tr>
    <td>জানুয়ারী</td>
    <td>￥3400</td>
  <td>186-2345-6789</td>
 </tr>

</table>

উদাহরণ 4

কিভাবে ভিক্টিক্যাল অ্যালাইন করা যায়: <tr> এর মধ্যের বিষয় (ক্রমানুসারে CSS):

<table style="height:200px">
  <tr  style="vertical-align:top">
    <th>মাস</th>
    <th>সঞ্চয়</th>
  <td>186-2345-6789</td>
  <tr style="vertical-align:bottom">
    <td>জানুয়ারী</td>
    <td>￥3400</td>
  <td>186-2345-6789</td>
</tr>

</table>

উদাহরণ 5

কিভাবে ট্যাবিল শিরোনাম তৈরি করা যায়:

<table>
  <tr>
    <th>নাম</th>
    <th>ইমেইল</th>
    <th>টেলিফোন</th>
  <td>186-2345-6789</td>
  <tr>
    <th colspan="2">টেলিফোন</th>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
  <td>186-2345-6789</td>
</tr>

</table>

উদাহরণ 6

কিভাবে শিরোনাম সহ ট্যাবিল তৈরি করা যায়:

<table>
  <caption>মাস সঞ্চয়</caption>
  <tr>
    <th>মাস</th>
    <th>সঞ্চয়</th>
  <td>186-2345-6789</td>
  <tr>
    <td>জানুয়ারী</td>
    <td>￥3400</td>
  <td>186-2345-6789</td>
  <tr>
    <td>ফেব্রুয়ারী</td>
    <td>￥4500</td>
  <td>186-2345-6789</td>
</tr>

</table>

উদাহরণ 7

দুর্ঘাটনা বা একাধিক সাওয়ার ও কলমের ট্যাবিল সেলগুলো কিভাবে নির্দিষ্ট করা যায়:

<table>
  <tr>
    <th>নাম</th>
    <th>ইমেইল</th>
    电话
  <td>186-2345-6789</td>
  <tr>
    <th colspan="2">টেলিফোন</th>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  <td>186-2345-6789</td>
</tr>

</table>

স্বয়ং প্রয়াস করুন

<tr> ট্যাগটি ইভেন্ট অ্যাট্রিবিউটসও সমর্থন করে গ্লোবাল অ্যাট্রিবিউট。

HTML-তে গ্লোবাল অ্যাট্রিবিউট

<tr> ট্যাগটি ইভেন্ট অ্যাট্রিবিউটসও সমর্থন করে HTML-তে ইভেন্ট অ্যাট্রিবিউট。

ডিফল্ট সিএসএস সেটিং

অধিকাংশ ব্রাউজার নিম্নলিখিত ডিফল্ট মান দেখাবে <tr> এলিমেন্ট:

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

ব্রাউজার সমর্থন

চ্রোম এজ ফায়ারফক্স স্যাফারি ওপেরা
চ্রোম এজ ফায়ারফক্স স্যাফারি ওপেরা
সমর্থন সমর্থন সমর্থন সমর্থন সমর্থন
  • পূর্ববর্তী পৃষ্ঠা <title>
  • পরবর্তী পৃষ্ঠা <track>