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 အရည်အသွေး,
ဇယား၏ကော်လံများကို ပေါင်းစည်းပေးသည်