এইচটিএমএল টেবিল টিউটোরিয়াল (HTML Tables Tutorial in Bangla)

এইচটিএমএল টেবিল টিউটোরিয়াল (HTML Tables Tutorial in Bangla)

বিভিন্ন ওয়েব সাইটে টেবিল ভিত্তিক ডেটা দেখেছেন নিশ্চয়ই। বিশেষ করে খেলাধুলার সাইটের খেলোয়ারদের স্কোর, প্রোফাইল, সময়সূচি, শেয়ার বাজারের হিসাব ইত্যাদি কাজে টেবিল লাগে। টেবিলভিত্তিক ডেটা দেখানোর জন্য এইচটিএমএল এর বেশকিছু ট্যাগ আছে যেগুলি দিয়ে নানন ধরনের টেবিল তৈরী করা যায়। একটা টেবিল তৈরীতে প্রাথমিকভাবে ৩টি ট্যাগ লাগে
১. <table></table>
২. <tr></tr> (tr তে table row)
৩. <td></td> (td তে table data)
 এই ৩টি ট্যাগ দিয়ে একটা টেবিল বানাতে পারবেন। পুরো grid সিস্টেম বানানো যাবে। row এবং column দিয়ে
tr দিয়ে row বা সারি এবং td দিয়ে column বা স্তম্ভ বানানো হয়। একটা সাধারন টেবিল

01.<table>

02.<tr>

03.<td>HTML</td>

04.<td>JS</td>

05.<td>SQL</td>

06.</tr>

07.<tr>

08.<td>CSS</td>

09.<td>PHP</td>

10.<td>MySQL</td>

11. 

12.</tr>

13.</table>

প্রদর্শন:

HTML	JS	SQL
CSS	PHP	MySQL

আমি দুটি row এবং ৩টি করে কলাম ব্যবহার করেছি আপনি ইচ্ছে মত row ব্যবহার করতে পারবেন।

টেবিল শিরোনাম
<th> নামে একটা ট্যাগ আছে এটা দেয়া টেবিলের হেডার বানানো যায় যেমন

01.<table>

02.<tr>

03.<th>Markup</th>

04.<th>Programming</th>

05.<th>Database</th>

06.</tr>

07.<tr>

08.<td>HTML</td>

09.<td>JS</td>

10.<td>SQL</td>

11.</tr>

12.<tr>

13.<td>CSS</td>

14.<td>PHP</td>

15.<td>MySQL</td>

16.</tr>

17. 

18.</table>

প্রদর্শন

Markup	Programming	Database
HTML	JS	SQL
CSS	PHP	MySQL

 দেখুন th  এলিমেন্টের লেখাগুলি হেডিং আকারে দেখাচ্ছে।
তবে টেবিল দেয়ার উপযুক্ত নিয়ম হচ্ছে টেবিলের হেডার, বডি এবং ফুটার সহ দেয়া। এজন্য কিছু ট্যাগ আছে এগুলি ব্যবহার করলে গ্রামাটিকালি টেবিলটি সঠিক হয় এরুপ একটি উদাহরন

01.<table>

02.<thead>

03. 

04.<tr>

05.<th>Markup</th>

06.<th>Programming</th>

07.<th>Database</th>

08.</tr>

09.</thead>

10.<tfoot>

11.<tr>

12.<td>Easy</td>

13.<td>Tough</td>

14.<td>Tough</td>

15.</tr>

16. 

17.</tfoot>

18.<tbody>

19. 

20.<tr>

21.<td>HTML</td>

22.<td>JS</td>

23.<td>SQL</td>

24.</tr>

25.<tr>

26.<td>CSS</td>

27.<td>PHP</td>

28.<td>MySQL</td>

29.</tr>

30.</tbody>

31. 

32.</table>

প্রদর্শন (টেবিল C)

Markup	Programming	Database
Easy	Tough	Tough
HTML	JS	SQL
CSS	PHP	MySQL

<tfoot> ট্যাগ <tbody> এর আগে দেয়া হয়েছে, আর এভাবেই ব্রাউজার সঠিকভাবে দেখাতে পারে।(দেখুন tfoot এর ডেটা নিচেই দেখাচ্ছে)

উপরের টেবিলগুলিতে বর্ডার না দেয়াতে ভাল দেখাচ্ছে না এজন্য <table> এলিমেন্টে বেশ কয়েকটি এট্রিবিউট আছে যেগলি দিয়ে টেবিল সুন্দর সাজানো যায়। যেমন টেবিলে বর্ডার দিতে চাইলে <table border="1"> এভাবে দিবেন  ফলে টেবিলটি কিছুটা সুন্দর লাগবে আবার আছে cellpadding এবং cellspacing এদুটি দিয়ে cell বা অংশগুলির মধ্যে যথাক্রমে প্যাডিং (কনটেন্ট থেকে বর্ডারের দুরত্ব) এবং দুরত্ব বাড়ানো যায় যেমন উপরের টেবিলে <table border="1" cellpadding="10"> এটা যোগ করে আমাদের অনলাইন এডিটরে রান করিয়ে দেখাতে পারেন।

rowspan এবং colspan
td, th এ rowspan এবং colspan এট্রিবিউট দুটি ব্যবহার করে জটিল ধরনের টেবিল বানানো যায়্। rowspan এর সংখ্যাত্নক মান দিয়ে ঠিক করা যায় cell টি কতটি row এর সমান হবে যেমন

01.<table border="1">

02.<tr>

03.<th rowspan="2">Web Language</th>

04.<td>HTML</td>

05.<td>CSS</td>

06.</tr>

07.<tr>

08.<td>PHP</td>

09.<td>JS</td>

10.</tr>

11.<tr>

12.<th>Framework</th>

13.<td>CI</td>

14.<td>Bootstrap</td>

15.</tr>

16.</table>

প্রদর্শন:

Web Language	HTML	CSS
	PHP	JS
Framework	CI	Bootstrap

কোথায় th, td ইত্যাদি দিয়েছি ভালভাবে লক্ষ্য করুন নাহলে কিছুই বুঝবেননা। দেখুন দুটি row এর জায়গা কিভাবে একটি cell th(Web Language)  দিয়ে দখল করা হয়েছে, rowspan দিয়ে।
colspan দিয়ে কলাম দখল করা যায় যেমন উপরের টেবিল C দেখুন সেখানে Tough দুটি কলামে রাখা হয়েছে যেটা অপ্রয়োজনীয়, ইচ্ছে করলে colspan ব্যবহার করে একটি কলামকেই দুটির সমান করে দিতে পারি। যেমন ঐ উদাহরনটির ১৩ এবং ১৪ নম্বর লাইনদুটি বাদদিয়ে নিচের লাইনটি দিন

1.<td colspan="2"></td>

ব্যাস এবার রান করিয়ে দেখুন একটি কলামেই কাজ হয়ে গেছে।
** একটা cell এর ভিতর (td এর ভিতর) যেকোন এইচটিএমএল এলিমেন্ট রাখতে পারেন। img, p বা যেকোন কিছু।
** গুরত্বপূর্ন এট্রিবিউটগুলিই শুধু আলোচনা করা হচ্ছে, এগুলি ছাড়াও align, bgcolor ইত্যাদি কমন এট্রিবিউটগুলি ব্যবহার করা যাবে।