08. Tabulas

Tabulas HTML valodā ir paredzētas strukturētu datu attēlošanai rindās un kolonnās — piemēram, cenrāžiem, salīdzinājumiem, statistikai u.tml.

Svarīgi: tabulas ir domātas datu attēlošanai, nevis lapas izkārtojuma veidošanai. Lapas izkārtojumam izmanto CSS (flexbox, grid).

Vienkārša tabula

Tabulu veido ar šādiem tagiem:

• <table> — tabulas ietvars
• <tr> — tabulas rinda (table row)
• <td> — tabulas šūna (table data)
• <th> — tabulas galvenes šūna (table header) — teksts pēc noklusējuma tiek attēlots treknrakstā

Piemērs

<table>
<tr>
<th>Vārds</th>
<th>Vecums</th>
<th>Pilsēta</th>
</tr>
<tr>
<td>Jānis</td>
<td>25</td>
<td>Rīga</td>
</tr>
<tr>
<td>Anna</td>
<td>30</td>
<td>Liepāja</td>
</tr>
</table>

Rezultāts

Tabulas struktūra: thead, tbody, tfoot

Lielākām tabulām ieteicams izmantot strukturālos elementus, kas palīdz pārlūkprogrammai un ekrāna lasītājiem labāk saprast tabulas uzbūvi:

• <thead> — tabulas galvene
• <tbody> — tabulas pamatsaturs
• <tfoot> — tabulas kājene (kopsavilkumi, summas)

<table>
<thead>
<tr><th>Produkts</th><th>Cena</th></tr>
</thead>
<tbody>
<tr><td>Maize</td><td>1.50€</td></tr>
<tr><td>Piens</td><td>1.20€</td></tr>
</tbody>
<tfoot>
<tr><td>Kopā</td><td>2.70€</td></tr>
</tfoot>
</table>

Šūnu apvienošana

Šūnas var apvienot horizontāli ar colspan vai vertikāli ar rowspan:

<table>
<tr>
<th colspan="2">Vārds un uzvārds</th>
<th>Vecums</th>
</tr>
<tr>
<td>Jānis</td>
<td>Bērziņš</td>
<td rowspan="2">25</td>
</tr>
<tr>
<td>Anna</td>
<td>Bērziņa</td>
</tr>
</table>

Rezultāts

Tabulas paraksts

<caption> elements ļauj pievienot tabulai virsrakstu vai aprakstu. To ievieto uzreiz pēc <table> taga:

<table>
<caption>Darbinieku saraksts</caption>
<tr><th>Vārds</th><th>Amats</th></tr>
<tr><td>Jānis</td><td>Programmētājs</td></tr>
</table>

Tabulu izskatu — apmales, atstarpes, krāsas un fonts — var pilnībā pielāgot ar CSS.

Laboja mad, labots 1x