HayqSystem

HTML5 աղյուսակներ

HTML5 աղյուսակներ ։ HTML 5 աղյուսակներ HTML-ում աղյուսակներ ստեղծելու համար օգտագործվում է աղյուսակի տարրը։ Յուրաքանչյուր աղյուսակ <table> և </table> թեգերի միջև պարունակում է տողեր, որոնք ներկայացված են tr տարրով: Եվ <tr> և </tr> թեգերի միջև յուրաքանչյուր տող պարունակում է բջիջներ որպես td տարրեր:

Եկեք ստեղծենք պարզ աղյուսակ.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Project HTML5</title>
    </head>
    <body>
        <table>
            <tr>
                <td>Մոդել</td> <td>Կազմակերպություն</td> <td>Արժեք</td>
            </tr>
            <tr>
                <td>Nexus 6P</td> <td>Huawei</td> <td>49000</td>
            </tr>
            <tr>
                <td>iPhone 6S PLus</td> <td>Apple</td> <td>62000</td>
            </tr>
            <tr>
                <td>Lumia 950 XL</td> <td>Microsoft</td> <td>35000</td>
            </tr>
        </table>
    </body>
</html>

Այստեղ մենք ունենք 4 տող աղյուսակում, և յուրաքանչյուր տող ունի երեք սյունակ:

Ավելին, այս դեպքում առաջին տողը հանդես է գալիս որպես վերնագիր, իսկ մնացած երեք տողերը իրականում աղյուսակի բովանդակությունն են։ Աղյուսակի վերնագրերի, ստորագրի և մարմնի html-ի բաժանումը տրվում է համապատասխանաբար thead, tfoot և tbody տարրերով: Դրանք օգտագործելու համար մենք աղյուսակը փոփոխում ենք հետևյալ կերպ.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Project HTML5</title>
    </head>
    <body>
        <table>
            <caption><b>Հանրահայտ մոդելներ 2015</b></caption>
            <thead>
                <tr>
                    <th>Մոդել</th> <th>Կազմակերպություն</th> <th>Արժեք</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Nexus 6P</td> <td>Huawei</td> <td>49000</td>
                </tr>
                <tr>
                    <td>iPhone 6S PLus</td> <td>Apple</td> <td>62000</td>
                </tr>
                <tr>
                    <td>Lumia 950 XL</td> <td>Microsoft</td> <td>35000</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="3">ԻՆֆորմացիա Մարտի 1-ի դրությամբ</th>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

Thead տարրը ներառում է վերնագրի գիծը: Բջիջների համար վերնագրի տարրը ոչ թե td տարրն է, այլ th տարրը: Երրորդ տարրը վերնագիրը դարձնում է հաստ: Եվ մնացած բոլոր տողերը փակված են մարմնի մեջ

tfoot տարրը սահմանում է սեղանի ստորագիր: Աղյուսակի վերաբերյալ որոշ օժանդակ տեղեկություններ սովորաբար ցուցադրվում են այստեղ:

Բացի սյունակների իրական վերնագրերից, մենք կարող ենք օգտագործել վերնագրի տարրը աղյուսակի ընդհանուր վերնագիր սահմանելու համար:

Հարկ է նաև նշել, որ աղյուսակի footer պարունակում է միայն մեկ սյունակ, որը ընդլայնվում է երեք սյունակներում՝ օգտագործելով colspan = “3” հատկանիշը:

Colspan հատկանիշը ցույց է տալիս, թե քանի սյունակ է ընդլայնված այս բջիջը: Բացի այդ, օգտագործելով rowspan հատկանիշը, մենք կարող ենք ընդլայնել բջիջը որոշակի թվով տողերով: Օրինակ:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Project HTML5</title>
        <style>
            td{
                width: 60px; 
                height:60px; 
                border: solid 1px silver; 
                text-align:center;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td rowspan="2" style="background-color:green;">1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>6</td>
                <td colspan="2" style="background-color:red;">7</td>
            </tr>
        </table>
    </body>
</html>