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

Мисал . Уячаны эки тилкеге кеңейтүү

Келгиле, 1 уячасын эки тилкеге кеңейтип көрөлү, ага colspan атрибутун 2 маанисинде белгилейли. Бул учурда ал оң жактагы уячаларды ыгып чыгарып, таблица бузулат:

<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

Келгиле, 4, 5, 7 жана 8 уячаларын colspan жана rowspan атрибуттарын колдонуп бириктирип көрөлү (мурунку бириктирүүлөрдү таблицадан алалы):

<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 атрибуту,
таблицанын катарларын бириктирет