ওয়েব ডেভেলপমেন্ট জানুয়ারী ২০২৫ ব্যাচ - ক্লাস ৩ এর Table নিয়ে আলোচনা|

HTML Table নিয়ে সাড়াশি অভিযান

HTML টেবিল ট্যাগের মাধ্যমে আমরা ডেটাকে সারি (row) এবং কলাম (column)-এ সাজাতে পারি। এটি ব্যবহারের ফলে ডেটা গুছিয়ে দেখানো সহজ হয়। প্রতিটি টেবিলের কিছু নির্দিষ্ট ট্যাগ এবং স্ট্রাকচার থাকে, যা ডেটার ধরন অনুযায়ী বিভিন্ন অংশে বিভক্ত করা যায়। Table কেনো এত গুরুত্বপুর্ণ নিচের লিষ্ট টা খেয়াল করলেই বুঝতে পারবো আমরা।

  1. ডেটা উপস্থাপন: Student লিস্ট, কর্মী তালিকা।
  2. রিপোর্ট তৈরি: ইনভয়েস, ব্যালান্স শিট, ফিন্যান্সিয়াল ডেটা।
  3. ইমেইল টেম্পলেট ডিজাইন: নিউজলেটার, প্রমোশনাল কন্টেন্ট।
  4. তুলনামূলক চার্ট: পণ্য বৈশিষ্ট্য বা মূল্যের তুলনা।
  5. সময়সূচি: ক্লাস বা ইভেন্টের সময়সূচি।
  6. প্রিন্ট কন্টেন্ট: প্রজেক্ট রিপোর্ট, ক্যালেন্ডার।
  7. ড্যাশবোর্ড রিপোর্ট: ওয়েব অ্যাপ্লিকেশনে ডেটার ভিজুয়াল উপস্থাপনা।

তাহলে চলুন নিচে আমরা HTML table tags, attributes, deprecated tags & attributes এবং গুরুত্বপুর্ণ তথ্য জেনে নেই।


1. HTML table tag

1.1 <table> ট্যাগ:

  • এটি HTML টেবিলের মূল কাঠামো তৈরি করে।
  • সমস্ত টেবিল সম্পর্কিত ট্যাগ এবং ডেটা <table> ট্যাগের ভিতরে থাকবে।
<table border="1">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

এখানে একটি টেবিল তৈরি হয়েছে, যার সীমারেখা (border) আছে এবং তাতে একটি সারি ও দুটি সেল রয়েছে।


1.2 <tr> ট্যাগ:

  • একটি টেবিলের মধ্যে এক বা একাধিক সারি থাকে।
  • প্রতিটি সারি তৈরি করতে <tr> ট্যাগ ব্যবহার করা হয়।
<table border="1">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

উপরের টেবিলে দুটি সারি আছে, যেখানে প্রতিটি সারিতে দুটি সেল রয়েছে।


1.3 <th> ট্যাগ:

  • টেবিলের হেডার সেল তৈরি করতে <th> ট্যাগ ব্যবহৃত হয়।
  • এটি সাধারণত বোর্ড টেক্সটের জন্য ব্যবহৃত হয়, যা টেবিলের শিরোনাম হিসাবে কাজ করে।
<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

এখানে Header 1 এবং Header 2 হেডার সেল হিসেবে কাজ করছে।


1.4 <td> ট্যাগ:

  • এটি ডেটা সেল তৈরি করে।
  • <td> ট্যাগের ভিতরে সাধারণত ডেটা বা কনটেন্ট দেওয়া হয়।
<table border="1">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

উপরের টেবিলে Cell 1 এবং Cell 2 ডেটা সেল হিসেবে প্রদর্শিত হচ্ছে।


1.5 <thead> ট্যাগ:

  • টেবিলের শীর্ষ অংশ (header) তৈরি করতে <thead> ট্যাগ ব্যবহার করা হয়।
  • এটি সাধারণত হেডার তথ্য সংগঠিত করে।
<table border="1">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
</table>

এখানে <thead> ট্যাগের মাধ্যমে একটি হেডার অংশ তৈরি করা হয়েছে।


1.6 <tbody> ট্যাগ:

  • এটি টেবিলের মূল ডেটা অংশ ধারণ করে।
<table border="1">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>

এখানে <tbody> ট্যাগের ভিতরে মূল ডেটা রাখা হয়েছে।


1.7 <tfoot> ট্যাগ:

  • টেবিলের নিচের অংশ বা ফুটার তৈরি করতে <tfoot> ট্যাগ ব্যবহার করা হয়।
<table border="1">
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
    </tr>
  </tfoot>
</table>

এখানে ফুটার অংশে Footer 1 এবং Footer 2 লেখা আছে।


1.8 <caption> ট্যাগ:

  • টেবিলের জন্য শিরোনাম বা ব্যাখ্যা হিসেবে কাজ করে।
<table border="1">
  <caption>This is a table</caption>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
</table>

টেবিলের উপরে শিরোনাম হিসেবে This is a table দেখানো হবে।


২. HTML টেবিলের Attributes

2.1 border:

  • টেবিলের চারপাশে সীমারেখা নির্ধারণ করে।
  • উদাহরণ:
<table border="2">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

2.2 cellspacing:

  • সেলের মধ্যে ফাঁকা নির্ধারণ করে।
<table border="1" cellspacing="10">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

2.3 cellpadding:

  • সেলের ভেতরের ফাঁকা নির্ধারণ করে।
<table border="1" cellpadding="5">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

2.4 colspan:

  • একাধিক কলাম একত্রিত করতে ব্যবহৃত।
<table border="1">
  <tr>
    <td colspan="2">Merged Columns</td>
  </tr>
</table>

2.5 rowspan:

  • একাধিক রো একত্রিত করতে ব্যবহৃত।
<table border="1">
  <tr>
    <td rowspan="2">Merged Rows</td>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
</table>

৩. HTML টেবিলের কলাম এবং গ্রুপিং

3.1 <col> ট্যাগ:

  • একটি নির্দিষ্ট কলামের স্টাইল প্রয়োগ করতে ব্যবহৃত হয়।

3.2 <colgroup> ট্যাগ:

  • একাধিক কলাম গ্রুপিং করার জন্য।
<table border="1">
  <colgroup>
    <col>
    <col>
  </colgroup>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

এই উদাহরণগুলো দেখে সহজেই HTML টেবিল তৈরি এবং ব্যবহার শিখতে পারবে। প্রতিটি ট্যাগের নিজস্ব ভূমিকা আছে, যা ডেটাকে সঠিকভাবে সাজাতে সাহায্য করে।



অপ্রয়োজনীয় বা deprecated

নিম্নোক্ত ট্যাগ এবং অ্যাট্রিবিউট HTML5 এ deprecated, এগুলোর পরিবর্তে CSS ব্যবহার করতে হবে। তবে এসব শিখতে পারেন শুধুমাত্র শেখার জন্য।

  1. border:
  • কারণ: CSS দিয়ে border স্টাইলিং করা হয়।
  • উপায়: CSS এর মাধ্যমে: border: 1px solid black;
  1. cellspacing:
  • কারণ: CSS দিয়ে border-spacing সেট করা হয়।
  • উপায়: CSS: border-spacing: 10px;
  1. cellpadding:
  • কারণ: CSS দিয়ে padding সেট করা হয়।
  • উপায়: CSS: padding: 10px;
  1. align:
  • কারণ: CSS দিয়ে text-align ব্যবহৃত হয়।
  • উপায়: CSS: text-align: center;
  1. valign:
  • কারণ: CSS দিয়ে vertical-align ব্যবহৃত হয়।
  • উপায়: CSS: vertical-align: middle;
  1. width এবং height:
  • কারণ: CSS দিয়ে টেবিল বা সেলের প্রস্থ এবং উচ্চতা নির্ধারণ করা হয়।
  • উপায়: CSS: width: 100%; height: auto;
  1. bgcolor:
  • কারণ: CSS দিয়ে ব্যাকগ্রাউন্ড রঙ প্রয়োগ করা হয়।
  • উপায়: CSS: background-color: lightblue;
  1. summary:
  • কারণ: আধুনিক ব্রাউজার এবং অ্যাক্সেসিবিলিটি টুলস এটি আর ব্যবহার করে না।


5. HTML টেবিলের স্ট্রাকচার


নিচে একটি পূর্ণাঙ্গ উদাহরণসহ প্রতিটি ট্যাগের কাজ দেখানো হয়েছে। CSS কতৃক ডিজাইন টা ইগনোর করতে পারেন যারা জানেন না CSS।

HTML কোড:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table Example</title>
    <style>
        table {
            border-collapse: collapse; /* টেবিলের বর্ডার একত্রিত করা */
            width: 80%; /* প্রস্থ নির্ধারণ */
            margin: auto; /* টেবিলকে কেন্দ্রে আনুন */
            text-align: center; /* ডেটাকে কেন্দ্রীভূত করা */
        }
        th, td {
            border: 1px solid #ddd; /* বর্ডার */
            padding: 10px; /* ভেতরের ফাঁকা */
        }
        th {
            background-color: #f4f4f4; /* শিরোনামের রঙ */
        }
        caption {
            font-weight: bold;
            margin-bottom: 10px; /* ক্যাপশনের নিচে ফাঁকা */
        }
    </style>
</head>
<body>
    <table>
        <caption>Student Marks</caption> <!-- টেবিলের নাম -->
        <thead>
            <tr>
                <th>Roll</th>
                <th>Name</th>
                <th>Subject</th>
                <th>Marks</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Rahim</td>
                <td>Math</td>
                <td>85</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Karim</td>
                <td>English</td>
                <td>90</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Sultana</td>
                <td>Science</td>
                <td>95</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">Total Students</td>
                <td>3</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>


CSS এর ক্লাস হয়ে গেলে টেবিলের আরো একটা আপডেট পোষ্ট পাবেন।

11 Likes

ভাই অস্থির একটা ক্যাপশন দিছেন…html টেবিল নিয়ে সাঁড়াশি অভিযান :joy: ক্রাইম পেট্রল ক্রাইম পেট্রল একটা ভাইব আসছে…পড়ে

ভালো লিখেছেন, ধন্যবাদ ভাই

1 Like

How to join in live class? :slight_smile:

1 Like

Please, join the group and check featured option. Or check Admin Posts on this group name Rasel Ahmed.

Thanks