Атрибути colspan

Атрибути colspan идоракунии якҷоякунии сутунҳои ҷадвали HTML-ро бар ӯҳда дорад. Ба тегҳои th ва td татбиқ карда мешавад.

Қимати қабулшаванда: адади бутун аз 1 сар карда.

Чӣ тавр истифода бурдан: ин атрибутро ба ягон ҳуҷайраи td ё th илова мекунем. Агар, барои намуна, ба colspan қимати 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-ро ба ду сутун васеъ кунем, ба он атрибути colspan-ро ба қимати 2 таъин кунем. Дар ин ҳол он ҳуҷайраҳои тарафи ростро ҷой ҷудо мекунад ва ҷадвал пароканда мешавад:

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

Намуна . Ҳуҷайраро бе парокандагии ҷадвал васеъ мекунем

Ва акнун биёед мушкили парокандагии ҷадвалро аз намунаи қаблӣ ислоҳ кунем, яке аз ҳуҷайраҳои тарафи ростро аз мо (ин ҳуҷайраи 2 ё 3 - фарқе надорад) нест мекунем:

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

Намуна . Ҳуҷайраро ба се сутун васеъ мекунем

Биёед ҳуҷайраи 1-ро ба 3 сутун васеъ кунем ва ба он атрибути colspan-ро ба қимати 3 таъин кунем. Дар ин ҳол як ҳуҷайраи дигари тарафи ростро низ нест мекунем, то ки ҷадвал пароканда нашавад:

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

Намуна Дар як вақт colspan ва rowspan

Биёед кӯшиш кунем, ки ҳуҷайраҳо бо рақами 4, 5, 7 ва 8-ро якҷоя кунем, аз атрибутҳои colspan ва rowspan истифода бурда (якҷоякуниҳои қаблиро аз ҷадвал бармедорем):

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

Ҳамчунин нигаред

атрибути rowspan,
ки сатрҳои ҷадвалро якҷоя мекунад