HTML টেবিল কিভাবে কি ?

আজকে আমরা তৈরী করবো একটা ছোট্ট টেবিল। HTML টেবিল তৈরী করতে হলে আমাদের প্রয়োজন হবে তিনটা ট্যাগ।

এগুলো হলো <table></table>, <tr></tr>, <td></td>. আরো টেবিল ট্যাগ আছে। কিন্তু এগুলো দিয়েই আমাদের কাজ চলবে। আর আজকে আমরা কিছু স্টাইল ও শিখবো। তাহলে চলো শুরু করা যাক।

প্রথমে একটি HTML ফাইল তৈরী করে নাও। কিভাবে করতে হবে? এই পোস্টটি দেখো: স্মার্টফোনে ওয়েব ডিজাইন

HTML টেবিল

উপরের পোস্ট টি ফলো করে ফাইল তৈরী করে নাও। এখন আমাদের টেবিল তৈরির কাজ শুরু। তোমাদের কোডটি দেখো নিচের কোডের মতো দেখা যায় কিনা।

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>
		<h1>My First Heading</h1>
		<p>My first paragraph.</p>
	</body>
</html>

এখন <body> ট্যাগ এর মধ্যে আমাদের টেবিলটি তৈরী করবো।

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>
		<table></table>
	</body>
</html>

এখন দেখো টেবিল ট্যাগ দিয়েছি। এটি ডাবল ট্যাগ তাই শুরু ও শেষ আছে। আমাদের টেবিল তৈরী করতে আর কি কি প্রয়োজন ? সারি ও কলাম। তাই না?

সারি তৈরী করতে আমরা ব্যবহার করবো <tr></tr> এর ভেতরে যা থাকবে সব একটা সারি তে দেখা যাবে। tr মানে হলো Table Row. তাহলে চলো কোডটি দেখি।

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>
		<table>
      			<tr></tr>
		</table>
	</body>
</html>

দেখো টেবিল ট্যাগ শুরু ও শেষ এর ভেতরে আছে <tr></tr> ট্যাগ। মানে হলো টেবিল এর মধ্যে টেবিলের সারি। এখন আমরা তৈরী করবো কলাম।

কলাম হবে টেবিল এর তথ্য দিয়ে। অর্থাৎ আমরা কি তথ্য রাখতে চাই তা সাজানো হোম কলাম আকারে। তাই আমরা ব্যবহার করবো <td></td> মানে হলো Table Data.

td মানে হলো Table Data.

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

আমরা এতক্ষন এ গঠন রেডি করেছি। এখন যা তথ্য দিবো তা দেখা যাবে। তাহলে চলো আমরা এক সারি তে তিনটি ফুল এর নাম রাখি। তিনটি নাম আমরা তিনটি কলাম এ রাখবো।

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>
		<table>
			<tr>
				<td>Rose</td>
				<td>Lily</td>
				<td>Sun Flower</td>
			</tr>
		</table>
	</body>
</html>

দেখো ডাটা গুলো একই বরাবর থেকে শুরু হয়েছে। কিন্তু tr এর থেকে একটু ডান দিকে সরে গিয়েছে। এটা হলো কোড লেখার আদর্শ পদ্ধতি।

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

“এক ট্যাব” বা “চারটা স্পেস”

কম্পিউটার কিবোর্ডে ট্যাব বাটন থাকে। ফোনে না ও থাকতে পারে তাই তুমি স্পেস ব্যবহার করতে পারো। চলো দেখি কি দেখা যায় ব্রাউজারে।

তুমি ফোনে কোড করে থাকলে প্রিভিউ তে ক্লিক করো। আর কম্পিউটারে থাকলে ডাবল ক্লিক করে মজিলা বা ক্রোম এ ওপেন করো।

HTML Table
আমার এখানে এইরকম আসছে। তোমার কি অবস্থা? কমেন্টে জানাও

CSS এর ব্যবহার

দেখো এইখানে কিন্তু বোঝা যাচ্ছে না কোন কলাম কতটুকু জায়গা নিয়েছে।

চলো একটু বর্ডার দিয়ে দেখি। বর্ডার দেয়ার জন্য আমরা internal CSS ব্যবহার করবো।

CSS নিয়ে পরে একদিন বিস্তারিত আলোচনা করবো। এখন একটু বেসিক দেখো।

ইন্টারনাল CSS লিখতে হলে head ট্যাগ এর মধ্যে style ট্যাগ লিখতে হবে। style ট্যাগ ও ডাবল ট্যাগ। এর মধ্যে আমরা CSS লিখবো। চলো দেখি।

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
		<style>
			td{
				border:1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>Rose</td>
				<td>Lily</td>
				<td>Sun Flower</td>
			</tr>
		</table>
	</body>
</html>

দেখো style এর মধ্যে আমরা CSS লিখেছি। CSS লিখার গঠন হলো selector { property : value; }

CSS লিখার গঠন হলো selector { property : value; }

আমাদের td তে বর্ডার প্রয়োজন। তাই সিলেক্টর td .

আর বর্ডার এর প্রপার্টি হলো border . এবং ভ্যালু আমরা দিয়েছি তিনটা। কারণ bordar প্রপার্টি তিনটা ভ্যালু নিতে পারে।

এগুলো হলো বর্ডার এর সাইজ স্টাইল কালার ।

বর্ডার এর সাইজ স্টাইল কালার

আমি দিয়েছি 1px মানে হলো আমি ১ পিক্সেল মোটা বর্ডার চাই। পিক্সেল কি জানো না? গুগলে সার্চ দাও।

আচ্ছা এর পর দিয়েছি solid মানে সম্পূর্ণ বর্ডার একটা দাগ এর হবে।

তুমি চাইলে dotted, solid, double, dashed ও ব্যাবহার করতে পারো।

এর পর হলো কালার। তুমি কি কালার এর বর্ডার চাও তা এখানে দিবে। আমি কালো দিয়েছি।

তুমি চাইলে কালার এর হেক্স কোড ও দিতে পারো। কালো এর হেক্স কোড হলো #000

এখন দেখি আমাদের আউটপুট কি আসলো। তোমাদের টা কমেন্টে জানাও।

দেখো প্রত্যেকটা td এর পাশে বর্ডার এসেছে।

এখন চলো আমরা টেবিলেও বর্ডার দিয়ে দেখি কেমন দেখা যায়। কোডটি লিখে ফেলো।

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
		<style>
			table, td{
				border:1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>Rose</td>
				<td>Lily</td>
				<td>Sun Flower</td>
			</tr>
		</table>
	</body>
</html>

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

দেখেছো? টেবিল এর চারপাশে একটা বর্ডার এসেছে।

এখন চলো আমরা আরেকটা সারি বাড়াই। কিভাবে? আমরা আমাদের আগের কোড থেকে <tr> শুরু থেকে </tr > শেষ পর্যন্ত কপি করে পেস্ট করবো।

তুমি চাইলে হাতে ও লিখতে পারো। কি দরকার শুধু শুধু কষ্ট করার? দেখো কোডটি।

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
		<style>
			table, td{
				border:1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>Rose</td>
				<td>Lily</td>
				<td>Sun Flower</td>
			</tr>
			<tr>
				<td>Rose</td>
				<td>Lily</td>
				<td>Sun Flower</td>
			</tr>
		</table>
	</body>
</html>

দেখো tr গুলো কিন্তু একই বরাবর কারণ তারা একই ট্যাগ টেবিল এর মধ্যে।

HTML টেবিল

এখন চলো ফুল এর নাম গুলো পরিবর্তন করে ফেলি। তাহলে নিচের মতো কোড হবে।

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
		<style>
			table, td{
				border:1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>Rose</td>
				<td>Lily</td>
				<td>Sun Flower</td>
			</tr>
			<tr>
				<td>Shuvo </td>
				<td>The </td>
				<td>Coder</td>
			</tr>
		</table>
	</body>
</html>

চলো দেখি কেমন দেখা যায়।

দেখো কলাম গুলো সমান জায়গা নিয়েছে। তাহলে আমরা কি বুঝলাম? কলাম সব সময় সমান জায়গা নেয়।

দেখো প্রথম কলাম এ Shuvo লেখাটি একটু বোরো তাই উপরে সেল এ জায়গা একটু ফাঁকা রয়েছে। আবার লাস্ট কলামে ফুল এর নাম বড় তাই নিচের সেল এ জায়গা ফাঁকা রয়েছে।

তাহলে আজকে আমরা শিখলাম কিভাবে টেবিল তৈরী করতে হয়। পরবর্তীতে দেখবো কিভাবে আরো একটু এডভান্স কাজ করা যায় যেমন দুইটি সেল কে এক করা , কালার করা ইত্যাদি।