Atributi rowspan

Atributi rowspan kontrollon bashkimin e rreshtave në tabelën HTML. Aplikohet te etiketat th dhe td.

Vlera e pranuar: numër i plotë duke filluar nga 1.

Si të përdoret: shtojmë këtë atribut te çdo qelizë td ose th. Nëse, për shembull, caktojmë rowspan në vlerën 2 - atëherë qeliza së cilës i është caktuar, do të zërë dy rreshta në lartësinë e tabelës. Në këtë rast qelizat nga rreshti poshtë nuk zhduken, qeliza jonë e zgjeruar i zhvendos ato dhe tabela do të shkatërrohet. Që kjo të mos ndodhë, duhet të fshihet një nga qelizat nga rreshti poshtë. Shikoni shembujt për kuptim më të mirë.

Shembull . Tabelë pa bashkime

Le të shohim një tabelë pa bashkime, me të cilën do të punojmë më tej:

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

Shembull . Zgjeroni qelizën në dy rreshta

Tani le të zgjasim qelizën 1 në dy rreshta, duke i caktuar atributin rowspan me vlerën 2. Do të shohim se ajo zhvendos qelizat nga rreshti nën të dhe tabela shkatërrohet:

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

Shembull . Zgjeroni qelizën pa shkatërrim të tabelës

Për të rregulluar problemin me shkatërrimin e tabelës nga shembulli i mëparshëm, le të provojmë të fshijmë një nga qelizat nga rreshti i dytë (dhe kjo nuk është domosdoshmërisht qeliza 4 e cila ndodhet menjëherë nën qelizën tonë 1, mund të fshihet çdo qelizë, ne do të fshijmë qelizën me numër 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;
}

Shembull . Zgjeroni qelizën në `3` rreshta

Këtu le të zgjasim qelizën tonë jo në dy rreshta, por në 3, do t'i caktojmë rowspan në vlerën 3. Në këtë rast do të fshijmë një nga qelizat nga rreshti i tretë (qelizën 7, 8 ose 9 - nuk ka rëndësi), në mënyrë që tabela të mos shkatërrohet:

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

Shembull . Zgjeroni edhe në `2` kolona

Le të zgjasim edhe qelizën 2 në 2 kolona si shtesë ndaj qelizës së parë. Për këtë qelizës 2 i shtojmë colspan në vlerën 2. Në këtë rast do të fshijmë qelizën 3, në mënyrë që tabela të mos shkatërrohet:

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

Shihni gjithashtu

atributi colspan,
i cili bashkon kolonat e tabelës