HTML <th> ট্যাগ

  • পূর্ববর্তী পৃষ্ঠা <tfoot>
  • পরবর্তী পৃষ্ঠা <thead>

ব্যবহার ও পরিচিতি

<th> ট্যাগ এক্সট টেবিলের শিরোনাম সেল নির্দেশ করে

HTML টেবিলের দুটি ধরনের সেল রয়েছে:

  • শিরোনাম সেল - শিরোনাম তথ্য ধারণকারী (CSS ব্যবহার করে): <th> এলিমেন্ট তৈরি (ডমেইন সংক্রান্ত)
  • ডাটা সেল - তথ্য ধারণকারী (CSS ব্যবহার করে): <td> এলিমেন্ট তৈরি (ডমেইন সংক্রান্ত)

ডিফল্টে,<th> এলিমেন্টের টেক্সট বোল্ড এবং কেন্দ্রীভূত

ডিফল্টে, <td> মেম্বারের টেক্সট সাধারণ এবং ডানদিকে মূল্যায়িত হয়

আরও দেখুন:

HTML শিক্ষাHTML ট্যাবল

HTML DOM সংক্ষিপ্ত পঞ্জীTableHeader অবজেক্ট

CSS শিক্ষাফর্মের শৈলী নির্ধারণ করুন

উদাহরণ

উদাহরণ 1

একটি তিন সারির, দুটি শিরোনাম সেল এবং চারটি ডাটা সেল ধারণকারী সাধারণ HTML টেবিল:

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

স্বয়ং প্রয়োগ করুন

উদাহরণ 2

কিভাবেটালোকান করবেন: <th> এর মধ্যের কনটেন্ট (সিএসএস ব্যবহার করে):

<table style="width:100%">
  <tr>
    <th style="text-align:left">মাস</th>
    <th style="text-align:left">সঞ্চয়</th>
  </tr>
  <tr>
    <td>জানুয়ারী</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>ফেব্রুয়ারী</td>
    <td>￥4500</td>
  </tr>
</table>

স্বয়ং প্রয়োগ করুন

উদাহরণ 3

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

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

স্বয়ং প্রয়োগ করুন

উদাহরণ 4

কিভাবেটেবিলেরশিরোনাম সেলের উচ্চতা নির্ধারণ করবেন (CSS ব্যবহার করে):

<table>
  <tr>
    <th style="height:100px">মাস</th>
    <th style="height:100px">সঞ্চয়</th>
  </tr>
  <tr>
    <td>জানুয়ারী</td>
    <td>￥3400</td>
  </tr>
</table>

স্বয়ং প্রয়োগ করুন

উদাহরণ 5

কিভাবে টেবিল শিরোমুখী সেলের মধ্যে অবরোধ না করে লিখা যায় (সিএসএস ব্যবহার করে):

<table>
  <tr>
    <th>মাস</th>
    <th style="white-space:nowrap">নতুন গাড়ির জন্য সঞ্চয়</th>
  </tr>
  <tr>
    <td>জানুয়ারী</td>
    <td>￥3400</td>
  </tr>
</table>

স্বয়ং প্রয়োগ করুন

উদাহরণ 6

কিভাবে উপরোক্তকরণ করা যায়: <th> এর মধ্যের কনটেন্ট (সিএসএস ব্যবহার করে):

<table style="width:50%;">
  <tr style="height:100px">
    <th style="vertical-align:bottom">মাস</th>
    <th style="vertical-align:bottom">সঞ্চয়</th>
  </tr>
  <tr>
    <td>জানুয়ারী</td>
    <td>￥3400</td>
  </tr>
</table>

স্বয়ং প্রয়োগ করুন

উদাহরণ 7

টেবিল শিরোমুখী কোলাম প্রস্থবর্তী নির্দেশ

<table style="width:100%">
  <tr>
    <th style="width:70%">মাস</th>
    <th style="width:30%">সঞ্চয়</th>
  </tr>
  <tr>
    <td>জানুয়ারী</td>
    <td>￥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>

স্বয়ং প্রয়োগ করুন

বৈশিষ্ট্য

বৈশিষ্ট্য মূল্য বর্ণনা
abbr লেখাসাহিত্য শিরোমুখী সেলের কনটেন্টের সংক্ষিপ্ত সংস্করণ নির্দেশ
colspan নম্বর শিরোমুখী সেলের ক্রমাগত সারা সারা করার নির্দেশ
headers header_id একটি বা একাধিক সেল সংশ্লিষ্ট শিরোমুখী সেলকে নির্দেশ
rowspan নম্বর শিরোমুখী সেলের ক্রমাগত সারা সারা করার নির্দেশ
scope
  • col
  • colgroup
  • row
  • rowgroup
 শীর্ষসূচক সেল কলামের শীর্ষ, সারা সারির শীর্ষ বা একটি কলাম বা সারা সারির শীর্ষ।

গ্লোবাল অ্যাট্রিবিউট

<th> ট্যাগটি আরও HTML-এর গ্লোবাল অ্যাট্রিবিউট。

ইভেন্ট অ্যাট্রিবিউট সমর্থন করে

<th> ট্যাগটি আরও HTML-এর ইভেন্ট অ্যাট্রিবিউট。

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

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

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
}

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

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