HTML টেবিল

---

একটি HTML টেবিল <table> ট্যাগ দিয়ে নির্ধারণ করা হয়।

প্রতিটি টেবিল সারি (row) <tr> ট্যাগ দিয়ে নির্ধারণ করা হয়। একটি টেবিল হেডার <th> ট্যাগ দিয়ে নির্ধারণ করা হয়। ডিফল্টভাবে, টেবিল হেডিং বোল্ড এবং কেন্দ্রীভূত হয়। একটি টেবিল ডেটা/সেল <td> ট্যাগ দিয়ে নির্ধারণ করা হয়।

<table style="width:100%">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
    </tr>
</table>

---

মনে রাখবেন: <td> এলিমেন্টগুলো টেবিলের ডেটা কন্টেইনার।

এগুলোতে সব ধরনের HTML এলিমেন্ট থাকতে পারে; টেক্সট, ইমেজ, লিস্ট, অন্য টেবিল ইত্যাদি।

---

টেবিলের জন্য বর্ডার উল্লেখ না করলে, এটি বর্ডার ছাড়াই প্রদর্শিত হবে।

CSS-এর border প্রপার্টি ব্যবহার করে একটি বর্ডার সেট করা হয়:

table, th, td {
    border: 1px solid black;
}

---

Cell padding সেলের কনটেন্ট এবং এর বর্ডারের মধ্যেকার জায়গা নির্ধারণ করে।

padding উল্লেখ না করলে, টেবিল সেলগুলো padding ছাড়াই প্রদর্শিত হবে।

padding সেট করতে, CSS-এর padding প্রপার্টি ব্যবহার করুন:

th, td {
    padding: 15px;
}

---

ডিফল্টভাবে, টেবিল হেডিং বোল্ড এবং কেন্দ্রীভূত থাকে।

টেবিল হেডিং বামে সারিবদ্ধ করতে, CSS-এর text-align প্রপার্টি ব্যবহার করুন:

th {
    text-align: left;
}

---

Border spacing সেলগুলোর মধ্যেকার জায়গা নির্ধারণ করে।

একটি টেবিলের জন্য border spacing সেট করতে, CSS-এর border-spacing প্রপার্টি ব্যবহার করুন:

table {
    border-spacing: 5px;
}

মনে রাখবেন: টেবিলের বর্ডার কোলাপ্স করা থাকলে, border-spacing কোনো প্রভাব ফেলে না।

---

একটি সেলকে একাধিক কলামে বিস্তৃত করতে, colspan অ্যাট্রিবিউট ব্যবহার করুন:

<table style="width:100%">
    <tr>
        <th>Name</th>
        <th colspan="2">Telephone</th>
    </tr>
    <tr>
        <td>Bill Gates</td>
        <td>55577854</td>
        <td>55577855</td>
    </tr>
</table>

---

একটি সেলকে একাধিক সারিতে বিস্তৃত করতে, rowspan অ্যাট্রিবিউট ব্যবহার করুন:

<table style="width:100%">
    <tr>
        <th>Name:</th>
        <td>Bill Gates</td>
    </tr>
    <tr>
        <th rowspan="2">Telephone:</th>
        <td>55577854</td>
    </tr>
    <tr>
        <td>55577855</td>
    </tr>
</table>

---

একটি টেবিলে ক্যাপশন যোগ করতে, <caption> ট্যাগ ব্যবহার করুন:

মনে রাখবেন: <caption> ট্যাগ অবশ্যই <table> ট্যাগের ঠিক পরেই বসাতে হবে।

<table style="width:100%">
    <caption>Monthly savings</caption>
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$50</td>
    </tr>
</table>

মনে রাখবেন: <caption> ট্যাগ অবশ্যই <table> ট্যাগের ঠিক পরেই বসাতে হবে।

---

• টেবিল নির্ধারণ করতে HTML <table> এলিমেন্ট ব্যবহার করুন
• টেবিল সারি নির্ধারণ করতে HTML <tr> এলিমেন্ট ব্যবহার করুন
• টেবিল ডেটা নির্ধারণ করতে HTML <td> এলিমেন্ট ব্যবহার করুন
• টেবিল হেডিং নির্ধারণ করতে HTML <th> এলিমেন্ট ব্যবহার করুন
• টেবিল ক্যাপশন নির্ধারণ করতে HTML <caption> এলিমেন্ট ব্যবহার করুন
• বর্ডার নির্ধারণ করতে CSS-এর border প্রপার্টি ব্যবহার করুন
• সেল বর্ডার কোলাপ্স করতে CSS-এর border-collapse প্রপার্টি ব্যবহার করুন
• সেলে padding যোগ করতে CSS-এর padding প্রপার্টি ব্যবহার করুন
• সেলের টেক্সট সারিবদ্ধ করতে CSS-এর text-align প্রপার্টি ব্যবহার করুন
• সেলগুলোর মধ্যে ব্যবধান সেট করতে CSS-এর border-spacing প্রপার্টি ব্যবহার করুন
• একটি সেলকে একাধিক কলামে বিস্তৃত করতে colspan অ্যাট্রিবিউট ব্যবহার করুন
• একটি সেলকে একাধিক সারিতে বিস্তৃত করতে rowspan অ্যাট্রিবিউট ব্যবহার করুন
• একটি টেবিলকে ইউনিকভাবে নির্ধারণ করতে id অ্যাট্রিবিউট ব্যবহার করুন

---