rowspan ատրիբուտը

rowspan ատրիբուտը կառավարում է տողերի միավորումը HTML աղյուսակում: Կիրառվում է th և td թեգերի նկատմամբ:

Ընդունող արժեքը՝ ամբողջ թիվ սկսած 1-ից:

Ինչպես օգտագործել. ավելացնում ենք այս ատրիբուտը ցանկացած td կամ th բջիջին: Եթե, օրինակ, տալիս ենք rowspan ատրիբուտին 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 բջիջը երկու տողով՝ նրան տալով rowspan ատրիբուտը 2 արժեքով: Մենք կտեսնենք, որ այն հրում է ներքևի տողի բջիջները և աղյուսակը փլվում է.

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

Օրինակ . Ընդարձակենք բջիջը առանց աղյուսակի փլվելու

Նախորդ օրինակից աղյուսակի փլվելու խնդիրը շտկելու համար, եկեք փորձենք հեռացնել մեկ բջիջ երկրորդ տողից (և դա պարտադիր չէ, որ 4 բջիջն է, որը գտնվում է անմիջապես մեր 1 բջիջի տակ, կարելի է հեռացնել ցանկացածը, մենք կհեռացնենք 5 համարով բջիջը).

<table>
	<tr>
		<td rowspan="2">cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

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

Օրինակ . Ընդարձակենք բջիջը `3` տողով

Այստեղ եկեք ընդարձակենք մեր բջիջը ոչ թե երկու, այլ 3 տողով, նրան տանք rowspan ատրիբուտը 3 արժեքով: Այս դեպքում հեռացնենք մեկ բջիջ երրորդ տողից (7, 8 կամ 9 բջիջը՝ կարևոր չէ), որպեսզի աղյուսակը չփլվի.

<table>
	<tr>
		<td rowspan="3">cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell9</td>
	</tr>
</table>

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

Օրինակ . Ընդարձակենք ևս `2` սյունակով

Եկեք ընդարձակենք նաև 2 բջիջը 2 սյունակով՝ լրացնելով առաջին բջիջը: Դրա համար 2 բջիջին ավելացնում ենք colspan ատրիբուտը 2 արժեքով: Այս դեպքում հեռացնենք 3 բջիջը, որպեսզի աղյուսակը չփլվի.

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

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

Տես նաև

colspan ատրիբուտը,
որը միավորում է աղյուսակի սյունակները