HTML টেবিল (HTML Tables)

পূর্বে পরবর্তী

HTML Tables ব্যবহার করে আমরা ডেটা (তথ্য) সারি (rows) এবং কলাম (columns) আকারে সাজিয়ে দেখাতে পারি।

উদাহরণ:

Company	Contact	Country
Sunrise Global Exports	Anika Rahman	Bangladesh
Oceanic Fresh Foods	Liam Peterson	Australia
Green Valley Organics	Sophia Martinez	Spain
TechNova Solutions	David Kim	South Korea
Golden Harvest Exports	Arjun Mehta	India

নিজে চেষ্টা করুন »

HTML-এ একটি টেবিল কিভাবে তৈরি করবেন

একটি HTML টেবিল মূলত সারি (row) ও কলাম (column) নিয়ে গঠিত, আর প্রতিটি সেলের মধ্যে থাকে ডেটা।

একটি সাধারণ HTML টেবিলের উদাহরণ

<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<body>
<table style="width:100%">
  <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>Sunrise Global Exports</td>
        <td>Anika Rahman</td>
        <td>Bangladesh</td>
    </tr>
    <tr>
        <td>Oceanic Fresh Foods</td>
        <td> Liam Peterson</td>
        <td>Australia</td>
    </tr>
</table>

<p>উদাহরণটি আরও ভালোভাবে বোঝার জন্য, আমরা টেবিলে সীমানা যোগ করেছি।</p>

</body>
</html>

নিজে চেষ্টা করুন »

টেবিলের সেল (Table Cells)

প্রতিটি সেল তৈরি হয় <td> এবং </td> ট্যাগ দিয়ে।
td মানে Table Data
এর ভেতরে আপনি টেক্সট, ছবি, লিস্ট, লিংক এমনকি আরেকটি টেবিলও দিতে পারেন।

উদাহরণ:

<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<body>

<h2>TD elements define table cells</h2>

<table style="width:100%">
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

<p>উদাহরণটি আরও ভালোভাবে বোঝার জন্য, আমরা টেবিলে সীমানা যোগ করেছি।</p>

</body>
</html>

নিজে চেষ্টা করুন »

টেবিলের সারি (Table Rows)

প্রতিটি সারি <tr> দিয়ে শুরু হয় এবং </tr> দিয়ে শেষ হয়।
tr মানে Table Row

উদাহরণ:

<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<body>

<h2>TR elements define table rows</h2>

<table style="width:100%">
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

<p>উদাহরণটি আরও ভালোভাবে বোঝার জন্য, আমরা টেবিলে সীমানা যোগ করেছি।</p>

</body>
</html>

নিজে চেষ্টা করুন »

নোটঃ- সাধারণত প্রতিটি সারিতে সমান সংখ্যক সেল থাকে, তবে বিশেষ ক্ষেত্রে ভিন্ন সংখ্যাও হতে পারে (যেমন rowspan বা colspan ব্যবহার করলে)।আপনি পরবর্তী অধ্যায়ে এটি সম্পর্কে শিখবেন।

টেবিলের হেডার (Table Headers)

শিরোনাম সেল তৈরি করতে <th> ট্যাগ ব্যবহার করা হয়।
th মানে Table Header।
ডিফল্টভাবে <th> এর লেখা বোল্ড ও সেন্টার অ্যালাইনড থাকে।

উদাহরণ:

<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<body>

<h2>TH elements define table headers</h2>

<table style="width:100%">
  <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>

<p>উদাহরণটি আরও ভালোভাবে বোঝার জন্য, আমরা টেবিলে সীমানা যোগ করেছি।</p>

</body>
</html>

নিজে চেষ্টা করুন »

HTML Table এর গুরুত্বপূর্ণ ট্যাগ

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

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

পূর্বে পরবর্তী

HTML Tutorials

HTML ফর্মস

HTML গ্রাফিকস

HTML Media

HTML Examples

HTML রিফারেন্স

HTML টেবিল (HTML Tables)

উদাহরণ:

HTML-এ একটি টেবিল কিভাবে তৈরি করবেন

একটি সাধারণ HTML টেবিলের উদাহরণ

টেবিলের সেল (Table Cells)

উদাহরণ:

টেবিলের সারি (Table Rows)

উদাহরণ:

টেবিলের হেডার (Table Headers)

উদাহরণ:

HTML Table এর গুরুত্বপূর্ণ ট্যাগ