HTML টিউটোরিয়াল: পঞ্চম পর্ব (Body এর অভ্যন্তরীন ট্যাগ পরিচিতি)

আজকের আলোচ্য বিষয়ঃ টেবিল ট্যাগ(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>নিতে হবে। কোন রো-তে ৩ টি আবার কোন রো-তে ২টি কলাম নিয়ে কাজ করতে পারবেন না।

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

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

2 thoughts on “HTML টিউটোরিয়াল: পঞ্চম পর্ব (Body এর অভ্যন্তরীন ট্যাগ পরিচিতি)

মন্তব্য প্রদান করুন ...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / পরিবর্তন )

Twitter picture

You are commenting using your Twitter account. Log Out / পরিবর্তন )

Facebook photo

You are commenting using your Facebook account. Log Out / পরিবর্তন )

Google+ photo

You are commenting using your Google+ account. Log Out / পরিবর্তন )

Connecting to %s