ატრიბუტი 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,
რომელიც აერთიანებს ცხრილის რიგებს