আজকের আলোচ্য বিষয়ঃ টেবিল ট্যাগ(th, tr, td, caption, align, cell) নিয়ে বিস্তারিত আলোচনা। তো চলুন-

টেবিল ট্যাগ(<table> </table>): টেবিল এইচটিএমএল এর একটি গুরুপ্তপূর্ণ উপাদান। বলা যায় যারা নতুন ওয়েব ডিজাইন শিখছেন তারা টেবিল দিয়েই একটি ওয়েব সাইট তৈরী করে ফেলতে পারেন। এটা শুরু শিখার জন্যই ভাল কিন্তু যখন প্রোফেশনালী কাজ করবেন এই অভ্যাস টি ত্যাগ করাটাই বাঞ্জনীয়।

অন্যান্য ট্যাগের মত টেবিল ট্যাগেরও শুরু (<table>) এবং শেষ (</table>) ট্যাগ রয়েছে। শুরু এবং শেষ ট্যাগের সম্পর্কে বলতে হলে বলা যায়, যে ট্যাগগুলোর শুরু এবং শেষ রয়েছে এরা সরাসরি ডাটা ব্রাউজারে প্রদর্শন করায়। আর যে ট্যাগ গুলো শুরু দিয়েই শেষ সেগুলো অন্য রিসোর্স থেকে ফাইলকে কল করে নিয়ে তারপর ব্রাউজারে প্রদর্শণ করায়।

আপনি যদি ড্রিমওয়েভার বা অন্য কোন এইচটিএমএল এডিটর ব্যবহার করেন তাহলে সহজেই ট্যাবিল তৈরী করতে পারবেন। আর যদি হাতে হাতে কোড লিখে করেন তবে এটি একটু সময় সাপেক্ষ। তবে কোড মুখস্থ রাখার জন্য প্রথমদিকের সব ডিজাইনারকে নোটপ্যাড ইউজ করতে অনুরোধ করবো। দেখুন কিভাবে হাতে হাতে কোড লিখবেন…

<table width=”500″ border=”1″ align=”center”>

<caption>This is HTML Table</caption>

<tr>

<th>First Column</th>

<th>Second Column </th>

<th>Third Column</th>

</tr>

<tr>

<td>This is First Cell </td>

<td>This is Second Cell</td>

<td>This is Third Cell</td>

</tr>

<tr>

<td>This is Fourth Cell</td>

<td>This is Fifth Cell</td>

<td>This is Sixth Cell</td>

</tr>

<tr>

<td>This is Seventh Cell</td>

<td>This is Eighth Cell</td>

<td>This is Ninth Cell</td>

</tr>

</table>

উপরের শুরু (<table>) এবং শেষ (</table>) পর্যন্ত কোড গুলো কপি করে নোটপ্যাডে লিখুন। তারপর table.html ফরমেটে সেভ করুন। সবকিছু ঠিক থাকলে নিচের ইমেজের মত প্রদর্শণ করবে…

বর্ননাঃ

উপরের টেবিলটিতে <table> এবং শেষ </table> হলো মূল টেবিল ট্যাগ। আমরা এর ভেতরেই অন্যান্য কাজ করেছি। th অর্থ table head, tr অর্থ table row, td অর্থ হল table date/column। এখন লক্ষ করুন..

আমরা শুরুর টেবিল ট্যাগ এ কিছু attribute এবং তার value নির্ধারন করে দিয়েছে যেমনঃ টেবিলে width 500 পিক্সেল, border 1 পিক্সেল, টেবিল align center।
তারপর, ক্যাপশন <caption> </caption> লিখেছি এবং তার ভেল্যু বা টাইটেল দিয়েছি- “This is HTML Table”।

তারপর, প্রথম <tr> এবং </tr> এর ভিতরে আমরা তিনটি table head (<th> </th>) ট্যাগ ব্যবহার করেছি। প্রথম টেবিল রো এর ভিতরে টেবিল হেড ব্যবহার করার কারনে লিখাগুলো অটোমেটিক বোল্ড এবং সেন্টার এলাইন হয়েছে কারন এটি এইচটিএমএল এর ডিফল্ট নিয়ম। এবং টেবিল এর ডোর হিসাবে দেখানো জন্যই td এর পরিবর্তে th ব্যবহার করা হয়েছে।

একই ভাবে দ্বিতীয়, তৃতীয় এবং চতূর্থ টেবিল রো নিয়েছে এবং এর ভিতরের ডাটা গুলোকে নরমাল টেক্সট(সচারচর খোবে দেখায়) হিসাবে দেখানো জন্য th এর পরিবর্তে আমরা ডিফল্ট টেবিল data/column ট্যাগ <td> </td> ব্যবহার করেছি।

জেনে রাখা ভালঃ

প্রতিটি <th> </th> এবং <td> </td> এর ভিতরের সকল ইলিমেন্টকে আমরা টেবিল সেল হিসেবে এবং সেলের ভিতরে সকল লিখাকে সেল ইলিমেন্ট হিসেবে জানবো। আপনি একটি টেবিলে যতগুলো রো নিতে চাইবেন তার জন্য আপনারে ততবার <tr> এবং </tr> ব্যবহার করতে হবে। প্রতিটি রো-তে সমান সংখ্যাক কলাম <td> </td>নিতে হবে। কোন রো-তে ৩ টি আবার কোন রো-তে ২টি কলাম নিয়ে কাজ করতে পারবেন না।

আজ এ পর্যন্তই! টেবিল নিয়ে আরো বিস্তারিত আলোচনা করবো পরবর্তী পোষ্টে।

সেই পর্যন্ত সবাই ভাল থাকুন, সুস্থ থাকুন। 🙂