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

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

উদাহরণ স্বরুপ

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

HTML Table তৈরি করা

<table> ট্যাগটি HTML Table ডিফাইন করে ।

প্রত্যেকটি টেবিল রো <tr> ট্যাগ দ্বারা প্রকাশ করা হয় । প্রতিটি টেবিল হেডার সেল <th> ট্যাগ দ্বারা এবং প্রতিটি সেল বা ডাটাকে  <td> ট্যাগ দ্বারা প্রকাশ করা হয় ।

ডিফল্ড ভাবে <th>  এর ভেতরের টেক্সট গুলো বোল্ড ও সেন্টার এলাইনমেন্ট এ হয় ।

ডিফল্ড ভাবে <td>  এর ভেতরের টেক্সট গুলো রেগুলার টেকস্ট এ এবং   লেফ্ট এলাইনমেন্ট এ হয় ।

উদাহরণ স্বরুপ

<table border width="100%"> 
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Shariar</td>
    <td>Sarkar</td>
    <td>35</td>
  </tr>
  <tr>
    <td>Wasif-un-nabi</td>
    <td>Abdullah</td>
    <td>9</td>
  </tr> 
</table>

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

নোট: টেবিলের data container হিসেবে <td> এলিমেন্ট গুলো ব্যবহার হয়। সবধরনের কন্টেন্ট ই প্রবেশ করানো যায় এদের মধ্যে যেমন টেক্সট, ইমেজ , লিস্ট, অন্য আর একটি টেবিল ইত্যাদি।

HTML Table এ বর্ডার দেয়া

table ট্যাগ এর সাথে border এট্রিবিউটি দিয়ে টেবিল এ বর্ডার দেয়া যায় ।  তবে সিএসএস দিয়ে বর্ডার দেয়াটা বেশি ভালো ।

CSS border প্রপার্টি ব্যবহার করে টেবিলে বর্ডার দেয়া হয় ।

উদাহরণ 

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

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

টেবিল ও টেবিলের ডাটার জন্য বর্ডার ডিফাইন করা উৎসাহিত করা হয়

HTML Table – Collapsed Borders

উপরের উদাহরণে দেখেছি দুটি করে বর্ডার আসতে । টেবিলে একটি করে বর্ডার নেবার জন্য CSS border-collapse প্রপার্টি ব্যবাহার করা হয় ।

উদাহরণ

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

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

টেবিলে সেল পেডিং যোগ করা

সেল পেডিং আসলে টেবিল সেলের লেখা বা কন্টেন্ট থেকে এর বর্ডার এর দুরত্ব তৈরি করে ।

আপনি যদি সেল পেডিং ঠিক না করে দেন, তবে পেডিং ছাড়াই সেলের তথ্য গুলো দেখাবে ।

টেবিলের সেলে পেডিং দেবার জন্য CSS padding প্রপার্টি টি ব্যবহার করা  হয় ।

উদাহরণ

th, td {
  padding: 10px;
}

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

এইচটিএমএল টেবিল Left Right এলাইনমেন্ট

ডিফল্ট ভাবে টেবিলের হেডিং এর তথ্য গুলো Bold ও Left Alignment এর হয় ।

টেবিলের হেডিং কে Left Align করতে CSS  text-align প্রপার্টি টি ব্যবহার করা হয় ।

উদাহরণ

th {
  text-align:left;
}

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

এইচটিএমএল টেবিল সেল মার্জ করা

এক্সেল যারা ব্যবহার করেছেন তাদের ধারনা টা ক্লিয়ার, কয়েকটি সেল একটি সেলে রুপান্তর করা যায় । সে কাজটি HTML এ ও করা যায় colspan  বা rowspan attribute ব্যবহার করে ।

টেবিল কলাম এর সেল মার্জ

th কিংবা td tag এ colspan attribute ব্যবহার করে কয়েকটি কলামের সেলকে একটি সেলে রুপান্তর করা হয়।

উদাহরণ

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Phone Number</th>
  </tr>
  <tr>
    <td>Green IT Care</td>
    <td>01717 90 55 xx </td>
    <td>01755 20 20 xx </td>
  </tr> 
</table>

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

রো এর সেল মার্জ করা

th কিংবা td tag এ rowspan attribute ব্যবহার করে কয়েকটি রো এর সেলকে একটি সেলে রুপান্তর করা হয়।

উদাহরণ

<table style="width:100%">
  <tr>
    <th>Name</th> 
    <td>Green IT Care</td>
  </tr>
  <tr> 
    <th rowspan="2">Phone Number</th>
    <td>01717 90 55 xx </td> 
  </tr> 
   <tr>  
    <td>01755 20 20 xx </td>
  </tr> 
</table>

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

HTML Table Caption যোগ করা

টেবিল এ ক্যাপশন যোগ করা হয় <caption> tag ব্যবহার করে ।

<table border width="100%"> 
  <caption>Client Details</caption>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Shariar</td>
    <td>Sarkar</td>
    <td>35</td>
  </tr> 
</table>

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