Atribut colspan

Atribut colspan upravlja spajanjem kolona HTML tabele. Primenjen je na tagove th i td.

Prihvatljiva vrednost: ceo broj počev od 1.

Kako se koristi: dodajemo ovaj atribut na bilo koju ćeliju td ili th. Ako, na primer, postavimo colspan na vrednost 2 - ćelija kojoj je to postavljeno, zauzeće dva stuba tabele. Prilikom toga susedne ćelije sa desne strane ne nestaju, naša ćelija će ih proširenjem potisnuti i tabela će se raspasti. Da se to ne bi desilo, potrebno je ukloniti jednu od ćelija sa desne strane. Pogledajte primere za bolje razumevanje.

Primer . Tabela bez spajanja

Hajde da pogledamo tabelu bez spajanja, s kojom ćemo dalje raditi:

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

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

Результат:

Primer . Proširimo ćeliju na dva stuba

Hajde da probamo da proširimo ćeliju 1 na dva stuba, dodeljujući joj atribut colspan sa vrednošću 2. Prilikom toga će potisnuti ćelije sa desne strane i tabela će se raspasti:

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

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

Результат:

Primer . Proširimo ćeliju bez raspadanja tabele

A sada hajde da pokušamo da ispravimo problem raspadanja tabele iz prethodnog primera, uklonićemo jednu od ćelija sa desne strane naše (to je ćelija 2 ili 3 - nije bitno):

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

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

Результат:

Primer . Proširimo ćeliju na tri stuba

Hajde da proširimo ćeliju 1 na 3 stuba i dodelimo joj atribut colspan sa vrednošću 3. Prilikom toga uklonićemo još jednu ćeliju sa desne strane, da se tabela ne bi raspala:

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

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

Результат:

Primer . Istovremeno colspan i rowspan

Hajde da pokušamo da spojimo ćelije sa brojem 4, 5, 7 i 8, koristeći atribute colspan i rowspan (prethodna spajanja uklonićemo iz tabele):

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

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

Результат:

Pogledajte takođe