HTML Table Sizes (HTML টেবিলের সাইজ)

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

HTML টেবিলের প্রতিটি কলাম (column), সারি (row) অথবা পুরো টেবিলের আকার (size) আলাদাভাবে নিয়ন্ত্রণ করা যায়।

👉 এর জন্য আমরা সাধারণত CSS এর width এবং height প্রপার্টি ব্যবহার করি।

HTML টেবিলের প্রস্থ (Table Width)

একটি টেবিলের প্রস্থ নির্ধারণ করতে হলে <table> ট্যাগে style="width:value" লিখতে হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
    <style>
    table, th, td {
    border:1px solid black;
  border-collapse: collapse;
    }
    </style>
</head>
<body>
<h2>100% wide HTML Table</h2>

<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>

</body>
</html>

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

নোট: এখানে width:100% মানে হলো টেবিলটি তার parent element (যেমন:<body>) এর পুরো প্রস্থ জুড়ে থাকবে।

HTML টেবিলের কলামের প্রস্থ (Column Width)

কোনো নির্দিষ্ট কলামের প্রস্থ পরিবর্তন করতে চাইলে সেই কলামের <th> বা <td> ট্যাগে style="width:value" ব্যবহার করতে হয়।

উদাহরণ:

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

<h2>প্রথম কলামটি টেবিলের প্রস্থের ৭০% এ সেট করুন</h2>

<table style="width:100%">
  <tr>
    <th style="width:70%">Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Roshidul</td>
    <td>shorker</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ashek</td>
    <td>Nur Jaman</td>
    <td>26</td>
  </tr>
  <tr>
    <td>Moslama</td>
    <td>Shorker</td>
    <td>22</td>
  </tr>
</table>

</body>
</html>

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

HTML টেবিলের সারির উচ্চতা (Row Height)

টেবিলের কোনো নির্দিষ্ট সারির উচ্চতা পরিবর্তন করতে চাইলে <tr> ট্যাগে style="height:value" ব্যবহার করতে হয়।

উদাহরণ:

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

<h2>দ্বিতীয় সারির উচ্চতা 200px করা হলো:</h2>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr style="height:200px">
    <td>Roshidul</td>
    <td>shorker</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ashek</td>
    <td>Nur Jaman</td>
    <td>26</td>
  </tr>
  <tr>
    <td>Moslama</td>
    <td>shorker</td>
    <td>22</td>
  </tr>
</table>

</body>
</html>

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

সারসংক্ষেপ

পুরো টেবিলের প্রস্থ নির্ধারণ করতে: <table style="width:value">
নির্দিষ্ট কলামের প্রস্থ ঠিক করতে: <th> বা <td> ট্যাগে width ব্যবহার
নির্দিষ্ট সারির উচ্চতা ঠিক করতে: <tr> ট্যাগে height ব্যবহার

এইভাবে আপনি সহজেই টেবিলের আকার (size) নিয়ন্ত্রণ করতে পারবেন এবং ওয়েবপেজকে আরও আকর্ষণীয়ভাবে সাজাতে পারবেন।

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

HTML Tutorials

HTML ফর্মস

HTML গ্রাফিকস

HTML Media

HTML Examples

HTML রিফারেন্স

HTML Table Sizes (HTML টেবিলের সাইজ)

HTML টেবিলের প্রস্থ (Table Width)

উদাহরণ

HTML টেবিলের কলামের প্রস্থ (Column Width)

উদাহরণ:

HTML টেবিলের সারির উচ্চতা (Row Height)

উদাহরণ:

সারসংক্ষেপ