HTML Table: এইচটিএমএল টেবিল (HTML Table) তৈরি ।

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

অনেক ধরনের তথ্য আছে যা কেবলমাত্র কলাম ও সারি অনুসারে প্রকাশ করলে অর্থবহ ও মনোরম হয়। এ সকল তথ্যকে সংরক্ষণ ও উপস্থাপন করার জন্য এইচটিএমএল টেবিল (HTML Table) প্রয়োজন হয়। একটি টেবিলে টেক্সট, ইমেজ, লিস্ট, ফটোগ্রাফ, ফর্ম, হরিজন্টাল রুল ইত্যাদি উপস্থাপন করা যায়। একটি দুই কলাম ও দুই রো বিশিষ্ট টেবিলের চিত্র নিচে দেওয়া হলো-

Row-1,Cell-1	Row-1,Cell-2
Row-2,Cell-1	Row-2,Cell-2

Note : একটির বেশি সেল/ঘর হলেই সেটি টেবিল হিসেবে বিবেচিত হবে। শুধুমাত্র একটি ঘর হলে সেটি টেবিল হিসেবে গণ্য হবে না তবে যদি প্রশ্নে বলা থাকে এটি টেবিল তাহলে টেবিল হিসেবে ধরতে হবে।

টেবিলের বিভিন্ন অংশের পরিচয় :

ক্যাপশন (Caption) : এটি টেবিলের পরিচিতিমূলক নাম বহন করে।
সারি (Row) : আনুভূমিক লাইন হলো টেবিলের সারি।
কলাম (Column) : কলাম হলো উল্লম্ব লাইন।
সেল (Cell) : কলাম ও সারির সেদকৃত অংশে তৈরি হওয়া বর্গ বা আয়তকে বলা হয় সেল।
ডেটা (Data) : সেলের ভিতরের লেখাকে ডেটা বলে ।
হেডিং (Heading) : সাধারণত টেবিলের সারি/কলাম শিরোনামকে হেডিং বলে। হেডিং সাধারণত মোটা হরফে ও সেলের মাঝে থাকে।

Table তৈরির ট্যাগ ও অ্যাট্রিবিউটস :

১. < table > ট্যাগ : একটি টেবিলকে নির্ধারণ করে। টেবিল তৈরির শুরুতে এবং শেষে এটি ব্যবহৃত হয়। অ্যাট্রিবিউটস-

border=”1″ এই অ্যাট্রিবিউটটি 100% ব্যবহার করতে হয় তা না হলে টেবিলের বর্ডার আসবে না।
bgcolor=”color name” যেমন- green, Blue ইত্যাদি। সম্পূর্ণ টেবিলের ব্যাকগ্রাউন্ড কালার হবে।
align=”text” যার ভ্যালু- left, right, center , টেবিলটি পেজের মাঝে, বামে, ডানে প্রদর্শিত হবে।
এছাড়া width, height, cellspacing, cellpadding ব্যবহৃত হতে পারে। ( এইচএসসি সট্টুডেন্ট দের তেমন একটা প্রয়োজন নেই)

২. < Caption > ট্যাগ : টেবিলের নাম/পরিচয় নির্ধারণ করে।

৩. < tr > ট্যাগ : টেবিলের রো নির্ধারণ করে। অ্যাট্রিবিউটস-

align=”text” যার ভ্যালু- left, right, center রো-এর ভিতরের টেক্সট মাঝে, বামে, ডানে প্রদর্শিত হবে।
bgcolor=”color name” যেমন- green, Blue ইত্যাদি। নির্ধারিত রো-এর ব্যাকগ্রাউন্ড কালার হবে।

৪. < th > বা < td > ট্যাগ : টেবিলের সেল নির্ধারণ করে। টেবিল হেডিং এর ক্ষেত্রে < th > এবং টেবিল ডেটার ক্ষেত্রে < td > ব্যবহৃত হয়। অ্যাট্রিবিউটস-

align=”text” যার ভ্যালু- left, right, center, top, bottom সেল-এর ভিতরের টেক্সট মাঝে, বামে, ডানে প্রদর্শিত হবে।
bgcolor=”color name” যেমন- green, Blue ইত্যাদি। নির্ধারিত সেল-এর ব্যাকগ্রাউন্ড কালার হবে।
colspan=”number” যার ভ্যালু- 1, 2, 3 ইত্যাদি। একাধিক কলামকে একত্রিত করে।
rowspan=”number” যার ভ্যালু- 1, 2, 3 ইত্যাদি। একাধিক রো-কে একত্রিত করে।
এছাড়া width, height ব্যবহৃত হতে পারে। ( এইচএসসি সট্টুডেন্ট দের তেমন একটা প্রয়োজন নেই)

উদাহরণ-০১: শিরোনাম (Caption) , হেডিং ও বর্ডার যুক্ত টেবিল তৈরির HTML কোড ও আউটপুট।

HTML Code :

< table border=”1″ >
< Caption > Students Table < /caption >
< tr >
< th > Roll < /th >
< th > Student Name < /th >
< th > GPA< /th >
< /tr >
< tr >
< td > 101 < /td >
< td > Sumaiya < /td >
< td > 5.00 < /td >
< /tr >
< tr >
< td > 102 < /td >
< td > Tahmina < /td >
< td > 4.50 < /td >
< /tr >
< /table >

Output :

Note : উপরের টেবিলটিরে প্রথম সারির এইচটিএমএল কোডে < th > ব্যবহার করায় প্রথম সারিতে সেলের ভিতরের লেখা মোটা দেখাচ্ছে ( এটাকে টেবিল হেডিং বলে )। এবং ২য় ও ৩য় সারিতে < td > ব্যবহার করায় লেখাগুলো নরমাল দেখাচ্ছে ( এটাকে টেবিল ডেটা বলে )।

উদাহরণ-০২ : রো-কে মার্জ/একত্রিত করে টেবিল তৈরির HTML কোড ও আউটপুট।

HTML Code :

< table border=”1″ >
< Caption > Students Table < /caption >
< tr >
< th > Roll < /th >
< th > Student Name < /th >
< th > GPA< /th >
< /tr >
< tr >
< td > 101 < /td >
< td > Sumaiya < /td >
< td rowspan=”2″ align=”center” > 5.00 < /td >
< /tr >
< tr >
< td > 102 < /td >
< td > Tahmina < /td >
< /tr >
< /table >

Output :

Note : রো-কে মার্জ/একত্রিত করার সময় rowspan অ্যাট্রিবিউট এর সাথে সাথে অবশ্যই align অ্যাট্রিবিউট এর ব্যবহার খেয়াল রাখতে হবে । সাধারণত rowspan ও colspan ছাড়া align অ্যাট্রিবিউট এর ব্যবহার না করলেও এইচএসসিতে তেমন প্রভাব পড়বে না। তবে সেলের ভিতরের লেখা মাঝে থাকলে সর্বক্ষেত্রে align অ্যাট্রিবিউট এর ব্যবহার করা যাবে।

উদাহরণ-০৩ : কলাম-কে মার্জ/একত্রিত করে টেবিল তৈরির HTML কোড ও আউটপুট।

HTML Code :

< table border=”1″ >
< Caption > Students Table < /caption >
< tr >
< th > Student Name < /th >
< th colspan “2” align=”center” > Subject < /th >
< /tr >
< tr >
< td > Sumaiya < /td >
< td > English < /td >
< td > Bangla < /td >
< /tr >
< tr >
< td > Tahmina < /td >
< td > Physics < /td >
< td > Chemistry < /td >
< /tr >
< tr >
< td colspan=”3″ align=”center” > Best Choice < /td >
< /tr >
< /table >

Output :

Note : colspan ও rowspan এর ভ্যালু একের অধিক ( 2/3/4….) হতে পারে।

উদাহরণ-০৪ : বর্ডারবিহীন টেবিল তৈরির HTML কোড ও আউটপুট।

HTML Code :

< table >
< Caption > Students Table < /caption >
< tr >
< th > Roll < /th >
< th > Student Name < /th >
< th > GPA< /th >
< /tr >
< tr >
< td > 101 < /td >
< td > Sumaiya < /td >
< td > 5.00 < /td >
< /tr >
< tr >
< td > 102 < /td >
< td > Tahmina < /td >
< td > 4.50 < /td >
< /tr >
< /table >