HTML <table> ট্যাগ

  • পূর্ববর্তী পৃষ্ঠা <svg>
  • পরবর্তী পৃষ্ঠা <tbody>

অর্থ ও ব্যবহার

<table> এইটা হলো HTML ট্যাবলের ট্যাগ

একটি HTML টেবিল একটি <table> ইলেকট্রনিক ইনটারফেস এবং এবং<th> এবং <td> ইলেকট্রনিক ইনটারফেস গঠন:

HTML টেবিলগুলোতে আরও নিম্নলিখিত ইলেকট্রনিক ইনটারফেস যোগ করা যেতে পারে:

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

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

HTML DOM পরিচ্ছেদ:টেবিল অবজেক্ট

CSS শিক্ষা:টেবিল স্টাইল সজ্জিত করা

একটি প্রদর্শন

উদাহরণ 1

একটি সাধারণ HTML টেবিল, দুই স্তম্ভ এবং দুই পাশা নিয়ে:

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

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

উদাহরণ 2

কিভাবে টেবিলের ক্রমবিক্রমক হুকের যোগ করতে হয় (কাস্টমাইজড ক্লাস):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
<table>
  
    <th>মাস</th>
    <th>সঞ্চয়</th>
  <td>186-2345-6789</td>
  
    <td>জানুয়ারী</td>
    <td>￥3400</td>
  <td>186-2345-6789</td>
  
    <td>ফেব্রুয়ারী</td>
    <td>￥4500</td>
  <td>186-2345-6789</td>
</tr>
</body>
</html>

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

উদাহরণ 3

কিভাবে টেবিলকে ডান দিকে সাজাতে হয় (কাস্টমাইজড ক্লাস):

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

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

উদাহরণ 4

কিভাবে টেবিলকে কেন্দ্রীভূত করতে হয় (কাস্টমাইজড ক্লাস):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
table.center {
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>
<table class="center">
  
    <th>মাস</th>
    <th>সঞ্চয়</th>
  <td>186-2345-6789</td>
  
    <td>জানুয়ারী</td>
    <td>￥3400</td>
  <td>186-2345-6789</td>
  
    <td>ফেব্রুয়ারী</td>
    <td>￥4500</td>
  <td>186-2345-6789</td>
</tr>

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

উদাহরণ 5

কিভাবে টেবিলের ব্যাকগ্রাউন্ড কালার যোগ করতে হয় (কাস্টমাইজড ক্লাস):

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

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

উদাহরণ 6

কিভাবে টেবিলের ইনার প্যাডিং যোগ করতে হয় (কাস্টমাইজড ক্লাস):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
th, td {
  padding: 10px;
}
</style>
</head>
<body>
<table>
  
    <th>মাস</th>
    <th>সঞ্চয়</th>
  <td>186-2345-6789</td>
  
    <td>জানুয়ারী</td>
    <td>￥3400</td>
  <td>186-2345-6789</td>
  
    <td>ফেব্রুয়ারী</td>
    <td>￥4500</td>
  <td>186-2345-6789</td>
</tr>
</body>
</html>

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

উদাহরণ 7

টেবিল চেইনা কিভাবে সজ্জিত করতে হয় (কাস্টমাইজড ক্লাস):

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

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

উদাহরণ 8

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

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

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

উদাহরণ 9

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

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

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

উদাহরণ 10

দুই লাইন বা দুই সাওয়াল নিয়ে একটি টেবিল সেলের উপরে কিভাবে ব্যাখ্যা দিতে হয়:

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

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

</table>

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

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

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

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

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

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

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

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

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