colspan atributu

colspan atributu HTML cedvelinin sutunlarinin birlasdirilmasini idare edir. th ve td teqlerine tetbiq olunur.

Qebul edilen deyer: 1-den baslayaraq tam eded.

Nece istifade etmeli: bu atributu istənilən td ve ya th xanasina elave edirik. Meselen, colspan atributuna 2 deyeri teyin etsek, hemin xana cedvelde iki sutun yer tutacaq. Bununla belə, sagdaki qonsu xanalar hec yerə getməyəcək, genislenen xanamiz onları sıxışdıracaq ve cedvel dagılacaq. Bunun qarsisini almaq ucun sagdaki xanalardan birini silmək lazımdır. Daha yaxsı basa dusmek ucun nümunələrə baxın.

Numune . Birlasdirmasiz cedvel

Gəlin daha sonra işləyəcəyimiz, birlasdirmasiz bir cedvelə baxaq:

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

Результат:

Numune . Xanani iki sutun genislikde edek

Gəlin 1 nomreli xanani iki sutun genislikde edek, ona colspan atributunu 2 deyeri ile teyin edek. Bununla o, sagdaki xanalari sıxışdıracaq ve cedvel dagılacaq:

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

Результат:

Numune . Cedveli dagılmadan xanani genisledek

Gəlin əvvəlki numunedəki cedvelin dagılması problemini aradan qaldıraq, bunun ucun genislenen xanamızın sagındaki xanalardan birini silək (bu 2 ve ya 3 nomreli xana ola biler - fərqi yoxdur):

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

Результат:

Numune . Xanani uc sutun genislikde edek

Gəlin 1 nomreli xanani 3 sutun genislikde edek ve ona colspan atributunu 3 deyeri ile teyin edek. Bununla cedvelin dagılmaması ucun sagdaki bir xananı daha silək:

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

Результат:

Numune . Eyni zamanda colspan ve rowspan

Gəlin 4, 5, 7 ve 8 nomreli xanaları colspan ve rowspan atributlarından istifade ederek birlasdiraq (əvvəlki birlasdirmeleri cedvelden çıxartaq):

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

Результат:

Həmçinin bax