colspan ատրիբուտը

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

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

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

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

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

html<table>
  <tr>
    <td>բջիջ1</td>
    <td>բջիջ2</td>
    <td>բջիջ3</td>
  </tr>
  <tr>
    <td>բջիջ4</td>
    <td>բջիջ5</td>
    <td>բջիջ6</td>
  </tr>
  <tr>
    <td>բջիջ7</td>
    <td>բջիջ8</td>
    <td>բջիջ9</td>
  </tr>
</table>

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

Результат:

Օրինակ : Ընդարձակենք բջիջը երկու սյունով

Փորձենք ընդարձակել 1 բջիջը երկու սյունով՝ տալով նրան colspan ատրիբուտը 2 արժեքով: Այս դեպքում այն կհրի աջ կողմի բջիջները, և աղյուսակը կկործանվի.

html<table>
  <tr>
    <td colspan="2">բջիջ1</td>
    <td>բջիջ2</td>
    <td>բջիջ3</td>
  </tr>
  <tr>
    <td>բջիջ4</td>
    <td>բջիջ5</td>
    <td>բջիջ6</td>
  </tr>
  <tr>
    <td>բջիջ7</td>
    <td>բջիջ8</td>
    <td>բջիջ9</td>
  </tr>
</table>

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

Результат:

Օրինակ : Ընդարձակենք բջիջը առանց աղյուսակի կործանման

Հիմա փորձենք ուղղել նախորդ օրինակի աղյուսակի կործանման խնդիրը՝ հեռացնելով մեր բջիջի աջ կողմի բջիջներից մեկը (սա 2 կամ 3 բջիջն է - տարբերություն չկա).

html<table>
  <tr>
    <td colspan="2">բջիջ1</td>
    <td>բջիջ2</td>
  </tr>
  <tr>
    <td>բջիջ4</td>
    <td>բջիջ5</td>
    <td>բջիջ6</td>
  </tr>
  <tr>
    <td>բջիջ7</td>
    <td>բջիջ8</td>
    <td>բջիջ9</td>
  </tr>
</table>

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

Результат:

Օրինակ : Ընդարձակենք բջիջը երեք սյունով

Ընդարձակենք 1 բջիջը 3 սյունով և տանք նրան colspan ատրիբուտը 3 արժեքով: Այս դեպքում հեռացնենք ևս մեկ բջիջ աջից, որպեսզի աղյուսակը չկործանվի.

html<table>
  <tr>
    <td colspan="3">բջիջ1</td>
  </tr>
  <tr>
    <td>բջիջ4</td>
    <td>բջիջ5</td>
    <td>բջիջ6</td>
  </tr>
  <tr>
    <td>բջիջ7</td>
    <td>բջիջ8</td>
    <td>բջիջ9</td>
  </tr>
</table>

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

Результат:

Օրինակ : Միաժամանակ colspan և rowspan

Փորձենք միավորել 4, 5, 7 և 8 համարներով բջիջները՝ օգտագործելով colspan և rowspan ատրիբուտները (նախորդ միավորումները հանենք աղյուսակից).

html<table>
  <tr>
    <td colspan="3">բջիջ1</td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">բջիջ4</td>
    <td>բջիջ6</td>
  </tr>
  <tr>
    <td>բջիջ9</td>
  </tr>
</table>

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

Результат:

Տես նաև