HTML առաջին քայլերը - Դաս 5 - Դասացուցակներ

Տեղեկությունը պահելու կարևոր ձևերից մեկն են աղյուսակները։ Աղյուսակներում պահվում է Excel, Access և այլ տվյալների բազաների տեղեկատվությունը։ Աղյուսակները շատ հստակ կերպով ներկայացնում են տվյալները, դրանց հիման վրա հարմար է կառուցել գրաֆիկներ և դիագրամներ։
Այս դասում մենք կքննարկենք, թե ինչպես ստեղծել աղյուսակներ HTML-ում։ Դրա համար մենք կօգտագործենք <table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot> տեգերը։

table տեգը

TABLE - սա աղյուսակի հիմնական տեգն է, բոլոր մյուս աղյուսակի տեգերը կգրենք հենց դրա ներսում։

<table>
</table>

Բոլոր մյուս տեգերը մենք կգրենք հենց այս տեգի ներսում։

tr տեգը

TR - տեգը տողերի համար է, յուրաքանչյուր տող ձևավորվում է <tr></tr> տեգերով, եթե ուզում ենք աղյուսակում երեք տող, ապա պետք է ունենանք երեք այդպիսի տեգերի զույգեր՝

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

td տեգը

TD - տեգը միջակայքի համար է, յուրաքանչյուր միջակայք պետք է գտնվի տողի տեգի ներսում։ Աղյուսակը ճիշտ կարտադրվի միայն այն դեպքում, եթե միջակայքերի քանակը համապատասխանում է։ Ահա աղյուսակ՝ որտեղ յուրաքանչյուր տողում կա չորս միջակայք։

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Հիմա մնում է լրացնել աղյուսակը տվյալներով՝

<table>
  <tr>
    <td>Նմուշ</td>
    <td>Ազգանուն</td>
    <td>Անուն</td>
    <td>Հայրանուն</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Իվանով</td>
    <td>Իվան</td>
    <td>Իվանովիչ</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Պետրով</td>
    <td>Պետր</td>
    <td>Պետրովիչ</td>
  </tr>
</table>

Հիմա աղյուսակը կարելի է ձևավորել տրամաբանական տեսքով՝ բաժանելով այն երեք հատվածի՝ thead - վերնագիր, tbody - էջի բովանդակություն, tfoot - էջի ստորագիր։

tbody տեգը

TBODY տեգը պարտադիր չէ, բայց կարելի է օգտագործել ցույց տալու համար, որ այստեղ գտնվում է աղյուսակի հիմնական տեղեկատվությունը։

<table>
  <tbody>
    <tr>
      <td>Նմուշ</td>
      <td>Ազգանուն</td>
      <td>Անուն</td>
      <td>Հայրանուն</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Իվանով</td>
      <td>Իվան</td>
      <td>Իվանովիչ</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Պետրով</td>
      <td>Պետր</td>
      <td>Պետրովիչ</td>
    </tr>
  </tbody>
</table>

thead տեգը

THEAD օգտագործվում է աղյուսակի վերնագիրը ստեղծելու համար, փորձեք առաջին տողը վերցնել thead-ի մեջ։

<table>
  <thead>
    <tr>
      <td>Նմուշ</td>
      <td>Ազգանուն</td>
      <td>Անուն</td>
      <td>Հայրանուն</td>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Իվանով</td>
      <td>Իվան</td>
      <td>Իվանովիչ</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Պետրով</td>
      <td>Պետր</td>
      <td>Պետրովիչ</td>
    </tr>
  </tbody>
</table>

Այժմ փոխարինենք td տեգերը th տեգերով՝ ցույց տալու համար, որ դրանք սյունակի վերնագրեր են։

<table>
  <thead>
    <tr>
      <th>Նմուշ</th>
      <th>Ազգանուն</th>
      <th>Անուն</th>
      <th>Հայրանուն</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Իվանով</td>
      <td>Իվան</td>
      <td>Իվանովիչ</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Պետրով</td>
      <td>Պետր</td>
      <td>Պետրովիչ</td>
    </tr>
  </tbody>
</table>

Եթե ձեր բրաուզերը աջակցում է, ապա սյունակի վերնագրերը պետք է դուրս գան գոնե մեծատառերով։ Եվ մնացել է մեկ այլ տեգ՝ աղյուսակի ստորագիրը tfoot։

tfoot տեգը

TFOOT տեգը սահմանում է աղյուսակի ստորագրությունը։

<table>
  <thead>
    <tr>
      <th>Նմուշ</th>
      <th>Ազգանուն</th>
      <th>Անուն</th>
      <th>Հայրանուն</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Իվանով</td>
      <td>Իվան</td>
      <td>Իվանովիչ</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Պետրով</td>
      <td>Պետր</td>
      <td>Պետրովիչ</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Աղյուսակի ստեղծում 2012 թվական</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

colspan հատկանիշը

td տեգի կարևոր հատկանիշներից մեկն է colspan-ը, որը թույլ է տալիս միավորել միջակայքները։ Դե, եկեք նայենք մեր տոտարին։ Մենք ունենք 4 միջակայք, բայց միայն մեկը լցված է, ուստի մենք կարող ենք միավորել այս չորս միջակայքները։ Կիրառենք colspan հատկանիշը։

<table>
  <thead>
    <tr>
      <th>Նմուշ</th>
      <th>Ազգանուն</th>
      <th>Անուն</th>
      <th>Հայրանուն</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Իվանով</td>
      <td>Իվան</td>
      <td>Իվանովիչ</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Պետրով</td>
      <td>Պետր</td>
      <td>Պետրովիչ</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">Աղյուսակի ստեղծում 2012 թվական</td>
    </tr>
  </tfoot>
</table>

Այժմ ունենք մեկ մեծ միջակայք, որն ընդլայնված է 4 միջակայք։ colspan հատկանիշի արժեքը կլինի միավորված միջակայքերի քանակը։