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;
}

උදාහරණය . වගුව කඩා නොවැටෙන පරිදි කොටුව පුළුල් කරමු

පෙර උදාහරණයේ වගුව කඩා වැටීමේ ගැටළුව නිවැරදි කිරීම සඳහා, දෙවන පේළියේ කොටු වලින් එකක් මකා දැමීමට උත්සාහ කරමු (මෙය අනිවාර්යයෙන්ම අපගේ 1 කොටුවට යටින් පිහිටා ඇති 4 කොටුව නොවේ, ඕනෑම එකක් මකා දැමිය හැකිය, අපි 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 ගුණාංගය,
වගුවේ තීරු එකට යොදා ගනී