colspan ဂုဏ်သတ္တိ

colspan ဂုဏ်သတ္တိသည် HTML ဇယား၏ ကော်လံများပေါင်းစည်းခြင်းကို ထိန်းချုပ်ပါသည်။ th နှင့် td တပ်ခ်များအတွက် အသုံးပြုပါသည်။

လက်ခံသောတန်ဖိုး: 1 မှ စတင်သော ကိန်းပြည့်။

အသုံးပြုနည်း: မည်သည့် td သို့မဟုတ် th ဆဲလ်သို့မဆို ဤဂုဏ်သတ္တိကို ထည့်သွင်းပါ။ ဥပမာ၊ colspan ကို 2 တန်ဖိုးသတ်မှတ်ပါက၊ ထိုသတ်မှတ်ထားသောဆဲလ်သည် ဇယား၏ ကော်လံနှစ်ခုကို ယူပါလိမ့်မည်။ ဤသို့ဖြစ်လျှင် ညာဘက်ရှိ ကပ်လျက်ဆဲလ်များ ပျောက်ကွယ်မသွားဘဲ၊ ကျွန်ုပ်တို့၏ ကျယ်ပြန့်လာသောဆဲလ်က ၎င်းတို့ကို ဖယ်ရှားပြီး ဇယားပြိုလဲသွားပါမည်။ ထိုသို့မဖြစ်စေရန်၊ ညာဘက်ရှိ ဆဲလ်များထဲမှ တစ်ခုကို ဖျက်ရန်လိုအပ်ပါသည်။ ပိုမိုနားလည်စေရန် နမူနာများကို ကြည့်ပါ။

နမူနာ . ပေါင်းစည်းခြင်းမရှိသော ဇယား

ပေါင်းစည်းခြင်းမရှိသော၊ နောက်ပိုင်းတွင် ကျွန်ုပ်တို့လုပ်ဆောင်မည့် ဇယားကို ကြည့်ရအောင်:

<table>
	<tr>
		<td>ဆဲလ်1</td>
		<td>ဆဲလ်2</td>
		<td>ဆဲလ်3</td>
	</tr>
	<tr>
		<td>ဆဲလ်4</td>
		<td>ဆဲလ်5</td>
		<td>ဆဲလ်6</td>
	</tr>
	<tr>
		<td>ဆဲလ်7</td>
		<td>ဆဲလ်8</td>
		<td>ဆဲလ်9</td>
	</tr>
</table>

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

နမူနာ . ဆဲလ်ကို ကော်လံနှစ်ခုအထိ ကျယ်ပြန့်စေခြင်း

colspan ဂုဏ်သတ္တိကို 2 တန်ဖိုးသတ်မှတ်ခြင်းဖြင့် ဆဲလ် 1 ကို ကော်လံနှစ်ခုအထိ ကျယ်ပြန့်စေရန် ကြိုးစားကြည့်ပါ။ ဤသို့ဖြစ်လျှင် ၎င်းသည် ညာဘက်ရှိဆဲလ်များကို ဖယ်ရှားပြီး ဇယားပြိုလဲသွားပါမည်:

<table>
	<tr>
		<td colspan="2">ဆဲလ်1</td>
		<td>ဆဲလ်2</td>
		<td>ဆဲလ်3</td>
	</tr>
	<tr>
		<td>ဆဲလ်4</td>
		<td>ဆဲလ်5</td>
		<td>ဆဲလ်6</td>
	</tr>
	<tr>
		<td>ဆဲလ်7</td>
		<td>ဆဲလ်8</td>
		<td>ဆဲလ်9</td>
	</tr>
</table>

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

နမူနာ . ဇယားမပြိုလဲဘဲ ဆဲလ်ကို ကျယ်ပြန့်စေခြင်း

ယခင်နမူနာမှ ဇယားပြိုလဲမှုပြဿနာကို ကျွန်ုပ်တို့၏ဆဲလ်၏ ညာဘက်ရှိ ဆဲလ်များထဲမှ တစ်ခုကို ဖျက်ခြင်းဖြင့် ပြင်ဆင်ရန် ကြိုးစားကြည့်ပါ (၎င်းသည် ဆဲလ် 2 သို့မဟုတ် 3 ဖြစ်ပါသည် - ထူးခြားချက်မရှိပါ):

<table>
	<tr>
		<td colspan="2">ဆဲလ်1</td>
		<td>ဆဲလ်2</td>
	</tr>
	<tr>
		<td>ဆဲလ်4</td>
		<td>ဆဲလ်5</td>
		<td>ဆဲလ်6</td>
	</tr>
	<tr>
		<td>ဆဲလ်7</td>
		<td>ဆဲလ်8</td>
		<td>ဆဲလ်9</td>
	</tr>
</table>

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

နမူနာ . ဆဲလ်ကို ကော်လံသုံးခုအထိ ကျယ်ပြန့်စေခြင်း

ဆဲလ် 1 ကို 3 ကော်လံများအထိ ကျယ်ပြန့်စေရန်၊ ၎င်း၏ colspan ဂုဏ်သတ္တိကို 3 တန်ဖိုးသတ်မှတ်ပါ။ ဤသို့ဖြစ်လျှင် ဇယားမပြိုလဲစေရန် ညာဘက်ရှိ နောက်ထပ်ဆဲလ်တစ်ခုကိုလည်း ဖျက်ပါ:

<table>
	<tr>
		<td colspan="3">ဆဲလ်1</td>
	</tr>
	<tr>
		<td>ဆဲလ်4</td>
		<td>ဆဲလ်5</td>
		<td>ဆဲလ်6</td>
	</tr>
	<tr>
		<td>ဆဲလ်7</td>
		<td>ဆဲလ်8</td>
		<td>ဆဲလ်9</td>
	</tr>
</table>

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

နမူနာ . တစ်ပြိုင်နက် colspan နှင့် rowspan

colspan နှင့် rowspan ဂုဏ်သတ္တိများကို အသုံးပြု၍ နံပါတ် 4, 5, 7 နှင့် 8 ဆဲလ်များကို ပေါင်းစည်းရန် ကြိုးစားကြည့်ပါ (ယခင်ပေါင်းစည်းမှုများကို ဇယားမှ ဖယ်ရှားပါမည်):

<table>
	<tr>
		<td colspan="3">ဆဲလ်1</td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">ဆဲလ်4</td>
		<td>ဆဲလ်6</td>
	</tr>
	<tr>
		<td>ဆဲလ်9</td>
	</tr>
</table>

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

ဤသည်ကိုလည်း ကြည့်ပါ

rowspan ဂုဏ်သတ္တိ,
ဇယား၏အတန်းများကို ပေါင်းစည်းပေးသည်