Atributul colspan

Atributul colspan controlează unirea coloanelor tabelului HTML. Se aplică tagurilor th și td.

Valoare acceptată: număr întreg începând de la 1.

Cum se folosește: adăugăm acest atribut la orice celulă td sau th. Dacă, de exemplu, setăm colspan la valoarea 2 - atunci celula căreia i s-a setat, va ocupa două coloane ale tabelului. În acest caz, celulele adiacente din dreapta nu vor dispărea, celula noastră extinsă le va înlocui și tabelul se va destrăma. Pentru a preveni acest lucru, trebuie ștearsă una dintre celulele din dreapta. Vedeți exemplele pentru o mai bună înțelegere.

Exemplul . Tabel fără uniri

Să ne uităm la un tabel fără uniri, cu care vom lucra mai departe:

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

Результат:

Exemplul . Să extindem o celulă pe două coloane

Să încercăm să extindem celula 1 pe două coloane, setând atributul colspan la valoarea 2. În acest caz, ea va înlocui celulele din dreapta și tabelul se va destrăma:

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

Результат:

Exemplul . Să extindem o celulă fără a destrăma tabelul

Acum să încercăm să reparăm problema destrămării tabelului din exemplul anterior, ștergând una dintre celulele din dreapta celei noastre (aceasta este celula 2 sau 3 - nu are importanță):

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

Результат:

Exemplul . Să extindem o celulă pe trei coloane

Să extindem celula 1 pe 3 coloane și să-i setăm atributul colspan la valoarea 3. În acest caz, vom șterge încă o celulă din dreapta, pentru ca tabelul să nu se destrame:

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

Результат:

Exemplul . Colspan și rowspan simultan

Să încercăm să unim celulele cu numerele 4, 5, 7 și 8, folosind atributele colspan și rowspan (unirile anterioare le vom elimina din tabel):

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

Результат:

Vezi și