ԴԱՍ 9։ Աղյուսակներ (Tables)

0

Աղյուսակը օգտագործվում է, երբ անհրաժեշտ է ցույց տալ «աղյուսակային տվյալներ» (tabular data) այսինքն՝ ինֆորմացիա, որը տրամաբանորեն ներկայացված է շարքերով ու սյունյակներով։

Դժվար է, թե ո՞չ:

Սկզբնական շրջանում HTML-ում աղյուսակները ստեղծելը կարող է թվալ բարդ, սակայն չարժե հուսահատվել:

Օրինակ 1

        <table>

          <tr>

               <td>Cell 1</td>

               <td>Cell 2</td>

          </tr>

          <tr>

               <td>Cell 3</td>

               <td>Cell 4</td>

          </tr>

        </table>

 Բրաուզերում կունենա հետևյալ տեսքը՝

Cell 1 Cell 2
Cell 3 Cell 4

 

Ո՞րն է <tr> և <td>-ի տարբերությունը։

Ինչպես տեսնում եք վերը նշված օրինակը, մինչ օրս ձեզ տրված HTML-ի ամենաբարդ օրինակներից էր։ Եկեք բացատրենք թեգերի տարբերութույունը

Աղյուսակը ստեղծելու համար օգտագործված են 3 տարբեր տարրեր

  • Բացման թեգը <table> և փակման թեգը </table> սկսում և ավարտվում են աղյուսակը: Տրամաբանական է։
  • <tr>-ը հանդես է գալիս որպես «table row» սկսում և ավարտվում է հորիզոնական շարքերը: Սա էլ է տրամաբանական։
  • <td>-ը «table data»-ի կրճատված տարբերակն է: Այս թեգը սկսում և ավարտում է ձեր աղյուսակի շարքերից յուրաքանչյուրի վանդակը։ Ամեն ինչ պարզ է և տրամաբանական:

Ահա թե ինչ է տեղի ունենում, 1-ին օրինակում․ աղյուսակը սկսվում է <table>-ով, որին հաջորդում է <tr>-ը, որը ցույց է տալիս նոր շարքի սկիզբը: Երկու Cell –երը տեղադրված են այս շարքում <td> Cell 1 </ td> և <td> Cell 2 </ td>: Այնուհետև շարքը փակվվում է </ tr> -ով, որից անմիջապես հետո սկսվում է նոր տող <tr> -ով։ Նոր տող պարունակում է նաև երկու Cell–եր։ Աղյուսակը փակվվում է </ table>-ով:

Պարզ դարձնելու համար, նշենք, որ շարքերը վանդակների /Cell-երի/ հորիզոնական գծերն են իսկ սյունյակները՝ ուղղահայաց գծեր։

Cell 1 –ը և Cell 2 -ը ստեղծում են շարքը, իսկ Cell 1-ը և Cell 3՝ սյունյակները։

Վերը նշված օրինակում, աղյուսակը ունի երկու շարք և երկու սյունյակ: Այնուամենայնիվ, աղյուսակը կարող է ունենալ անսահմանափակ թվով շարքեր ու սյունյակներ։

Օրինակ 2

      <table>

          <tr>

               <td>Cell 1</td>

               <td>Cell 2</td>

                <td>Cell 3</td>

               <td>Cell 4</td>

          </tr>

          <tr>

              <td>Cell 5</td>

               <td>Cell 6</td>

                <td>Cell 7</td>

               <td>Cell 8</td>

          </tr>

         <tr>

              <td>Cell 9</td>

               <td>Cell 10</td>

                <td>Cell 11</td>

               <td>Cell 12</td>

          </tr>

        </table>

Բրաուզերում կունենա հետևյալ տեսքը՝

   Cell 1 Cell 2 Cell 3 Cell 4
   Cell 5 Cell 6 Cell 7 Cell 8
   Cell 9 Cell 10 Cell 11 Cell 12

 

Առկա են ատրիբուտներ, թե ո՞չ։

Իհարկե, ատրիբուտներ կան: Օրինակ, border  ատրիբուտը, որն օգտագործվում է աղյուսակի եզրագծի հաստությունը սահմանելու համար:

Օրինակ 3

<table border=’1′>

          <tr>

               <td>Cell 1</td>

               <td>Cell 2</td>

          </tr>

          <tr>

               <td>Cell 3</td>

               <td>Cell 4</td>

          </tr>

        </table>

 Բրաուզերում կունենա հետևյալ տեսքը՝

Cell 1 Cell 2
Cell 3 Cell 4

 

Եզրագծի հաստությունը սահմանվվում է պիքսելներով (տես Դաս 8)

Պատկերներով, դուք նունպես կարող եք սահմանել աղյուսակի լայնությունը փիքսելներով։Այլապես տոկոսներով:

Օրինակ 4

<table border=”1″ width=”30%”>

Այս օրինակը բրաուզերում կցուցադրվի որպես էկրանի 30% լայնություն ունեցող աղյուսակ։ Փորձեք ինքներդ։

 Լրացուցիչ ատրիբուտները։

Աղյուսակի համար կան բազմաթիվ ատրիբուտներհամար։ Ահա ևս երկուսը՝

align: սահմանում է աղյուսակի ողջ բովանդակության հորիզոնական դասավորվածությունը, շարքով կամ մեկ վանդակով: Օրինակ՝ ձախ, կենտրոն կամ աջ:

valign: սահմանում է ուղղահայաց դասավորվածությունը վանդակում։ Օրինակ՝ վերին, միջին կամ ստորին մասում:

 Օրինակ 5

<td align=”right” valign=”top”>Cell 1</td>

 Ի՞նչ է կարել տեղադրել աղյուսակներում։

 Տեսականորեն, դուք կարող եք տեղադրել աղյուսակում ինչ ցանկանաք՝ տեքստ, հղումներ և պատկերն … ՍԱԿԱՅՆ մի մոռոցեք աղյուսակները նախատեսված են աղյուսակային տվյալներ ներկայացնելու համար (այսինքն տվյալներ, որոնք կարող են իմաստալից ներկայացված լինել սյունյակներում և շարքերում), այնպես որ զերծ մնացեք աղյուսակում հենց այնպես նյութեր տեղադրելուց։

Ավելի վաղ՝ մի քանի տարի առաջ, Ինտերնետում աղյուսակները հաճախ օգտագործվում էին որպես layout-ի գործիք։ Սակայն, եթե ուզում եք վերահսկել տեքստերի և պատկերների ներկայանալու ձևը, կա ավելի լավ տարբերակ (Հուշում: CSS)։ Սակայն այդ մասին ավելի ուշ:

Այժմ պարզապես փորձեք այն ինչ սովորեցինք։ Նախագծեք մի շարք աղյուսակներ տարբեր չափերի, տարբեր բովանդակությամբ և տարբեր ատրիբուտներով:

 Հարգելի ընթերցող, խնդրում ենք չմոռանալ like տալ մեր ֆեյսբուքյան էջին, քանի որ նորությունների մեծ մասը առաջինը տեղադրվում է հենց այնտեղ։ Ինչպես նաև հետևեք մեզ այլ սոցիալական ցանցերում և, իհարկե, գրանցվեք մեր բլոգում։

Share.