rowspan ատրիբուտը

rowspan ատրիբուտը կառավարում է տողերի միավորումը HTML աղյուսակում: Կիրառվում է th և td թեգերի նկատմամբ:

Ընդունող արժեքը՝ ամբողջ թիվ սկսած 1-ից:

Ինչպես օգտագործել. ավելացնում ենք այս ատրիբուտը ցանկացած td կամ th բջիջին: Եթե, օրինակ, տալիս ենք rowspan ատրիբուտին 2 արժեքը, ապա այն բջիջը, որին տրվել է, կզբաղեցնի երկու տող՝ աղյուսակի բարձրությամբ: Այս դեպքում ներքևի տողի բջիջները ոչինչ չեն կորցնում, մեր ընդլայնված բջիջը կհրի դրանք և աղյուսակը կփլվի: Որպեսզի դա տեղի չունենա, անհրաժեշտ է հեռացնել մեկ բջիջ ներքևի տողից: Ավելի լավ հասկանալու համար դիտեք օրինակները:

Օրինակ . Առանց միավորումների աղյուսակ

Դիտարկենք առանց միավորումների աղյուսակ, որի հետ մենք կաշխատենք հաջորդությամբ.

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

Результат:

Օրինակ . Ընդարձակենք բջիջը երկու տողով

Այժմ եկեք ընդարձակենք 1 բջիջը երկու տողով՝ նրան տալով rowspan ատրիբուտը 2 արժեքով: Մենք կտեսնենք, որ այն հրում է ներքևի տողի բջիջները և աղյուսակը փլվում է.

html<table>
  <tr>
    <td rowspan="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;
}

Результат:

Օրինակ . Ընդարձակենք բջիջը առանց աղյուսակի փլվելու

Նախորդ օրինակից աղյուսակի փլվելու խնդիրը շտկելու համար, եկեք փորձենք հեռացնել մեկ բջիջ երկրորդ տողից (և դա պարտադիր չէ, որ 4 բջիջն է, որը գտնվում է անմիջապես մեր 1 բջիջի տակ, կարելի է հեռացնել ցանկացածը, մենք կհեռացնենք 5 համարով բջիջը).

html<table>
  <tr>
    <td rowspan="2">cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

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

Результат:

Օրինակ . Ընդարձակենք բջիջը 3 տողով

Այստեղ եկեք ընդարձակենք մեր բջիջը ոչ թե երկու, այլ 3 տողով, նրան տանք rowspan ատրիբուտը 3 արժեքով: Այս դեպքում հեռացնենք մեկ բջիջ երրորդ տողից (7, 8 կամ 9 բջիջը՝ կարևոր չէ), որպեսզի աղյուսակը չփլվի.

html<table>
  <tr>
    <td rowspan="3">cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell9</td>
  </tr>
</table>   

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

Результат:

Օրինակ . Ընդարձակենք ևս 2 սյունակով

Եկեք ընդարձակենք նաև 2 բջիջը 2 սյունակով՝ լրացնելով առաջին բջիջը: Դրա համար 2 բջիջին ավելացնում ենք colspan ատրիբուտը 2 արժեքով: Այս դեպքում հեռացնենք 3 բջիջը, որպեսզի աղյուսակը չփլվի.

html<table>
  <tr>
    <td rowspan="3">cell1</td>
    <td colspan="2">cell2</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell9</td>
  </tr>
</table>

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

Результат:

Տես նաև