HTML টেবিল:ধাপে ধাপে নির্দেশিকা

HTML টেবিল হল ডেটার সেট যা সারি এবং কলামে উপস্থাপিত হয়। একটি HTML টেবিল তৈরি করতে ব্যবহার করুন <table> উপাদান। ব্যবহার করতে পারেন <tr> সারি তৈরি করতে, <td> কলাম তৈরি করতে, এবং <th> টেবিল হেডার তৈরি করতে।

সারি এবং কলাম ব্যবহার করে সহজে বোঝার উপায়ে ডেটা উপস্থাপন করতে টেবিলগুলি ব্যবহার করা হয়। আমরা প্রতিদিন টেবিলের মুখোমুখি হই, বাসের সময়সূচী যা আরোহীদের বলে যে বাস কখন আসবে, আমরা যে খাবার খাই তার উপাদানের টেবিল পর্যন্ত।

HTML-এ, টেবিলগুলি ডেটা উপস্থাপনের একটি পদ্ধতি হিসাবে ব্যবহৃত হয়। এই টিউটোরিয়ালটি উদাহরণ সহ আলোচনা করবে, এইচটিএমএল টেবিলের বুনিয়াদি, একাধিক কলাম এবং সারি বিস্তৃত সেল এবং কিভাবে একটি টেবিলকে স্টাইল করা যায়। এই টিউটোরিয়ালের শেষ নাগাদ, আপনি HTML এ টেবিল তৈরি এবং কাজ করার ক্ষেত্রে একজন বিশেষজ্ঞ হয়ে উঠবেন।

একটি HTML টেবিল তৈরি করা

টেবিলগুলি হল ডেটার সেট যা সারি এবং কলামে উপস্থাপিত হয়। একটি টেবিল ব্যবহার করে, একটি ডেটাসেটে মানগুলির একটি সেটের মধ্যে সংযোগগুলি দেখতে সহজ৷

HTML-এ, <table> ব্যবহার করে টেবিলগুলিকে সংজ্ঞায়িত করা হয় উপাদান <table>-এর মধ্যে উপাদান, আপনি ব্যবহার করতে পারেন:

• সারি তৈরি করতে
• কলাম তৈরি করতে
• টেবিল হেডার তৈরি করতে।

ধরুন আমরা একটি টেবিল তৈরি করতে চেয়েছিলাম যা একটি কফি শপে বিক্রি হওয়া কফিগুলিকে তাদের দামের পাশাপাশি তালিকাভুক্ত করে, যেমন আমরা উপরে করেছি। এই টেবিলে দুটি কলাম, কফি এবং মূল্য এবং তিনটি সারি থাকা উচিত। HTML-এ এই টেবিলটি সংজ্ঞায়িত করতে আমরা নিম্নলিখিত কোড ব্যবহার করতে পারি:

<table>
	<tr>
		<th>Coffee</th>
		<th>Price</th>
	</tr>
	<tr>
		<td>Espresso</td>
		<td>$2.00</td>
	</tr>
	<tr>
		<td>Cappuccino</td>
		<td>$2.50</td>
	</tr>
	<tr>
		<td>Latte</td>
		<td>$2.75</td>
	</tr>
</table>

এখানে আমাদের টেবিলের ফলাফল:

এই উদাহরণে, আমরা এক সারি শিরোনাম, দুটি কলাম এবং টেবিল ডেটার তিনটি সারি সহ একটি টেবিল তৈরি করেছি। আসুন আমাদের কোড ভাঙ্গা যাক।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগদানের পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

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

প্রথমে, আমরা <table> ব্যবহার করেছি এইচটিএমএল ট্যাগ আমাদের ওয়েব পৃষ্ঠাকে একটি টেবিল তৈরি করার নির্দেশ দেয়। আমরা তারপর একটি <tr> ব্যবহার করেছি একটি সারি তৈরি করতে ট্যাগ করুন এবং <th> আমাদের টেবিলের জন্য কলাম শিরোনাম সংজ্ঞায়িত করতে ট্যাগ. এই ক্ষেত্রে, আমাদের কলাম শিরোনাম হল Coffee এবং Price .

এরপর, আমরা আরো তিনটি <tr> ব্যবহার করেছি টেবিলের ডেটা কক্ষে আমাদের কফির নাম এবং দাম প্রদর্শন করে এমন তিনটি টেবিল সারিগুলির প্রতিটি তৈরি করতে ট্যাগ। এই প্রতিটি <tr> ট্যাগগুলিতে একটি <td> থাকে ট্যাগ, যা টেবিলের একটি কলাম ঘর প্রতিনিধিত্ব করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, td উপাদানটি Espresso উপস্থাপন করতে ব্যবহৃত হয় এবং $2.00 আমাদের প্রথম কফি এন্ট্রিতে৷

টেবিল স্টাইলিং

HTML-এ আমরা একটি টেবিলকে স্টাইল করতে পারি এমন অনেক উপায় রয়েছে।

সীমানা

HTML-এ, ডিফল্টরূপে টেবিলের কোনো সীমানা নেই। এর মানে হল যে যদি আমরা আমাদের টেবিলে একটি বর্ডার দেখতে চাই, আমাদের CSS ব্যবহার করতে হবে। CSS বর্ডার অ্যাট্রিবিউট ব্যবহার করা হয় একটি HTML টেবিলে বর্ডার যোগ করতে।

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

table, th, td {
	border: 1px solid black;
}

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

এখন আমাদের টেবিলের একটি বর্ডার রয়েছে, যা আমাদের টেবিলের ডেটা পড়া সহজ করে তোলে। যাইহোক, আমরা উপরে যে স্টাইলটি তৈরি করেছি তা প্রতিটি ঘরের চারপাশে একটি সীমানা স্থাপন করে এবং প্রতিটি সীমানাকে আলাদা করে। আমরা যদি প্রতিটি সীমানাকে একটিতে ভেঙে দিতে চাই, আমরা বর্ডার-কলেপস সম্পত্তি ব্যবহার করতে পারি। এই কাজটি সম্পন্ন করতে আমরা যে কোডটি ব্যবহার করব তা এখানে:

table {
	border-collapse: collapse
}

আমাদের নতুন টেবিল এই মত দেখায়:

আপনি দেখতে পাচ্ছেন, আমাদের টেবিলে এখন একটি সীমানা রয়েছে, প্রতিটি কক্ষ এবং টেবিলের চারপাশে একটি সীমানা নয়।

সারিবদ্ধ শিরোনাম

ডিফল্টরূপে, শিরোনামগুলি একটি ঘরের কেন্দ্রে সারিবদ্ধ করা হয়। আপনি যদি একটি কক্ষের বাম বা ডানদিকে একটি শিরোনাম সারিবদ্ধ করতে চান, আপনি <th>-এ একটি পাঠ্য-সারিবদ্ধ বৈশিষ্ট্য নির্দিষ্ট করতে পারেন আপনার টেবিলে ট্যাগ করুন (মনে রাখবেন, <th> শিরোনাম নির্দিষ্ট করতে ট্যাগ ব্যবহার করা হয়।

আপনি যে কোডটি ব্যবহার করবেন তা এখানে:

th {
	text-align: left;
}

যদি আমরা উপরে থেকে আমাদের টেবিলে এই স্টাইলটি প্রয়োগ করি, তাহলে নিম্নলিখিত টেবিলটি তৈরি হয়:

আমাদের উপরের টেবিলটি আমাদের টেবিলের বাম দিকে কলামের শিরোনামগুলি সারিবদ্ধ করেছে৷

একটি এইচটিএমএল টেবিলে প্রয়োগ করা যেতে পারে এমন অনেক অন্যান্য শৈলী রয়েছে, কিন্তু এই টিউটোরিয়ালের উদ্দেশ্যে আমরা টেবিলের সীমানা এবং ভেঙে যাওয়া সীমানার উপর ফোকাস করেছি। সামনের দিকে, আমরা টিউটোরিয়ালের এই অংশে সংজ্ঞায়িত শৈলীগুলি ব্যবহার করতে যাচ্ছি যাতে আমাদের ডেটা সহজে পড়া যায়৷

একাধিক সারি এবং কলাম বিস্তৃত

আপনি যখন টেবিলের সাথে কাজ করছেন, তখন আপনি একটি সেলকে একাধিক সারি বা কলাম স্প্যান করতে চাইতে পারেন।

উদাহরণ স্বরূপ, ধরুন আমরা আমাদের প্রাইস কলামটি আগের থেকে দুটি কলামের উপর বিস্তৃত করতে চেয়েছিলাম। এখানেই কলস্প্যান এবং রোস্প্যান অ্যাট্রিবিউটগুলি আসে৷ একটি টেবিলে একাধিক সারি স্প্যান করতে Rowspan ব্যবহার করা হয় এবং একটি টেবিলে একাধিক কলাম স্প্যান করতে colspan ব্যবহার করা হয়৷

এখানে একটি টেবিলের একটি উদাহরণ যা Price স্প্যান করতে কলস্প্যান ব্যবহার করে দুই কলামের উপরে কলাম:

<table>
    <tr>
        <th>Coffee</th>
        <th colspan="2">Price</th>
    </tr>
    <tr>
        <td>Espresso</td>
        <td>$2.00 (new)</td>
        <td>$2.00 (old)</td>
    </tr>
</table>

এখানে আমাদের টেবিল কিভাবে প্রদর্শিত হয়:

আপনি দেখতে পাচ্ছেন, দামের কলামটি এখন দুটি সারিতে বিস্তৃত। এছাড়াও, আপনি একইভাবে সারি স্প্যান ব্যবহার করতে পারেন এমন একটি ঘর তৈরি করতে যা একাধিক সারিতে বিস্তৃত।

ধরুন আপনার কাছে একটি টেবিল রয়েছে যা মেনুতে একটি নির্দিষ্ট কফির বিবরণ সংরক্ষণ করে৷

আপনি কফির ছাড়কৃত মূল্য সম্পর্কে তথ্য চান—যা প্রতি মাসের শেষ দিনে গ্রাহকদের কফি কিনতে প্রলুব্ধ করার জন্য প্রয়োগ করা হয়—এবং একই শিরোনাম Price-এর অধীনে প্রদর্শিত নিয়মিত মূল্য। , দামের পার্থক্য করতে লেবেল সহ। আপনি এই কাজটি সম্পন্ন করতে নিম্নলিখিত কোড ব্যবহার করতে পারেন:

<table>
        <tr>
            <th>Coffee</th>
            <td>Espresso</td>
        </tr>
        <tr>
            <th rowspan="2">Price</th>
            <td>$2.00 (regular)</td>
        </tr>
        <tr>
            <td>$1.80 (discounted)</td>
        </tr>
</table>

এখানে আমাদের টেবিলের আউটপুট:

এই উদাহরণে, আপনি দেখতে পাচ্ছেন যে Price লেবেল দুটি সারি জুড়ে বিস্তৃত।

টেবিল হেডার, বডি এবং ফুটার সংজ্ঞায়িত করা

আপনি যখন একটি টেবিলের সাথে কাজ করছেন, তখন তিনটি ট্যাগ আছে যা আপনাকে আপনার ডেটাকে আরও ভালোভাবে গঠন করতে সাহায্য করতে ব্যবহৃত হয়।

<thead> ট্যাগ আপনার টেবিলের শিরোনাম, <tbody> সংজ্ঞায়িত করতে ব্যবহৃত হয় ট্যাগ আপনার টেবিলের বিষয়বস্তু এবং <tfoot> সংজ্ঞায়িত করতে ব্যবহৃত হয় ট্যাগ আপনার টেবিলের ফুটার নির্ধারণ করতে ব্যবহৃত হয়।

এটি কীভাবে কাজ করে তা ব্যাখ্যা করার জন্য প্রথম উদাহরণ থেকে আমাদের টেবিলটি নেওয়া যাক। ধরুন আমরা একটি টেবিল তৈরি করছি যেখানে একটি কফি শপে বিক্রি হওয়া সমস্ত কফির তালিকা রয়েছে। আমাদের কোড পড়া সহজ করার জন্য, আমরা আমাদের টেবিলের হেডার, বডি এবং ফুটার আলাদা করতে চাই। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:

<table>
	<thead>
	<tr>
		<th>Coffee</th>
		<th>Price</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>Espresso</td>
		<td>$2.00</td>
	</tr>
	<tr>
		<td>Cappuccino</td>
		<td>$2.50</td>
	</tr>
	<tr>
		<td>Latte</td>
		<td>$2.75</td>
	</tr>
	</tbody>
	<tfoot>
		<tr>
			<th>Last Updated</th>
			<td>January 9th, 2020</td>
		</tr>
	</tfoot>
</table>

এই টেবিলে, আমরা <thead> ব্যবহার করেছি , <tbody> , এবং <tfoot> ট্যাগগুলি যথাক্রমে আমাদের টেবিল হেডার, বডি এবং ফুটারকে সংজ্ঞায়িত করতে পারে।

<thead> ট্যাগটি আমাদের হেডার সারিকে আলাদা করতে ব্যবহার করা হয়, যেটিতে Coffee রয়েছে এবং Price টেবিল শিরোনাম। <tbody> ট্যাগটি সারিগুলি সংরক্ষণ করতে ব্যবহৃত হয় যাতে আমাদের টেবিলের প্রধান ডেটা থাকে (কফির দাম)।

<tfoot> ট্যাগ একটি সারি সঞ্চয় করতে ব্যবহৃত হয় যা বলে যে টেবিলটি শেষবার আপডেট করা হয়েছিল। আমরা এই ডেটাটিকে একটি ফুটার ট্যাগে রেখেছি কারণ এটি আমাদের কফি এবং তাদের দামের তালিকার জন্য একটি এন্ট্রি নয়৷

যদিও এই ট্যাগগুলি ঐচ্ছিক, তারা আপনাকে HTML-এ একটি টেবিলকে আরও ভালভাবে গঠন করতে সাহায্য করে৷

HTML এ টেবিল ক্যাপশন

<caption> ট্যাগ একটি শিরোনাম যোগ করতে ব্যবহৃত হয়, এটি একটি caption নামেও পরিচিত , আপনার টেবিলে।

<caption> <table> খোলার পরপরই ট্যাগ বসাতে হবে আপনার টেবিলে ট্যাগ করুন। এখানে <caption>-এর একটি উদাহরণ দেওয়া হল হেডার Coffee Menu যোগ করতে ট্যাগ ব্যবহার করা হচ্ছে আমাদের কফির তালিকায়:

<table>
	<caption>Coffee Menu</caption>
	<tr>
		<th>Coffee</th>
		<th>Price</th>
	</tr>
	<tr>
		<td>Espresso</td>
		<td>$2.00</td>
	</tr>
	<tr>
		<td>Cappuccino</td>
		<td>$2.50</td>
	</tr>
	<tr>
		<td>Latte</td>
		<td>$2.75</td>
	</tr>
</table>

আমাদের টেবিল নিম্নরূপ প্রদর্শিত হয়:

আমাদের কোডে, আমরা <caption> ব্যবহার করি হেডার Coffee Menu যোগ করতে ট্যাগ করুন টেবিলে।

উপসংহার

সারণীগুলিকে আপনি যতটা সহজ বা জটিল করতে চান ততটা হতে পারে, এবং এই নিবন্ধটি HTML-এ টেবিলের মূল বিষয়গুলি সম্পর্কে আপনার যা জানা দরকার সেগুলিকে কভার করেছে৷

এই নিবন্ধে আলোচনা করা হয়েছে কিভাবে HTML এ একটি টেবিল তৈরি করা যায়, কিভাবে একটি টেবিলে মৌলিক শৈলী প্রয়োগ করা যায়, কিভাবে একটি টেবিল গঠন করা যায়, কিভাবে একাধিক কলাম এবং সারির উপর ঘর স্প্যান করতে হয় এবং কিভাবে একটি টেবিলের সাথে ক্যাপশন ব্যবহার করতে হয়।

এখন আপনার কাছে এইচটিএমএল-এ একজন প্রো-এর মতো টেবিলের সাথে কাজ শুরু করার জন্য প্রয়োজনীয় জ্ঞান রয়েছে!