Атрибут colspan

Атрибут colspan управља груписањем ступаца HTML табеле. Примењује се на тагове th и td.

Прихватљива вредност: цео број почевши од 1.

Како се користи: додајемо овај атрибут било којој ћелији td или th. Ако, на пример, подесимо colspan на вредност 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 на два ступца, задајући јој атрибут colspan са вредношћу 2. При томе ће она истиснути ћелије са десне стране и табела ће се распасти:

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

Пример . Проширићемо ћелију без распадања табеле

А сада покушајмо да исправимо проблем распадања табеле из претходног примера, избришимо једну од ћелија са десне стране од наше (то је ћелија 2 или 3 - није битно):

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

Пример . Проширићемо ћелију на три ступца

Проширимо ћелију 1 на 3 ступца и задајмо јој атрибут colspan са вредношћу 3. При томе избришимо још једну ћелију са десне стране, да се табела не би распала:

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

Пример . Истовремено colspan и rowspan

Покушајмо да спојимо ћелије са бројем 4, 5, 7 и 8, користећи атрибуте colspan и rowspan (претходна спајања уклонимо из табеле):

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

Погледајте такође

атрибут rowspan,
који спаја редове табеле