stahovskis.id.lv

Tēma

Tabulas ​

Lai izveidotu tabulu HTML lapā, tiek izmantota birka <table>...</table>.

Tabulas struktūra ​

index.html
html
<table>
    <!-- 1. rinda tabulā -->
    <tr>
        <!-- Galvenes šūnas -->
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
    </tr>
    <tr>
        <!-- Parastās šūnas ar tekstu -->
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
    </tr>
    <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
    </tr>
</table>

Birkas un to nozīme ​

  • <table>...</table> - galvenā birka tabulas izveidei;
  • <tr>...</tr> - tabulas rinda (table row);
  • <th>...</th> - galvenes šūna (parasti pirmajā rindā, teksts treknrakstā);
  • <td>...</td> - parasta šūna ar tekstu.

Tabulas formatēšana ​

Pēc noklusējuma HTML tabulas nav formatētas — tām nav ne rāmju, ne atstarpju. Ir vairāki veidi, kā pievienot stilu tabulai.

Stils ar CSS (iekšējais stils) ​

index.html
html
<!DOCTYPE html>
<html>
    <head>
        <style>
            /* Stils gan tabulai, gan šūnām */
            table, th, td {
                /* melns rāmis 1px biezs */
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <table style="width:100%">
            <tr>
                <th>Person 1</th>
                <th>Person 2</th>
                <th>Person 3</th>
            </tr>
            <tr>
                <td>Emil</td>
                <td>Tobias</td>
                <td>Linus</td>
            </tr>
            <tr>
                <td>16</td>
                <td>14</td>
                <td>10</td>
            </tr>
        </table>
    </body>
</html>

Stils kā atribūts (tieši iekš HTML) ​

index.html
html
<table style="width:100%">
  <tr>
    <th style="border:1px solid black;">Company</th>
    <th style="border:1px solid black;">Contact</th>
    <th style="border:1px solid black;">Country</th>
  </tr>
  <tr>
    <td style="border:1px solid black;">Alfreds Futterkiste</td>
    <td style="border:1px solid black;">Maria Anders</td>
    <td style="border:1px solid black;">Germany</td>
  </tr>
  <tr>
    <td style="border:1px solid black;">Centro comercial Moctezuma</td>
    <td style="border:1px solid black;">Francisco Chang</td>
    <td style="border:1px solid black;">Mexico</td>
  </tr>
</table>

Noderīgi materiāli ​

HTML Tables

https://www.w3schools.com/html/html_tables.asp