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>

উদাহরন: ডেমো দেখতে এলোমেলোতে ঢু মারুন।

আজকে শুধু মাত্র টেবিল তৈরি করবার মৌলিক বিষয় নিয়ে আলোচনা করা হলো। পরবর্তিতে টেবিলের উচ্চতা, দৈর্ঘ্য ইত্যাদি নিয়ে আলোচনা করবো বলে আশা রাখছি।

বি:দ্র: আমি এই সাবজেটে খুবই আনারি। কোন প্রকার শিক্ষক-শিক্ষিকা ছাড়াই নিজে নিজে শিখেছি বই পরে, নেট ঘেটে। তাই ভুল হতেই পারে। ভুল হলে ধরিয়ে দেবার দায়িত্ব আপনাদের।

http://img51.imageshack.us/img51/2053/adda1.png
এলোমেলো আকাশে উড়িয়েছো শাড়ির আচল,
হঠ্যাৎ যেন মেখে দিয়েছো, ঐ দু'চোখে ভালোবাসার কাজল!

আমাকে পাবেন এলোমেলো-তে!!!


Re: Html এ টেবিলের ব্যবহার(১ম পাঠ):

পলাশ মাহমুদ wrote:

বি:দ্র: আমি এই সাবজেটে খুবই আনারি। কোন প্রকার শিক্ষক-শিক্ষিকা ছাড়াই নিজে নিজে শিখেছি বই পরে, নেট ঘেটে। তাই ভুল হতেই পারে। ভুল হলে ধরিয়ে দেবার দায়িত্ব আপনাদের।

তাও তো আপনে পারেন ~ আমি এর কিসসু জানি না, অশিক্ষিত, গো-মূর্খ
যাকে বলে চোখ থাকতে অন্ধ !
চেষ্টা করতাছি/শিখবার/জানবার।
আপনেরে ধইন্যা, ২য় পাঠ কবে দিবেন !!

একজন মানুষের জীবন হচ্ছে~ক্ষুদ্র আনন্দের সঞ্চয়,একেকজন মানুষের আনন্দ একেক রকম...http://www.rongmohol.com/uploads/1805_adda_logo_4.gif

গনযোগাযোগ সচিবঃ ফাউন্ডেশন ফর ওপেন সোর্স সলিউশনস বাংলাদেশ, নীতি নির্ধারকঃ মুক্ত প্রযুক্তি।


Re: Html এ টেবিলের ব্যবহার(১ম পাঠ):

অচেনাকেউ wrote:
পলাশ মাহমুদ wrote:

বি:দ্র: আমি এই সাবজেটে খুবই আনারি। কোন প্রকার শিক্ষক-শিক্ষিকা ছাড়াই নিজে নিজে শিখেছি বই পরে, নেট ঘেটে। তাই ভুল হতেই পারে। ভুল হলে ধরিয়ে দেবার দায়িত্ব আপনাদের।

তাও তো আপনে পারেন ~ আমি এর কিসসু জানি না, অশিক্ষিত, গো-মূর্খ
যাকে বলে চোখ থাকতে অন্ধ !
চেষ্টা করতাছি/শিখবার/জানবার।
আপনেরে ধইন্যা, ২য় পাঠ কবে দিবেন !!

আপনি কষ্ট করে এই বয়সে শিখে আর কি করবেন আংকেল। আপনার কি লাগবে খালি আওয়াজ দিবেন, আমরা আছি না =D

http://img51.imageshack.us/img51/2053/adda1.png
এলোমেলো আকাশে উড়িয়েছো শাড়ির আচল,
হঠ্যাৎ যেন মেখে দিয়েছো, ঐ দু'চোখে ভালোবাসার কাজল!

আমাকে পাবেন এলোমেলো-তে!!!


Re: Html এ টেবিলের ব্যবহার(১ম পাঠ):

দারুন লাগল, অমিত ছুটি তে এইচটিএমএল আর পিএইচপি এর উপর ছোটখাটো একটা কোর্স করতে চাচ্ছিলাম, পলাশ ভাই এর কাছ থেকেই কোর্স টা করব নাকি? একেবারে আনাড়ি তো তাই, খুব বেশি পারা লোকের কাছে গেলে তো গুলিয়ে খাইয়ে দেবে।

Shout Me Crunch আমার ব্যক্তিগত টেক ওয়েবসাইট।


Re: Html এ টেবিলের ব্যবহার(১ম পাঠ):

Html সম্পর্কে মোটামুটি ধারনা আছে কিন্তু php সম্পর্কে একদমই নেই। কয়েকবার ট্রাই মারছিলাম। মাথা কেমন যেন চক্কর মারে। তবে এখনো ট্রাই মাইরাই যাইতাছি। দেখি কপালে কি আছে।

http://img51.imageshack.us/img51/2053/adda1.png
এলোমেলো আকাশে উড়িয়েছো শাড়ির আচল,
হঠ্যাৎ যেন মেখে দিয়েছো, ঐ দু'চোখে ভালোবাসার কাজল!

আমাকে পাবেন এলোমেলো-তে!!!


Re: Html এ টেবিলের ব্যবহার(১ম পাঠ):

পলাশ ভাই আর তো ডেমো দিলেন না।  I don't know

মোঃ সাঈদুজ্জামান উপল
http://img684.imageshack.us/img684/3410/fb1d.jpg


Re: Html এ টেবিলের ব্যবহার(১ম পাঠ):

পিএইচপি to mojar জিন্স পলাশ আর উচিত ট্রাই করা

praying