Sifa colspan

Sifa colspan inadhibiti ukusanyaji wa safu wima za jedwali za HTML. Inatumika kwenye vitambulishi th na td.

Thamani inayokubaliwa: namba kamia kuanzia 1.

Jinsi ya kutumia: tunaongeza sifa hii kwa kisanduku chochote td au th. Kwa mfano, ukiweka colspan kwa thamani 2 - basi kisanduku ambacho kimepewa hii, kitachukua safu wima mbili za jedwali. Wakati huo huo, visanduku vilivyo karibu upande wa kulia havitatoweka, kisanduku chetu kilichopanua kitawasukuma na jedwali litavurugika. Ilisababisha hilo lisitokee, ni lazima kufuta kisanduku kimoja upande wa kulia. Angalia mifano kwa ufahamu bora.

Mfano . Jedwali bila kusanyiko

Tuangalie jedwali bila kusanyiko, ambalo tutafanya kazi nalo zaidi:

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

Mfano . Tutapanue kisanduku kwa safu wima mbili

Wacha tujaribu kupanua kisanduku 1 kwa safu wima mbili , tukikipea sifa colspan kwa thamani 2. Wakati huo huo, kitasukuma visanduku upande wa kulia na jedwali litavurugika:

<table>
	<tr>
		<td colspan="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;
}

Mfano . Tutapanue kisanduku bila kuvuruga jedwali

Sasa wacha tujaribu kurekebisha shida ya kuvurugika kwa jedwali kutoka kwa mfano uliopita, tufute kisanduku kimoja upande wa kulia kutoka kwa chetu (hiki ni kisanduku 2 au 3 - haijalishi):

<table>
	<tr>
		<td colspan="2">cell1</td>
		<td>cell2</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;
}

Mfano . Tutapanue kisanduku kwa safu wima tatu

Wacha tupanue kisanduku 1 kwa 3 safu wima na tukipe sifa colspan kwa thamani 3. Wakati huo huo, tufute kisanduku kingine upande wa kulia, ili jedwali lisivurugike:

<table>
	<tr>
		<td colspan="3">cell1</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;
}

Mfano . Wakati huo huo colspan na rowspan

Wacha tujaribu kukusanya visanduku vilivyo na nambari 4, 5, 7 na 8, tukitumia sifa colspan na rowspan (kusanyiko la awali tutaondoa kwenye jedwali):

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

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

Angalia pia

sifa rowspan,
ambayo inakusanya safu mlalo za jedwali