HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৫] :: ওয়েব সাইট এ টেবিল তৈরি

আসসালামুয়ালাইকুম।।

অনেক দিন পর সেই পুরনো চেইন টিউনে ফিরে আসছি।। আশা রাখছি সবাই খুব ভাল আছেন।। html,css.js  ও  phpনিয়ে ৪র্থ পর্ব শেষ করে ৫ম পর্ব সুরু করতে যাচ্ছি।।

তাহলে এবার কাজের দিকে আসা যাক।। আজ আমারা সিখব কিভাবে ওয়েব সাইট এ টেবিল বানানো যায়।। টেবিল এক্তি অতান্ত গুরুত্ব পূর্ণ জিনিষ।। টেবিল এর মাধ্যমে ওয়েব এ অনেক কিছুই করা যায়।। তাই এটা ভালভাবে সিখতে হবে, তবে এটা বানানো খুবই সহজ এবং এর ব্যাবহার ও সহজ ।। তবে চলুন টেবিল এর কাজ সুরু করে দি আর দেরি না করে।।

প্রথমেই একটি উদাহরণ দিবো তারপর আলোচনা ।।

নিচের কোড গুলো দেখেন ত কিছু বুঝতে পারেন কি না ।।

<html>
<head>
<title>www.techtunes.io</title>
</head>
<table border="1">
<tr>
<th>Tune</th>
<th>Read</th>
<th>Like</th>
<th>Comment</th>
</tr>
<tr>
<td>01</td>
<td>750</td>
<td>200</td>
<td>50</td>
</tr> <tr>
<td>02</td>
<td>720</td>
<td>175</td>
<td>42</td>
</tr> <tr>
<td>03</td>
<td>500</td>
<td>115</td>
<td>25</td>
</tr>
</table>
</body>
</html>

উপরের কোড গুলর জন্য নিচের ছবির মত পেজ আসবে ।।

এখানে দেখা যাচ্ছে ১ম টিউনটি পড়েছেন ৭৫০ জন, লাইক করেছেন ২০০ জন, কমেন্ট করেছেন ৫০ জন ।

২য় টিউনটি পড়েছেন ৭২০ জন, লাইক করেছেন ১৭৫ জন, কমেন্ট করেছেন ৪২ জন ।

৩য়  টিউনটি পড়েছেন ৫০০ জন, লাইক করেছেন ১১৫ জন, কমেন্ট করেছেন ২৫ জন ।

এমন একটা টেবিল বানাতে হলে এই কোড গুলো ব্যাবহার করতে হবে ।। এবার আপনি নিজে নিজে চেষ্টা করে দেখুন।।

এবার আমরা সরাসরি দেখব কিভাবে এটা কাজ করে, ছবি দেখলে নিশ্চয়ই বুঝতে পারবেন,

<table border="1"> 

এখানে border="1" এর মাধ্যমে টেবিলের জন্য সিঙ্গেল বর্ডার ব্যবহার করা হয়েছে , প্রয়োজন অনুসারে 1 এর স্থানে 2,3,4 ইত্যাদি ব্যবহার করা যাবে।
টেবিলের প্রতিটা সারি তৈরির জন্য

<tr></tr>

ব্যবহার করা হয়, এবং প্রতিটা সেল তৈরির জন্য

<td></td>

ব্যবহার করা হয়।

<th></th>

এর মাধ্যমে টেবিল হেডার তৈরি করা হয়েছে।

<th>Book</th>

এর মধ্যের Book লেখাটি একটু মোটা দেখাবে।
টেবিলের মধ্যে কোন সেল খালি রাখার জন্য

<td></td>

এর মাঝে কিছু না লেখলেই হবে। শুধুমাত্র

<td></td>

ব্যবহার করতে হবে।
সাইটের নেভিগেশন বার তৈরির জন্য টেবিল ব্যবহার করা যেতে পারে, এক্ষেত্রে প্রতিটা সেলের লেখার সাথে লিংক তৈরি করে দিলেই হবে যেমন

<td><a href="www.techtunes.io"> Techtunes</a></td>

অথবা

<th><a href="www.techtunes.io"> Techtunes</a></th>

টেবিল টা ভাল মত চর্চা করা দরকার তাই আজ আর এর সাথে বেশি কিছু দিলাম না ।। টেবিল নিয়ে যদি কথাও কোন সমস্যা থেকে থাকে তবে তা কমেন্ট এ নিশ্চয়ই জানাবেন ।। আগামি পর্বে আবার ফিরে আসব নতুন কিছু নিয়ে সে পর্যন্ত আল্লাহ্‌ হাফেজ।।

>>>ভাল লাগলে কমেন্ট করতে ভুলবেন না<<<

   ফেসবুক এ আমাকে পেতে নিচে ক্লিক করুন---

Level 0

আমি kazi Kowshik। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 5 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 22 টি টিউন ও 281 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

আচ্ছা ভাইয়া,
প্রথম পর্বটি কোথায়?

Level 0

Sir, U can Tech Me? Please………………..

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

Level 0

হা ভাই ভাল হসসে । চালিয়ে যান।। আশা করি programming নিয়েও আপনি টিউন করবেন।।

nice, amar html finish hoye gese, Bhaia, css niye tune korben ki?

ভাই খুব সুন্দর হইছে, চালিয়ে যান ।

Level 0

darun…mohat kaj…chalie jan….

Level 0

চালায়া যান ধন্যবাদ

gud gud

Level 0

Bhalo hosa bro chali jan apni koi thakaN?