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 ատրիբուտը,
որը միավորում է աղյուսակի տողերը