Topic: Html এ টেবিলের ব্যবহার(১ম পাঠ):
মৌলিক ধারণা:
Html দ্বারা খুব সুন্দর ভাবে টেবিল তৈরি করে ব্যবহার করা যায়। আপনি এমন কোন ওয়েব সাইট পাবেন না যাতে টেবিলের ব্যবহার না করা হয়। তাই ওয়েব সাইটে টেবিলের গুরুপ্ত ব্যাপক। এই টেবিল বানানোর জন্য আপনাকে হাতুড়ি, বাটাল, কাঠ, পেরেকের দরকার নেই। দরকার হবে কিছু মৌলিক ধারনার। আসুন আগে আমরা টেবিল তৈরি করতে কি কি বিষয় জানা দরকার তার দিকে নজর দেই:
একটি টেবিল তৈরি করতে হলে একটি কলাম এবং একটি রো এর প্রয়োজন হয়ে থাকে। কলাম এবং রো সম্পর্কে ধারনা নেবার জন্য আপনি অফিস প্রোগ্রাম এক্সেল থেকে ঘুরে আসতে পারেন। এক্সেল প্রোগ্রামে A, B, C, D,…… এগুলো হচ্ছে কলাম এবং 1, 2, 3, ,4 ……ইত্যাদির সিরিয়ালকে বলে রো। একটি কলাম এবং একটি রো সমন্বয়ে যে সকল ঘরকাটা ঘরকাটা দেখছেন তার প্রতিটি হচ্ছে একেকটি টেবিল।
Html এর সাহায্যে টেবিল তৈরি করতে হলে আমাদের ব্যবহার করতে হবে table ট্যাগটি। table ট্যাগের সমাপনী ট্যাগ হচ্ছে /table।
<head>
<title>Table</title>
</head>
<body>
<table>
</table>
</body>
</html>এখানে টেবিল তৈরি করবার পরিবেশ table ট্যাগ দ্বারা তৈরি করা হয়েছে মাত্র। এটা ওয়েব পেজে টেবিল শো করবে না কারন এখনো পর্যন্ত আমরা কোন রো এবং কলাম সেট করি নি। টেবিলের মাঝে রো সেট করবার জন্য আমাদের ব্যবহার করতে হয় tr ট্যাগটি। এই ট্যাগটির মাধ্যমে আমরা টেবিলের মাঝে রো বা সারির পরিবেশ সৃষ্টি করে থাকি। tr ট্যাগ ব্যবহার করে Html কোডিং হবে এ রকম:
<head>
<title>Table</title>
</head>
<body>
<table>
<tr>
</tr>
</table>
</body>
</html>এখানে আমরা টেবিল এর পরিবেশ এবং রো বা কলামের পরিবেশ তৈরি করলেও এটা কিন্তু ওয়েব পেজে এখনো শো করবে না কারন যতোক্ষন আপনি রো এর মাঝে কোন টেক্স অথবা কোন ছবি, ভিডিও না দেন। রো এর ভিতর আপনাকে কোন প্রকার টেক্স, ছবি, ভিডিও দেবার জন্য আপনাকে ব্যবহার করতে হবে td এই ট্যাগটি। তাহলে আসুন দেখি td ট্যাগটি ব্যবহার করে Html এর কোডিং কি রকম হতে পারে:
<head>
<title>Table</title>
</head>
<body>
<table>
<tr>
<td>
</td>
</tr>
</table>
</body>
</html>এখানে টেবিলের রো-কে ফরমেট করেছে td ট্যাগটি। ফলে টেবিলের ডাটা প্রকাশ করবার সকল ধরনের পরিবেশ সৃষ্টি হয়েছে। এই অবস্থায় আপনি ব্রাউজ করলে এখনো কোন প্রকার টেবিল দেখতে পাবেন না। এবার দুটি শর্ত সাপেক্ষে আপনি টেবিলকে জাতির সামনে দৃশ্যমান করতে পারেন। শর্ত দুটো হলো-
. টেবিলের বর্ডার সংযুক্ত করা।
. টেবিলের ভিতরে কোন কিছু রাখা (টেক্স, ছবি, ভিডিও ইত্যাদি)
তাহলে চলুন আমরা টেবিল দৃশ্যমান করবার জন্য দুটি শর্ত পূরন করি। তাহলে আমাদের প্রথম যা করতে হবে তা হলো td ট্যাগিটির ভিতর কোন টেক্স, ছবি, অথবা ভিডিও রাখতে হবে এবং টেবিলের বর্ডার দিতে হবে। প্রথম আসুন ট্যাগটির ভিতর কিছু টেক্স রেখে এর Html কোড কি রকম হবে তা দেখি:
<head>
<title>Table</title>
</head>
<body>
<table>
<tr>
<td>Polash Mahmud</td>
</tr>
</table>
</body>
</html>উদাহরন: ডেমো দেখতে ক্লিক করুন।
দেখুন এখানে polash mahmud লেখাটি দৃশ্যমান হয়েছে ঠিকই কিন্তু টেবিলের কোন বর্ডার না থাকায় তা দেখা যাচ্ছে না। তাহলে আসুন এবার টেবিলের বর্ডার যুক্ত করি এবং নিচে এর Html কোডটি লক্ষ্য করুন:
<head>
<title>Table</title>
</head>
<body>
<table border="1">
<tr>
<td>Polash Mahmud</td>
</tr>
</table>
</body>
</html>উদাহরন: ডেমো দেখতে ক্লিক করুন।
এখানে বর্ডার এ্যাট্রিবিউট এর মান হিসাবে ১ ব্যবহার করা হয়েছে। এখানে ১ হলো পিক্সেল সংখ্যা। অথ্যাৎ আমাদের তৈরি কৃত টেবিলের বর্ডার এর দাগটি ১ পিক্সেল চওড়া হবে। আমরা যদি বর্ডার এর কোন দাগ না রাখতে চাইতাম তাহলে বর্ডার লিখতে হতো “০”(শূন্য)।
আরেকটি ছোট কোডিং:
<table border="1">
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
</table>উদাহরন: ডেমো দেখতে এলোমেলোতে ঢু মারুন।
আজকে শুধু মাত্র টেবিল তৈরি করবার মৌলিক বিষয় নিয়ে আলোচনা করা হলো। পরবর্তিতে টেবিলের উচ্চতা, দৈর্ঘ্য ইত্যাদি নিয়ে আলোচনা করবো বলে আশা রাখছি।
বি:দ্র: আমি এই সাবজেটে খুবই আনারি। কোন প্রকার শিক্ষক-শিক্ষিকা ছাড়াই নিজে নিজে শিখেছি বই পরে, নেট ঘেটে। তাই ভুল হতেই পারে। ভুল হলে ধরিয়ে দেবার দায়িত্ব আপনাদের।
এলোমেলো আকাশে উড়িয়েছো শাড়ির আচল,
হঠ্যাৎ যেন মেখে দিয়েছো, ঐ দু'চোখে ভালোবাসার কাজল!
আমাকে পাবেন এলোমেলো-তে!!!
