rowspan অ্যাট্রিবিউট

rowspan অ্যাট্রিবিউটটি HTML সারি টেবিলে একত্রিতকরণ নিয়ন্ত্রণ করে। th এবং td ট্যাগে প্রয়োগ করা হয়।

গৃহীত মান: 1 থেকে শুরু করে পূর্ণসংখ্যা।

কিভাবে ব্যবহার করবেন: আমরা যেকোনো td বা th সেলে এই অ্যাট্রিবিউট যোগ করি। যদি, উদাহরণস্বরূপ, rowspan কে 2 মানে সেট করা হয় - তাহলে যে সেলটিতে এটি সেট করা হয়েছে, সেটি টেবিলের উচ্চতায় দুটি সারি দখল করবে। একই সময়ে, নীচের সারির সেলগুলি কোথাও যাবে না, আমাদের প্রসারিত সেলটি সেগুলিকে স্থানচ্যুত করবে এবং টেবিলটি ভেঙে পড়বে। এটি যাতে না ঘটে, তার জন্য নীচের সারি থেকে একটি সেল মুছে ফেলতে হবে।更好的 বোঝার জন্য উদাহরণ দেখুন।

উদাহরণ . একত্রীকরণ ছাড়া টেবিল

আসুন একটি টেবিল দেখি যেখানে কোনো একত্রীকরণ নেই, যার সাথে আমরা পরে কাজ করব:

<table>
	<tr>
		<td>cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell5</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

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

উদাহরণ . আসুন একটি সেলকে দুটি সারি পর্যন্ত প্রসারিত করি

এখন আসুন 1 নম্বর সেলটিকে দুটি সারি পর্যন্ত প্রসারিত করি, এটিকে rowspan অ্যাট্রিবিউট 2 মানে সেট করে। আমরা দেখব যে এটি এর নীচের সারির সেলগুলিকে স্থানচ্যুত করছে এবং টেবিলটি ভেঙে পড়ছে:

<table>
	<tr>
		<td rowspan="2">cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell5</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

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

উদাহরণ . টেবিল ভেঙে না গিয়ে একটি সেল প্রসারিত করা

পূর্ববর্তী উদাহরণ থেকে টেবিল ভেঙে পড়ার সমস্যা ঠিক করতে, আসুন দ্বিতীয় সারি থেকে একটি সেল মুছে ফেলার চেষ্টা করি (এবং এটি অগত্যা 4 সেল নয়, যা সরাসরি আমাদের 1 সেলের নীচে অবস্থিত, যেকোনোটি মুছতে পারেন, আমরা 5 নম্বর সেলটি মুছব):

<table>
	<tr>
		<td rowspan="2">cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

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

উদাহরণ . আসুন একটি সেলকে `3` সারি পর্যন্ত প্রসারিত করি

এখানে আসুন আমাদের সেলটিকে দুটি সারি নয়, বরং 3 সারি পর্যন্ত প্রসারিত করি, এটিকে rowspan 3 মানে সেট করি। একই সময়ে তৃতীয় সারি থেকে একটি সেল মুছে ফেলি (7 সেল, 8 বা 9 - কোনটি মুছলেই হবে), যাতে টেবিল না ভাঙে:

<table>
	<tr>
		<td rowspan="3">cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell9</td>
	</tr>
</table>

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

উদাহরণ . আসুন আরও `2` কলাম প্রসারিত করি

প্রথম সেলের পাশাপাশি 2 সেলটিকে আরও 2 কলাম পর্যন্ত প্রসারিত করি। এই জন্য 2 সেলটিতে আমরা colspan যোগ করি 2 মানে সেট করে। একই সময়ে 3 সেলটি মুছে ফেলি, যাতে টেবিল না ভাঙে:

<table>
	<tr>
		<td rowspan="3">cell1</td>
		<td colspan="2">cell2</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell9</td>
	</tr>
</table>

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

আরও দেখুন

colspan অ্যাট্রিবিউট,
যা টেবিলের কলামগুলিকে একত্রিত করে