Atributi colspan

Atributi colspan kontrollon bashkimin e kolonave të tabelës 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ë colspan në vlerën 2 - atëherë qeliza së cilës i është caktuar, do të zërë dy kolona të tabelës. Në këtë rast, qelizat fqinje në të djathtë nuk do të zhduken, qeliza jonë e zgjeruar do t'i zhvendosë ato dhe tabela do të shkatërrohet. Për të mos ndodhur kjo, duhet të fshihet një nga qelizat në të djathtë. Shikoni shembujt për një 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 . Le të zgjerojmë qelizën në dy kolona

Le të përpiqemi të zgjerojmë qelizën 1 në dy kolona, duke i caktuar atributin colspan në vlerën 2. Në këtë rast ajo do të zhvendosë qelizat në të djathtë dhe tabela do të shkatërrohet:

<table>
	<tr>
		<td colspan="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 . Le të zgjerojmë qelizën pa shkatërrim të tabelës

Tani le të përpiqemi të rregullojmë problemin me shkatërrimin e tabelës nga shembulli i mëparshëm, le të fshim një nga qelizat në të djathtë të asaj tonës (kjo është qeliza 2 ose 3 - nuk ka rëndësi):

<table>
	<tr>
		<td colspan="2">cell1</td>
		<td>cell2</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 . Le të zgjerojmë qelizën në tre kolona

Le të zgjerojmë qelizën 1 në 3 kolona dhe t'i caktojmë atributin colspan në vlerën 3. Në këtë rast le të fshim edhe një qelizë në të djathtë, në mënyrë që tabela të mos shkatërrohet:

<table>
	<tr>
		<td colspan="3">cell1</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 . Njëkohësisht colspan dhe rowspan

Le të përpiqemi të bashkojmë qelizat me numër 4, 5, 7 dhe 8, duke përdorur atributet colspan dhe rowspan (bashkimet e mëparshme i heqim nga tabela):

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

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

Shihni gjithashtu

atributi rowspan,
i cili bashkon rreshtat e tabelës