এইচটিএমএল সিএসএস জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল হোম পেজ এইচটিএমএল পরিচিতি এবং গঠন এইচটিএমএল কোড এটিটর এইচটিএমএলের মৌলিক ধারণা এইচটিএমএল এলিমেন্ট এইচটিএমএল emty এলিমেন্ট এইচটিএমএল এট্রিবিউট এইচটিএমএল class এট্রিবিউট এইচটিএমএল style এট্রিবিউট এইচটিএমএল কমেন্ট এইচটিএমএল হেডিং এইচটিএমএল প্যারাগ্রাফ এইচটিএমএল টেক্সট ফরম্যাট এইচটিএমএল টেক্সট কোটেশন এইচটিএমএল কম্পিউটারকোড এইচটিএমএল টেবিল এইচটিএমএল লিস্ট এইচটিএমএল কালার এইচটিএমএল সিএসএস এইচটিএমএল লিংক এইচটিএমএল ইমেজ এইচটিএমএল ব্লক-ইনলাইন এলিমেন্ট এইচটিএমএল হেড এইচটিএমএল লেআউট এইচটিএমএল আইফ্রেম এইচটিএমএল জাভাস্ক্রিপ্ট এইচটিএমএল রেস্পন্সিভ এইচটিএমএল এনটিটি এইচটিএমএল অক্ষরসেট এইচটিএমএল সিম্বল এইচটিএমএল URL এনকোড এইচটিএমএল-XHTML px - em কনভার্শন

এইচটিএমএল ফর্ম

এইচটিএমএল ফর্ম এইচটিএমএল ফর্ম এলিমেন্ট এইচটিএমএল ইনপুট টাইপ এইচটিএমএল(৫) ইনপুট টাইপ এইচটিএমএল ইনপুট এট্রিবিউট

এইচটিএমএল৫

এইচটিএমএল৫ পরিচিতি ব্রাউজার সাপোর্ট এইচটিএমএল৫ এলিমেন্ট এইচটিএমএল৫ সিম্যান্টিক এলিমেন্ট এইচটিএমএল৫ মাইগ্রেশন এইচটিএমএল৫ স্টাইল গাইড

এইচটিএমএল মিডিয়া

মিডিয়া-Media ভিডিও-Video অডিও-Audio প্লাগ-ইন-PlugIn ইউটিউব-Youtube

এইচটিএমএল এপিআই

জিওলোকেশন-Geolocation ড্রাগ/ড্রপ-Drag/Drop লোকাল স্টোরেজ-LocalStorage অ্যাপ ক্যাশ-AppCache ওয়েব ওয়ার্কার-WebWorker এসএসই-SSE

এইচটিএমএল রেফারেন্স

রেফারেন্স- reference

 

এইচটিএমএল টেবিল


এক নজরে এইচটিএমএল টেবিল ট্যাগসমূহ

ট্যাগ ট্যাগের বিবরণ
<table> টেবিল তৈরি করার জন্য ব্যবহার করা হয়।
<th> টেবিলের হেডার তৈরি করার জন্য ব্যবহার করা হয়।
<tr> টেবিলের সারি(row) তৈরি করার জন্য ব্যবহার করা হয়।
<td> টেবিলের সেল বা ডেটা তৈরি করার জন্য ব্যবহার করা হয়।
<caption> টেবিলের ক্যাপশন সেট করার জন্য ব্যবহার করা হয়।
<colgroup> একের অধিক কলামকে গ্রুপ করার জন্য ব্যবহার করা হয়।
<col> <colgroup> এলিমেন্টের মধ্যে কলাম প্রোপার্টি সেট করার জন্য ব্যবহার করা হয়।
<thead> টেবিলের হেডার সেট করার জন্য ব্যবহার করা হয়।
<tbody> টেবিলের বডি সেট করার জন্য ব্যবহার করা হয়।
<tfoot> টেবিলের ফুটার সেট করার জন্য ব্যবহার করা হয়।

নিম্নে এইচটিএমএল এর সাথে সিএসএস ব্যবহার করে একটি আকর্ষণীয় টেবিল তৈরি করে দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল টেবিলের উদাহরণ</title>
	<style>
	table {
		font-family: arial, sans-serif;
		border-collapse: collapse;
		width: 100%;
	}
	td, th {
		border: 1px solid #dddddd;
		text-align: left;
		padding: 8px;
	}
	tr:nth-child(even) {
		background-color: #dddddd;
	}
	</style>
</head>
<body>
	<table>
		<tbody>
			<tr>
				<th>খেলোয়াড়ের নাম</th>
				<th>দলীয় অবস্থান</th>
				<th>দেশ</th>
			</tr>
			<tr>
				<td>মাশরাফি বিন মূর্তজা</td>
				<td>ক্যাপ্টেন এবং বোলার</td>
				<td>বাংলাদেশ</td>
			</tr>
			<tr>
				<td>সাব্বির রহমান</td>
				<td>ব্যাটসম্যান</td>
				<td>বাংলাদেশ</td>
			</tr>
			<tr>
				<td>মুস্তাফিজুর রহমান</td>
				<td>বোলার</td>
				<td>বাংলাদেশ</td>
			</tr>
			<tr>
		</tbody>
	</table>
</body>
</html>

ফলাফল




এইচটিএমএল টেবিল তৈরি

এইচটিএমএল টেবিল তৈরি করার জন্য <table> ট্যাগ ব্যবহার করা হয়।

<tr> ট্যাগের মাধ্যমে টেবিলের সারি(row) এবং <th> ট্যাগের মাধ্যমে টেবিলের হেডিং নির্ধারণ করা হয়। ডিফল্টভাবে হেডিংগুলো বোল্ড হয় এবং টেক্সটগুলো টেবিল সেলের মাঝখানে থাকে।

<td> ট্যাগের মাধ্যমে টেবিলের ডেটা বা তথ্যগুলো টেবিলের মধ্যে যোগ করা হয়। <td> ট্যাগ এর সংখ্যা যত বাড়বে টেবিলের কলাম সংখ্যাও তত বাড়বে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল টেবিল</title>
</head>
<body>
	<table border="1" style="width:100%">
		<tr>
			<th>নাম</th>
			<th>বয়স</th>
			<th>ঠিকানা</th>
		</tr>
		<tr>
			<td>সুমি আক্তার</td>
			<td>৫০</td>
			<td>খুলনা</td>
		</tr>
		<tr>
			<td>রোকেয়া আক্তার</td>
			<td>৮৫</td>
			<td>রাজশাহী</td>
		</tr>
	</table>
</body>
</html>

ফলাফল




এইচটিএমএল টেবিলের বর্ডার কলাপ্স করা

টেবিলের বর্ডারগুলোকে একত্রিত করে একটি বর্ডারে রুপান্তর করার জন্য সিএসএস border-collapse প্রোপার্টি ব্যবহার করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল টেবিল</title>
	<style>
	table, th, td {
		border: 1px solid black;
		border-collapse: collapse;
	}
	</style>
</head>
<body>
	<table style="width:100%">
		<tr>
			<th>নাম</th>
			<th>বয়স</th>
			<th>ঠিকানা</th>
		</tr>
		<tr>
			<td>তামিম</td>
			<td>৭</td>
			<td>মতিহার, রাজশাহী</td>
		</tr>
		<tr>
			<td>তাহমিদ</td>
			<td>৩</td>
			<td>মতিহার, রাজশাহী</td>
		</tr>
		<tr>
			<td>মাসুদ রানা</td>
			<td>৫</td>
			<td>মতিঝিল, ঢাকা</td>
		</tr>
	</table>
</body>
</html>

ফলাফল




এইচটিএমএল টেবিল সেল(Cell)-এ প্যাডিং যুক্ত করা

সেল প্যাডিং বলতে সেলের কন্টেন্ট এবং এর বর্ডারের মধ্যবর্তী ফাঁকা অংশকে বু্ঝায়।

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

সেলে প্যাডিং যুক্ত করার জন্য সিএসএস padding প্রোপার্টিটি ব্যবহার করুন।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল টেবিল</title>
	<style>
	table, th, td {
		border: 1px solid grey;
		border-collapse: collapse;
	}
	th, td {
		padding: 10px;
	}
	</style>
</head>
<body>
	<table style="width:100%">
		<tr>
			<th>নাম</th>
			<th>বয়স</th>
			<th>ঠিকানা</th>
		</tr>
		<tr>
			<td>তামিম</td>
			<td>৭</td>
			<td>মতিহার, রাজশাহী</td>
		</tr>
		<tr>
			<td>তাহমিদ</td>
			<td>৩</td>
			<td>মতিহার, রাজশাহী</td>
		</tr>
		<tr>
			<td>মাসুদ রানা</td>
			<td>৫</td>
			<td>মতিঝিল, ঢাকা</td>
		</tr>
	</table>
</body>
</html>

ফলাফল



এইচটিএমএল টেবিলে বর্ডার স্পেস যুক্ত করা

বর্ডার স্পেস বলতে টেবিলের সেলগুলোর মধ্যকার দূরুত্বকে বুঝায়।

টেবিলে বর্ডার স্পেস সেট করার জন্য সিএসএস border-spacing প্রোপার্টি ব্যবহার করুন।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল টেবিল</title>
	<style>
	table, th, td {
		border: 1px solid black;
		padding: 5px;
	}
	table {
		border-spacing: 15px;
	}
	</style>
</head>
<body>
	<table style="width:100%">
		<tr>
			<th>নাম</th>
			<th>পিতার নাম</th>
			<th>ঠিকানা</th>
		</tr>
		<tr>
			<td>তামিম</td>
			<td>৭</td>
			<td>মতিহার, রাজশাহী</td>
		</tr>
		<tr>
			<td>তাহমিদ</td>
			<td>৩</td>
			<td>মতিহার, রাজশাহী</td>
		</tr>
		<tr>
			<td>মাসুদ রানা</td>
			<td>৫</td>
			<td>মতিঝিল, ঢাকা</td>
		</tr>
	</table>
</body>
</html>

ফলাফল



নোটঃ আপনি যদি টেবিলে border-collapse প্রোপার্টি ব্যবহার করেন তাহলে border-spacing প্রোপার্টিটি কাজ করবে না।


এইচটিএমএল টেবিলে একাধিক কলামযুক্ত সেল

একাধিক কলামযুক্ত সেল তৈরি করার জন্য colspan এট্রিবিউট ব্যবহার করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল টেবিল</title>
	<style>
	table, th, td {
		border: 1px solid black;
		border-collapse: collapse;
	}
	th, td {
		padding: 5px;
		text-align: left;
	}
	</style>
</head>
<body>
	<table style="width:100%">
		<tr>
			<th>নাম</th>
			<th colspan="2">টেলিফোন</th>
		</tr>
		<tr>
			<td>আজিজুর রহমান</td>
			<td>+88017********</td>
			<td>+88018********</td>
		</tr>
		<tr>
			<td>জিহাদুল ইসলাম</td>
			<td>+88019********</td>
			<td>+88016********</td>
		</tr>
	</table>
</body>
</html>

ফলাফল




এইচটিএমএল টেবিলে একাধিক সারিযুক্ত সেল

একাধিক সারিযুক্ত টেবিল সেল তৈরি করার জন্য rowspan এট্রিবিউট ব্যবহার করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল টেবিল</title>
	<style>
	table, th, td {
		border: 1px solid black;
		border-collapse: collapse;
	}
	th, td {
		padding: 5px;
		text-align: left;
	}
	</style>
</head>
<body>
	<table style="width:100%">
		<tr>
			<th>নাম</th>
			<td>আজীজুর রহমান</td>
		</tr>
		<tr>
			<th rowspan="2">টেলিফোন</th>
			<td>+88017********</td>
		</tr>
		<tr>
			<td>+88018********</td>
		</tr>
	</table>
</body>
</html>

ফলাফল




এইচটিএমএল টেবিলে ক্যাপশন যুক্ত করা

এইচটিএমএল টেবিলে ক্যাপশন যুক্ত করার জন্য <caption> ট্যাগ ব্যবহার করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল টেবিল</title>
	<style>
	table, th, td {
		border: 1px solid black;
		border-collapse: collapse;
	}
	th, td {
		padding: 5px;
		text-align: left;
	}
	</style>
</head>
<body>
	<table style="width:100%">
		<caption>মাসিক সঞ্চয়</caption>
		<tr>
			<th>মাস</th>
			<th>সঞ্চয়</th>
		</tr>
		<tr>
			<td>জানুয়ারি</td>
			<td>১০০</td>
		</tr>
		<tr>
			<td>ফেব্রুয়ারী</td>
			<td>৫০</td>
		</tr>
	</table>
</body>
</html>

ফলাফল



নোটঃ <caption> ট্যাগটি অবশ্যই <table> ট্যাগের পর পরই যুক্ত করতে হবে।


অধ্যায়ের সারাংশ

  1. টেবিল তৈরি করার জন্য এইচটিএমএল <table> এলিমেন্ট ব্যবহার করা হয়।
  2. টেবিলের সারি তৈরি করার জন্য এইচটিএমএল <tr> এলিমেন্ট ব্যবহার করা হয়।
  3. টেবিলে ডেটা যোগ করার জন্য এইচটিএমএল <td> এলিমেন্ট ব্যবহার করা হয়।
  4. টেবিলের হেডিং তৈরি করার জন্য এইচটিএমএল <th> এলিমেন্ট ব্যবহার করা হয়।
  5. টেবিলের ক্যাপশন সেট করার জন্য এইচটিএমএল <caption> এলিমেন্ট ব্যবহার করা হয়।
  6. টেবিলের বর্ডার সেট করার জন্য সিএসএস border প্রোপার্টি ব্যবহার করা হয়।
  7. টেবিলের সেলগুলোর বর্ডারকে একত্রিত করার জন্য সিএসএস border-collapse প্রোপার্টি ব্যবহার করা হয়।
  8. সেলগুলোর মধ্যে প্যাডিং যুক্ত করার জন্য সিএসএস padding প্রোপার্টি ব্যবহার করা হয়।
  9. সেলের টেক্সট এলাইন সেট করার জন্য সিএসএস text-align প্রোপার্টি ব্যবহার করা হয়।
  10. সেলগুলোর মধ্যে স্পেস সেট করার জন্য সিএসএস border-spacing প্রোপার্টি ব্যবহার করা হয়।
  11. একাধিক কলামযুক্ত সেল তৈরি করার জন্য colspan এট্রিবিউট ব্যবহার করা হয়।
  12. একাধিক সারিযুক্ত সেল তৈরি করার জন্য rowspan এট্রিবিউট ব্যবহার করা হয়।