ატრიბუტი rowspan

ატრიბუტი rowspan აკონტროლებს რიგების გაერთიანებას HTML ცხრილში. გამოიყენება თეგებზე th და td.

მიღებული მნიშვნელობა: მთელი რიცხვი დაწყებული 1-დან.

როგორ გამოვიყენოთ: ვამატებთ ამ ატრიბუტს ნებისმიერ უჯრაში td ან th. თუ, მაგალითად, დავაყენებთ rowspan-ის მნიშვნელობად 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 ორ რიგზე, მივანიჭოთ მას ატრიბუტი rowspan მნიშვნელობით 2. ჩვენ ვნახავთ, რომ ის ათრევს უჯრებს მის ქვეშ მდებარე რიგიდან და ცხრილი იშლება:

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

მაგალითი . გავაფართოვოთ უჯრა ცხრილის დაშლის გარეშე

წინა მაგალითიდან ცხრილის დაშლის პრობლემის გამოსასწორებლად, შევეცადოთ წავშალოთ ერთ-ერთი უჯრა მეორე რიგიდან (და ეს არ არის აუცილებელი იყოს უჯრა 4, რომელიც მდებარეობს ჩვენი უჯრა 1-ის ქვეშ თავიდან, შესაძლებელია ნებისმიერის წაშლა, ჩვენ წავშლით უჯრას ნომერით 5):

<table>
	<tr>
		<td rowspan="2">უჯრა1</td>
		<td>უჯრა2</td>
		<td>უჯრა3</td>
	</tr>
	<tr>
		<td>უჯრა4</td>
		<td>უჯრა6</td>
	</tr>
	<tr>
		<td>უჯრა7</td>
		<td>უჯრა8</td>
		<td>უჯრა9</td>
	</tr>
</table>

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

მაგალითი . გავაფართოვოთ უჯრა `3` რიგზე

აქ კი გავაფართოვოთ ჩვენი უჯრა არა ორ რიგზე, არამედ 3 რიგზე, მივანიჭოთ მას rowspan მნიშვნელობით 3. ამ შემთხვევაში წავშალოთ ერთი უჯრა მესამე რიგიდან (უჯრა 7, 8 ან 9 - არ აქვს მნიშვნელობა), რათა ცხრილი არ დაიშალოს:

<table>
	<tr>
		<td rowspan="3">უჯრა1</td>
		<td>უჯრა2</td>
		<td>უჯრა3</td>
	</tr>
	<tr>
		<td>უჯრა4</td>
		<td>უჯრა6</td>
	</tr>
	<tr>
		<td>უჯრა7</td>
		<td>უჯრა9</td>
	</tr>
</table>

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

მაგალითი . გავაფართოვოთ ხელახლა `2` სვეტზე

გავაფართოვოთ ხელახლა უჯრა 2 2 სვეტზე პირველ უჯრასთან ერთად. ამისთვის უჯრას 2 ვამატებთ colspan-ს მნიშვნელობით 2. ამ შემთხვევაში წავშალოთ უჯრა 3, რათა ცხრილი არ დაიშალოს:

<table>
	<tr>
		<td rowspan="3">უჯრა1</td>
		<td colspan="2">უჯრა2</td>
	</tr>
	<tr>
		<td>უჯრა4</td>
		<td>უჯრა6</td>
	</tr>
	<tr>
		<td>უჯრა7</td>
		<td>უჯრა9</td>
	</tr>
</table>

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

იხილეთ აგრეთვე

ატრიბუტი colspan,
რომელიც აერთიანებს ცხრილის სვეტებს