Border-collapse aýratynlygy

border-collapse aýratynlygy td öýjükleri arasyndaky ýa-da th öýjükleri arasyndaky HTML tablisasynyň goşalaýyn serhedlerini (we öýjügiň serhedi bilen tablisanyň özüniň serhediniň arasyndakyny) birikdirýär we bir ýaly görkezýär.

Bu aýratynlyk diňe tablisalar üçin we display aýratynlygy table ýa-da inline-table bahasynda bolan elementler üçin ulanylýar. Adaty blok elementler üçin ol, uly peşmançylyk bilen, işlemeýär. Ýatda saklaň, ulatmak tabilasa üçin bolmaly, onuň öýjükleri üçin däl.

Sintaksis

seselektor {
	border-collapse: collapse | separate;
}

Bahalar

Baha	Düşündiriş
`collapse`	Goşalaýyn serhedler bir ýaly görüner. Goşmaça täsirler bar: `border-spacing` aýratynlygy we `cellspacing` atributy işlemez.
`separate`	Tabilasanyň her öýjügi öz serhedine ege bolup biler (şonuň üçin käbir ýerlerde serhedler goşalaýyn bolar, eger öýjükler arasyndaky boşluk nol bolsa).

Belli bir ýerde bahasy: separate.

Mysal . Separate bahasy

Häzirki tablisada ähli serhedler goşalaýyn (serhed hem öýjüklere, hem özüne tablisada berlen):

<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 {
	border-collapse: separate;
	width: 400px;
	border-spacing: 0;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}

Mysal . Separate bahasy

Emma häzir serhed öýjüklere berlen, ýöne özüne tabilasada berilmedik. Iki öýjügiň umumy serhedi bolan ýerde, - serhedler goşalaýyn bolar, beýleki ýerlerde - ýeke.

<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 {
	border-collapse: separate;
	width: 400px;
	border-spacing: 0;
}
td {
	border: 1px solid red;
	text-align: center;
}

Mysal . Collapse bahasy

Häzir tablisada ähli serhedler birikdiriler we 1px galyňlykda görüner, ýaly isleýänimiz ýaly:

<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 {
	border-collapse: collapse;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}