Rowspan atribūts

Atribūts rowspan pārvalda rindu apvienošanu HTML tabulā. Attiecas uz tagiem th un td.

Pieņemtā vērtība: vesels skaitlis sākot no 1.

Kā lietot: pievienojam šo atribūtu jebkurai šūnai td vai th. Ja, piemēram, iestatīt rowspan uz vērtību 2 - tad šūna, kurai tas tika iestatīts, aizņems divas rindas pēc tabulas augstuma. Tajā pašā laikā šūnas no rindas zemāk nekur nepazudīs, mūsu paplašinātā šūna tās izspiedīs un tabula sabruks. Lai tas nenotiktu, ir jāizdzēš viena no šūnām no zemāk esošās rindas. Skatiet piemērus lai labāk saprastu.

Piemērs . Tabula bez apvienojumiem

Apskatīsim tabulu bez apvienojumiem, ar kuru mēs strādāsim tālāk:

html<table>
  <tr>
    <td>šūna1</td>
    <td>šūna2</td>
    <td>šūna3</td>
  </tr>
  <tr>
    <td>šūna4</td>
    <td>šūna5</td>
    <td>šūna6</td>
  </tr>
  <tr>
    <td>šūna7</td>
    <td>šūna8</td>
    <td>šūna9</td>
  </tr>
</table>

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

Результат:

Piemērs . Paplašināsim šūnu uz divām rindām

Un tagad paplašināsim šūnu 1 uz divām rindām, iestatot tai atribūtu rowspan ar vērtību 2. Mēs redzēsim, ka tā izspiež šūnas no rindas zem tās un tabula sabrūk:

html<table>
  <tr>
    <td rowspan="2">šūna1</td>
    <td>šūna2</td>
    <td>šūna3</td>
  </tr>
  <tr>
    <td>šūna4</td>
    <td>šūna5</td>
    <td>šūna6</td>
  </tr>
  <tr>
    <td>šūna7</td>
    <td>šūna8</td>
    <td>šūna9</td>
  </tr>
</table>

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

Результат:

Piemērs . Paplašināsim šūnu bez tabulas sabrukšanas

Lai izlabotu problēmu ar tabulas sabrukšanu no iepriekšējā piemēra, mēģināsim izdzēst vienu no šūnām no otrās rindas (un tas noteikti nav jābūt šūnai 4, kas atrodas tieši zem mūsu šūnas 1, var dzēst jebkuru, mēs dzēsīsim šūnu ar numuru 5):

html<table>
  <tr>
    <td rowspan="2">šūna1</td>
    <td>šūna2</td>
    <td>šūna3</td>
  </tr>
  <tr>
    <td>šūna4</td>
    <td>šūna6</td>
  </tr>
  <tr>
    <td>šūna7</td>
    <td>šūna8</td>
    <td>šūna9</td>
  </tr>
</table>

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

Результат:

Piemērs . Paplašināsim šūnu uz 3 rindām

Un šeit paplašināsim mūsu šūnu ne uz divām rindām, bet uz 3, iestatīsim tai rowspan ar vērtību 3. Tajā pašā laikā izdzēsīsim vienu no šūnām no trešās rindas (šūnu 7, 8 vai 9 - nav nozīmes), lai tabula nesabruktu:

html<table>
  <tr>
    <td rowspan="3">šūna1</td>
    <td>šūna2</td>
    <td>šūna3</td>
  </tr>
  <tr>
    <td>šūna4</td>
    <td>šūna6</td>
  </tr>
  <tr>
    <td>šūna7</td>
    <td>šūna9</td>
  </tr>
</table>   

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

Результат:

Piemērs . Paplašināsim vēl uz 2 kolonnām

Paplašināsim vēl un šūnu 2 uz 2 kolonnām papildus pirmajai šūnai. Šim nolūkam šūnai 2 pievienojam colspan ar vērtību 2. Tajā pašā laikā izdzēsīsim šūnu 3, lai tabula nesabruktu:

html<table>
  <tr>
    <td rowspan="3">šūna1</td>
    <td colspan="2">šūna2</td>
  </tr>
  <tr>
    <td>šūna4</td>
    <td>šūna6</td>
  </tr>
  <tr>
    <td>šūna7</td>
    <td>šūna9</td>
  </tr>
</table>

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

Результат:

Skatiet arī