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

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

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

Name	Address	Mobile Number
Md. Shariar Sarkar	Birampur, Dinajpur	01717 90 55 xx
Md. Sarowar Hossain	Naogaon	01711 123 xxx
Mst. Afrida Morium	PanchBibi, Jaypurhat	01768 06 xx xx
Md. Wasif-un-nabi Abdullah	Birampur, Dinajpur	—-
Mst Afia Akhter	Thakurgaon	—-

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

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>

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