Sifa ya border-spacing

Sifa border-spacing huweka pengo kati ya seli td au seli th za jedwali la HTML (na kati ya mpaka wa seli na jedwali lenyewe). Thamani ya sifa ni vipimo vyovyote vya ukubwa, isipokuwa asilimia.

Ki sintaksia

csskichaguzi {
  border-spacing: thamani moja au mbili;
}

Thamani

Thamani	Maelezo
thamani moja	Thamani moja huweka mapengo sawa kati ya seli wima na mlalo.
thamani mbili	Thamani ya kwanza huweka pengo la mlalo, na thamani ya pili huweka pengo la wima.

Thamani chaguomsingi: 0. Hata hivyo, kivinjari kila kina thamani yake mwenyewe, isiyo ya sifuri ya kitambulisho cellspacing, kwa hivyo kwa chaguomsingi utaona mapengo kati ya seli.

Uzingatio

Tumia sifa hii kwa ajili ya jedwali, na si kwa seli zake (kwa seli haitafanya kazi).

Athari sawa haiwezi kufikiwa kwa kutumia margin, kwa sababu margin kwa seli za jedwali haifanyi kazi.

Ikiwa sifa border-collapse imewekwa kuwa na thamani collapse - border-spacing haitafanya kazi.

Mfano . Thamani moja

Wacha tuweke mapengo kati ya seli (na kati ya seli na mpaka wa jedwali) kuwa 10px:

html<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>

csstable {
  border-spacing: 10px;
  border-collapse: separate;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

Mfano . Thamani mbili

Sasa tuweke mapengo ya 10px mlalo na 30px wima:

html<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>

csstable {
  border-spacing: 10px 30px;
  border-collapse: separate;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

Mfano . Tuweke border-collapse: collapse

Sasa border-spacing haitafanya kazi kutokana na sifa border-collapse yenye thamani collapse:

html<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>

csstable {
  border-collapse: collapse;
  border-spacing: 10px 30px;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат: