adab and nomoskar
টেবিল তৈরীর ট্যাগ হলো <table> </table> । আর টেবিল এর বোর্ডার এর জন্য ব্যবহার করতে হবে border এট্রিবুট। এট্রিবুট কোথায় বসে তা নিশ্চয় জানা আছে সবার। যাদের জানা নাই তারা শোনেন। মনে করেন টেবিল ট্যাগ এ এট্রিবুট দেবেন তাহলে আপনাকে ট্যাগ লিখতে হবে <table border=”2”> your code </table> । বোর্ডার আপনি যত বেশি দেবেন তত বড় বোর্ডার তৈরি হবে, 2 না দিয়ে 5 দিলে বড় হবে , 10 দিলে আরো বড় হবে। আপনি একই ট্যাগ এর ভেতর অসংখ্য এট্রিবুট ব্যবহার করতে পারেন। কিন্তু সব ট্যাগে সব এট্রিবুট কাজ করবে না। আসুন এবার টেবিল সম্পর্কে জানা যাক। আমরা যারা ম্যাট্রিক্স এর অংক করেছি তারা জানি যে যেকোন টেবিল সারি ও কলামের মাধ্যমে গঠন করা হয় । তেমনি এই এইচ টি এম এল এর মাঝেও সারি ও কলাম তৈরি করার মাধ্যমে আপনাকে টেবিল তৈরি করতে হবে। অথবা যারা মাআক্রোসফট ওয়ার্ড এ টেবিল তৈরি করেছেন তারাও জানেন যে টেবিল তৈরি করার সময় আপনাকে কলাম এবং র এর সংখ্যা দিতে হয়। এইচ টি এম এল এও তার ব্যাতিক্রম না কিন্তু। এইচ টি এম এল আপনার কাছে কঠিন মনে হবে তখন যখন আপনি এটাকে কঠিন ভাববেন। কিন্তু আপনি যদি শেখার আগ্রহ নিয়ে সিম্পিলভাবে এটাকে ভাববেন তখন আসলেই এটা সহজ হয়ে আপনার কাছে ধরা দেবে। {একবার ভাবুন আপনি যখন হাটতে পারতেন না তখন মানুষের হাটা দেখলে কেমন লাগতো। আমার তো খুব খারাপ লাগত। আমি ভাবতাম কবে যে আমি 18+ হেবো। যাই হোক 18+ হবার অনেক আগেই আমি হাটা শিখে গেছি (ফান করলাম)}। টেবিল তৈরি করার জন্য আপনাকে নিচের মতো করে আগে কোড লিখতে হবে:
<html>
<head><title> This is a table</title> </head>
<body>
<table>
</table>
</body>
</html>
এটা তো শুধু আমাদের সাধারন একটা টেবিল হলো। এখনো কিন্তু ব্রাউসার আপনাকে কিছুই শো করাবে না। যতক্ষন না আপনি সারি , কলাম ও বোর্ডার না দেবেন ততক্ষন পর্যন্ত কিছুই হবে না।
টেবিল র (table row) এর ট্যাগ হলো : <tr> </tr>
table এর t এবং row এর r নিয়ে গঠিত হয়েছে <tr> ট্যাগ। এটা আমার ধারনা থেকে বললাম।
<html>
<head><title> This is a table</title> </head>
<body>
<table> <tr>
</tr>
</table>
</body>
</html>
আমরা তো টেবিল র তৈরি করে ফেললাম এখন শুধু কলাম বাকি।মরন রাখবেন র এর ভেতর আপনি যত কলাম ট্যাগ দেবেন ততটি কলাম তৈরি হবে।
এভাবে হয়তো আপনি মনে করেছেন যে টেবিল কলাম এর ট্যাগ হবে <tc> । কিন্তু না আপনার ধারনা ভুল ।
টেবিল কলাম (table column) এর ট্যাগ হলো : <td> </td> ।
আমরা তাহলে কলাম এবং র তৈরি শিথে গেলাম। কলাম ও র তৈরি শিখলে আপনি টেবিল তৈরি শিখে গেলেন কিন্তু। পাল্টা প্রশ্ন করবেন না যে কেন ভাই <td> হয়? আমি হরে যাব তাহলে।টেবিল কলাম এর মধ্যে কিন্তু আপনাকে ডাটা দিতে হবে। না দিলে ব্রাউসার ব্লাঙ্ক দেখাবে। আসুন দেখি কিভাবে কলাম বানাবো:
<html>
<head><title> This is a table</title> </head>
<body>
<table> <tr>
<td>Name </td>
<td>Phone</td>
<td> Address </td>
</tr>
</table>
</body>
</html>
আউটপুট হবে:
সাদামাঠা 3 টা লেখা আপনি দেখতে পাচ্ছেন। কিন্তু আপনি এমনটা আশা করেন নি আমি জানি। আপনি চেয়েছিলেন চতুর্দিকে একটা বোর্ডার থাকবে। তাই প্রথমে যেটা বলছিলাম যে টেবিল বোর্ডার এট্রিবুট দিতে হবে এখন তার সময় এস গেছে। এখন না দিয়ে আপনি আগেও দিতে পারেন। নো প্রোবলেম যখন মন তখন দেবেন। নিচে দেখুন বোর্ডার সেট করলাম:
<html>
<head><title> This is a table</title> </head>
<body>
<table border="2"> <tr>
<td>Name </td>
<td>Phone</td>
<td> Address </td>
</tr>
</table>
</body>
</html>
আউটপুট হবে:
name, phone, address দিলাম কিন্তু নিচে তো নাম-ধাম-পাতা কিছুই নাই। এই নাম-ধাম-পাতা যোগ করতে হলে আপনাকে আরেকটা র তৈরি করে তাতে আবার তিনটা কলাম করতে হবে।
নিচে দেখুন:
<html>
<head><title> This is a table</title> </head>
<body>
<table border="2">
<tr>
<td>Name </td>
<td>Phone</td>
<td> Address </td>
</tr>
<tr>
<td>Salman khan </td>
<td>01725------</td>
<td> Dinajpur </td>
</tr>
<tr>
<td>Jemee</td>
<td>01717-----</td>
<td>Chirirbandar </td>
</tr>
</table>
</body>
</html>
আউটপুট হবে:
টেবিল তো হলো এখন যে টেবিল এর হেডিং লগবো। table heading এর জন্য আপনাদের ব্যবহার করতে হবে <th> </th> ট্যাগ। আর এই ট্যাগরে ভেতর ব্যবহার করতে হবে colspan এট্রিবুট।
নিচে দেখুন:
<html>
<head><title> This is a table</title> </head>
<body>
<table border="2">
<th colspan="3"> ADDRESSBOOK </th>
<tr>
<td>Name </td>
<td>Phone</td>
<td> Address </td>
</tr>
<tr>
<td>Salman khan </td>
<td>01725------</td>
<td> Dinajpur </td>
</tr>
<tr>
<td>Jemee</td>
<td>01717-----</td>
<td>Chirirbandar </td>
</tr>
</table>
</body>
</html>
আউটপুট হবে:
colspan আমি 3 দিয়েছি এটার কারন হলো আপনি যতটা কলামের উপর হেডিং রাখতে চান তত সংখ্যা দিতে হবে।
যদি 2 দেই তবে আউটপুট হবে:
এবার ফাইনাল কিছু কথা বলে শেষ করব। টেবিল তৈরি করলাম কিন্তু টেবিল ব্রাউসারে তার নিজের মত করে স্থান নিয়েছে। যেটা আমরা চাই না। আবার লেখাগুলো চাপাচাপি অবস্থায় আছে এবং সেল গুলো পাশাপাশি আছে এসকল কিছু নিজের মতো করে যদি আপনি করতে চান তবে আপনাকে প্রতিটা কাজের জন্য এক একটা করে এট্রিবুট ব্যবহার করতে হবে। প্রস্খ ও উচ্চতা বাড়া কমার জন্য ব্যবহার করতে হবে width ও height এট্রিবুট এবং সকল এট্রিবুট টেবিল ট্যাগ এর মধ্যে লিখতে হবে এখন আপনি চাচ্ছেন যে লেখাগুলো যে ঘরে আছে সেই ঘরটা একটু বড় হবে এর জন্য আপনাকে ব্যবহার করগে হবে cellpadding এট্রিবুট । এবং আপনি যদি চান যে এক একটা ঘর পরস্পর হতে দুরে থাকবে তবে আপনাকে ব্যবহার করতে হবে cellspacing এট্রিবুট।
নিচে কোড দেখেন:
<html>
<head><title> This is a table</title> </head>
<body>
<table border="2" cellpadding="10" cellspacing="10" >
<th colspan="3"> ADDRESSBOOK </th>
<tr>
<td>Name </td>
<td>Phone</td>
<td> Address </td>
</tr>
<tr>
<td>Salman khan </td>
<td>01725------</td>
<td> Dinajpur </td>
</tr>
<tr>
<td>Jemee</td>
<td>01717-----</td>
<td>Chirirbandar </td>
</tr>
</table>
</body>
</html>
আমি একটা ফাইনাল আউটপুট দিলাম:
যারা এস এস সি ও জে এস সি পরীক্ষার্থী তারা আমার এই ব্লগ টা দেখতে পারেন my blog for SSC , JSC ।আপনাদের জন্যই আমার এই ক্ষুদ্র চেষ্টা। আশা করি কাজে লাগবে। শুধু প্রশ্নই না আরো ছোট খাটো বিজ্ঞান ও গনিতের বিভিন্ন বিষয় আছে ।আপনার পরিচিত যদি কেউ ফকে যে ষষ্ঠ খেকে দশম শ্রেণীতে পড়ে তবে তাকে এই ব্লগ এর ঠিকানা অফ কোর্স দেবেন। সবাই ভালো থাকবেন এই প্রত্যাশায় আমি জেমী।।।।
আমি jemeeroy। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 13 বছর যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 10 টি টিউন ও 42 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
আমাদের ইসলামিক পেইজ এ যোগ দিন আর প্রতিবাদ করুন পৃথিবীর শ্রেষ্ঠ মানুষ মহানবী হযরত মুহাম্মদ (সা) কে ব্যঙ্গ করার বিরুদ্ধেঃ
http://www.facebook.com/groups/allahmohan/
কাদের জন্য করলেন এই টিউন? বিগেনার না এডভান্সদের জন্য। এডভান্সদের এই টিউন এর কোন দরকার নাই। আর যারা নতুন তাদের জন্য এইচটিএমএল প্রথম থেকে শুরু করতে হবে। আপনার ব্লগের লিঙ্ক দেয়ার জন্য যখন টিউন দিবেন তখন ভাল কোন টিউন যার আগা-মাথা সব আছে সে টিউনের সাথে দেন। ফালতু পোষ্ট দিয়ে কোন লাভ নাই।
@Utpal Kumar Sarkar: টিউনার কে ধন্যবাদ দিবেন, তা না। তাই তো লোকে বলে- বাঙ্গালীর উপকার করার সময় একটা বাশ উপহার দিতে। যাতে অদূর নিকটে…
ধন্যবাদ কখন দেয় আপনার জানা আছে? এই জন্য সঠিক কথা বলতে নাই। কোন শিক্ষক যদি অ আ আগে না পড়িয়ে ক খ আগে পড়াতে লাগে তাহলে সে কেমন শিক্ষক! আচ্ছা ভাই যে html এর প্রাথমিক অংশ যদি না জানে তার এই টিউটোরিয়াল কি উপকারে আসবে? তাই গাধার মত কমেন্ট না করে বুঝে কমেন্ট করেন।
![jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব](https://dnc.techtunes.io/tDrive/tuner/2018/04/techtunes_fee81aa370998cccf57ea2d7dc08eaa8-368x207.jpg "jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব")
অনেক সুন্দর ।