HTML Tables

এইচটিএমএল টেবিল

এইচটিএমএল টেবিল

HTML টেবিল ওয়েব ডেভেলপারদের সারি এবং কলামে ডেটা সংগঠিত করার অনুমতি দেয়।

কোম্পানি যোগাযোগ দেশ
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

একটি HTML টেবিল সংজ্ঞায়িত করা

HTML-এর একটি টেবিলে সারি এবং কলামের মধ্যে টেবিল ঘর থাকে।

উদাহরণ

একটি সাধারণ HTML টেবিল:

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

টেবিল কোষ

প্রতিটি টেবিল সেল একটি <td> এবং </td> ট্যাগ দ্বারা সংজ্ঞায়িত করা হয়।

td মানে টেবিল ডেটা।

<td> এবং </td> এর মধ্যে সবকিছুই একটি টেবিল ঘরের বিষয়বস্তু।

উদাহরণ

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

📝দ্রষ্টব্য:

একটি টেবিল কক্ষে সব ধরনের HTML উপাদান থাকতে পারে: পাঠ্য, ছবি, তালিকা, লিঙ্ক, অন্যান্য টেবিল ইত্যাদি।

টেবিলের সারি

প্রতিটি টেবিল সারি একটি <tr> দিয়ে শুরু হয় এবং একটি </tr> ট্যাগ দিয়ে শেষ হয়।

tr মানে টেবিল সারি।

উদাহরণ

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

একটি টেবিল আপনার প্রয়োজন হিসাবে অনেক সারি থাকতে পারে; নিশ্চিত করুন যে প্রতিটি সারিতে কক্ষের সংখ্যা একই।

📝দ্রষ্টব্য:

এমন সময় আছে যখন একটি সারিতে অন্য সারির চেয়ে কম বা বেশি কক্ষ থাকে। আপনি পরবর্তী অধ্যায়ে এটি সম্পর্কে শিখবেন।

টেবিল হেডার সেল

কখনও কখনও আপনি চান যে আপনার কোষগুলি টেবিল হেডার সেল হতে পারে। এই ক্ষেত্রে <td> ট্যাগের পরিবর্তে <th> ট্যাগ ব্যবহার করুন:

th টেবিল হেডার জন্য দাঁড়িয়েছে.

উদাহরণ

প্রথম সারিটি টেবিলের শিরোনাম ঘর হতে দিন:

<table>
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

ডিফল্টরূপে, <th> এলিমেন্টের টেক্সট বোল্ড এবং কেন্দ্রীভূত, কিন্তু আপনি CSS-এর মাধ্যমে এটি পরিবর্তন করতে পারেন।

অনুশীলন করুন

❓HTML-এ টেবিল-সেলের জন্য সঠিক ট্যাগ নাম কী?

<tc>
✗ ভুল!
<td>
✓ ঠিক আছে! <td> একটি টেবিল ঘরের জন্য একটি ট্যাগ
<tr>
✗ ভুল! <tr> হল টেবিল সারি ট্যাগ

HTML টেবিল ট্যাগ

ট্যাগ ব্যাখ্যা
<table> একটি টেবিল সংজ্ঞায়িত করে
<th> টেবিলে একটি হেডার সেল সংজ্ঞায়িত করে
<tr> সারণিতে একটি সারি সংজ্ঞায়িত করে
<td> টেবিলে একটি ঘর সংজ্ঞায়িত করে
<caption> টেবিল শিরোনাম সংজ্ঞায়িত করে
<colgroup> ফর্ম্যাট করার জন্য টেবিলে এক বা একাধিক কলামের একটি গ্রুপ নির্দিষ্ট করে
<col> <colgroup> উপাদানের মধ্যে প্রতিটি কলামের জন্য কলাম বৈশিষ্ট্যগুলি নির্দিষ্ট করে
<thead> টেবিলটি বিষয়বস্তুর সংক্ষিপ্ত বিবরণ দেয়
<tbody> টেবিলে শরীরের বিষয়বস্তু কম্পাইল করে
<tfoot> সারণীতে পাদটীকা বিষয়বস্তু সংকলন করে

সমস্ত উপলব্ধ HTML ট্যাগের সম্পূর্ণ তালিকার জন্য, আমাদের HTML ট্যাগ রেফারেন্স দেখুন।