kasis :: HTML tabulas

Sākumlapa
"Pirmā web lapa"
CSS
Citi materiāli

Ceļošana - kalni

HTML

Sintakse
Pamatelementi
Virsraksti, rindkopas
Saraksti
Saites
Attēli
Tabulas
Noformējums
Meta

HTML ...
Doctype
Rakstāmzīmju kodējums
Entītijas
Valodas norādīšana
Teksta virziens

Vēl iesaku:

Tabulas (tables)

HTML tabulas ir domātas datu (teksta, attēlu, saišu u.c.) sakārtošanai rindās un kolonnās. Tomēr tās nav paredzētas web lapas struktūras (layout) veidošanai, kā tas dažkārt novērojams praksē, jo tabulas visi interneta pārlūki (IE, FF u.c.) attēlo vienādi un struktūras veidošana ar to palīdzību ir ļoti vienkārša. Iemesli, kamdēļ tās neiesaka lietot (tajā skaitā W3C) lapas struktūras veidošanā ir:

tādējādi var rasties problēmas lapas attēlošanā nevizuālajiem interneta pārlūkiem, kurus, piemēram, varētu lietot neredzīgie cilvēki;
lapas kods pazaudē savu semantisko jēgu (t.i., tabulas tiek lietotas CSS vietā);
lapas kods kļūst garš, nepārskatāms un samocīts.

Lapas struktūras veidošanai būtu jāizmanto CSS un, piemēram, DIV elementi.

Tabulas pamatelementi

Tabulas pamatelementi ir (lietošu tos, jau iekļautus tagos. Pie tam ir svarīga to lietošanas kārtība!):

<table> </table> - apzīmē tabulas sākumu un beigas;
<tr> </tr> - (table row) apzīmē tabulas rindas sākumu un beigas;
<th> </th> - (table header cell) apzīmē tabulas virsrakstu šūnas. Nolasot tabulas saturu, minēto šūnu saturs tiek nolasīts pirms datu šūnu satura. Parasti tas pēc noklusējuma tiek attēlots centrēts un treknrakstā;
<td> </td> - (table data cell) apzīmē rindu šūnas, kuras satur datus. Jāpiebilst gan, ka šūnas var būt arī tukšas. Tiesa, prakse rāda, ja atstāj tukšu šūnu, tad var ciest šīs šūnas noformējums (rāmis). Lai noformējums neciestu, šādā šūnā var ievietot tukšuma entītiju  .

Tātad tabulā var būt vairākas rindas, bet katrā rindā vairākas šūnas, kurās varam rakstīt tekstu, ievietot attēlus utt.

HTML kods (pielietošu arī īpašību border - skatīt zemāk):

<table border="1px">

  <tr>
    <th> </th>
    <th><p>1.kolonnas virsraksts</p></th>
    <th><p>2.kolonnas virsraksts</p></th>
  </tr>

  <tr>
    <th><p>virsraksts1</p></th>
    <td><p>1.rinda 1.kolonna</p></td>
    <td><p>1.rinda 2.kolonna</p></td>
  </tr>

  <tr>
    <th><p>virsraksts2</p></th>
    <td><p>2.rinda 1.kolonna</p></td>
    <td><p>2.rinda 2.kolonna</p></td>
  </tr>

</table>

Rezultāts:

	1.kolonnas virsraksts	2.kolonnas virsraksts
virsraksts1	1.rinda 1.kolonna	1.rinda 2.kolonna
virsraksts2	2.rinda 1.kolonna	2.rinda 2.kolonna

P.S. Tabulas šūnās tekstu var rakstīt arī pa tiešo, t.i., to neiekļaujot rindkopas elementos!

Tabulas apraksti un grupēšana

papildus informāciju par tabulu var sniegt, izmantojot:

elementu <caption> </caption> - tabulas virsrakstu, kas satur īsu tabulas aprakstu. Ievietojams uzreiz aiz tabulas elementa (table) un pielietojams tikai vienu reizi. Tā saturs būs redzams;
summary - īpašību, ar kuras palīdzību var sniegt garāku tabulas aprakstu neredzīgo cilvēku informēšanai (interpretē Braila rakstā vai audio). Iekļaujama tabulas elementā (table). Tā saturs vizuāli nav redzams;

ja nepieciešams uzsvērt tabulas struktūru izdalot galveni un kājeni, rindas var grupēt izmantojot elementus <thead>, <tfoot>, <tbody>. Tie lietojami minētajā secībā (tabulas kājene pirms ķermeņa!) un jāsatur vienāds kolonnu skaits! Tādējādi pārlūkiem tiek dota iespēja tabulas ķermeņa (tbody) atsevišķai ritināšanai, kā arī, drukājot garas tabulas, katrā lapā atkārtot galvenes un kājenes informāciju. Var tik lietoti vairāki <tbody>. Protams, vai tas tiek atbalstīts, ir katra pārlūka izstrādātāju ziņā
izmantojot elementu <colgroup> </colgroup> iespējams veidot tabulas kolonnu strukturālu dalījumu, kur katrai daļai jau var piesaistīt savu noformējumu un tml. Izmantojot īpašību span, vienā grupā var apvienot vairākas kolonnas, savukārt ar īpašību width var noteikt katras kolonnas platumu konkrētajā grupā (primārs būs konkrēto kolonnu ar elementa <col> palīdzību definētais platums!);
izmantojot elementu <col>, iespējams vairākām kolonnām vienlaicīgi piesaistīt kopēju noformējumu. Tas arī ir vienīgais šī elementa mērķis un šajā gadījumā nekāda grupēšana nenotiek! Elementam NAV noslēdzošā taga!

NB! Jāsaprot, ka pat nenorādot span īpašību, tās noklusētā vērtība elementiem <colgroup> un <col> tomēr ir "1". Ja <colgroup> satur kaut vienu <col> elementu, tad <colgroup> kolonnu skaits tiek rēķināts no <col> elementa span vērtībām. Svarīgi, lai reālais kolonnu skaits sakrīt ar visu span vērtību kopsummu!

NB! Kolonnu platumu var noteikt kā fiksētu (pikseļos, piem., width="20"), procentuāli (width="20%") vai proporcionāli no tabulai nepieciešamā platuma (width="2*". Tiek lietots skaitlis ar zvaigznīti. Savukārt "0*" katrai kolonnai piemēros minimālo platumu šūnu satura attēlošanai).
Ja kolonnu (-as) platumi tiek norādīti relatīvi (procentos), tad ir jānorāda arī visas tabulas platums!

HTML kods:

<table border="1px" width="550" summary="Tabulā sniegts smalks dažādu, pavisam deviņu, SIA sabiedrību nomaksātā PVN aplūkojums, kā arī kopsummas.">

  <caption>SIA nomaksātā PVN aplūkojums</caption>
  <colgroup width="200"></colgroup>
  <colgroup>
    <col span="3" width="0*">
    <col width="1*">
    <col width="2*"></colgroup>
  <thead>
  <tr><th>Mēnesis</th>
    <th>SIA "A"</th><th>SIA "B"</th><th>SIA "C"</th>
    <th>SIA "D"</th><th>Summa</th></tr></thead>

  <tfoot>
  <tr><th>Kopā</th>
    <td>380</td><td>660</td><td>543</td>
    <td>502</td><td>3059</td></tr></tfoot>

  <tbody>
  <tr><th>Jan</th>
    <td>180</td><td>320</td><td>321</td>
    <td>222</td><td>1475</td></tr>
  <tr><th>Feb</th>
    <td>200</td><td>340</td><td>222</td>
    <td>280</td><td>1584</td></tr></tbody>

</table>

Rezultāts:

SIA nomaksātā PVN aplūkojums
Mēnesis	SIA "A"	SIA "B"	SIA "C"	SIA "D"	Summa
Kopā	380	660	543	502	3059
Jan	180	320	321	222	1475
Feb	200	340	222	280	1584

Piemēra tabulā platumam vajadzētu būt noteiktam sekojoši: vispirms tiek rezervēts 200 pikseļu platums pirmajai kolonnai, tad otrajai līdz ceturtai kolonnai rezervē minimālo platumu satura attēlošanai, visbeidzot atlikušo platumu sadala trīs vienādās daļās, no kurām vienu daļu piešķir piektajai kolonnai, bet divas daļas sestajai. Diemžēl prakse rāda, ka pārlūkprogrammas neatbalsta proporcionālās vērtības kolonnu platumiem (ja kļūdos, lūdzu, dodiet ziņu!)!

Šūnu apvienošana

Šūnu apvienošanu var veikt ar sekojošu īpašību palīdzību (pievienojamas šūnu elementiem <th> vai <td>, to noklusētā vērtība ir "1"):

rowspan - apvienos šūnas virzienā uz leju, t.i., rindu šūnas (rindas). Ja tās vērtība būs "0", tad vajadzētu tikt apvienotām visām šūnām sākot no šīs, līdz pat pēdējai šūnai (grupā, ja lietots <thead>, <tfoot> vai <tbody>);
colspan - apvienos šūnas virzienā uz priekšu pa horizontāli, t.i., kolonnu šūnas (kolonnas). Ja tās vērtība būs "0", tad vajadzētu tikt apvienotām visām šūnām sākot no šīs, līdz pat pēdējai šūnai grupā, ja lietots <colgroup>.

NB! Apvienotās šūnas nedrīkst pārklāties, piemēram, ja vienlaicīgi tiek apvienotas šūnas pa rindām un kolonnām! Un vēl - neesmu drošs par pārlūku atbalstu vērtībai "0" :(

HTML kods:

<table border="1">
<tr>
<th colspan="3">Virsraksts</th>
</tr>
<tr>
<td>2.rinda 1.kolonna</td>
<td rowspan="2">2.rinda 2.kolonna</td>
<td>2.rinda 3.kolonna</td>
</tr>
<tr>
<td>3.rinda 1.kolonna</td>
<td>3.rinda 3.kolonna</td>
</tr>
</table>

Rezultāts:

Virsraksts
2.rinda 1.kolonna	2.rinda 2.kolonna	2.rinda 3.kolonna
3.rinda 1.kolonna	2.rinda 2.kolonna	3.rinda 3.kolonna

Nedaudz noformējuma (īpašības)

width - nosaka platumu;
border - nosaka līniju biezumu pikseļos tabulas ārējam rāmim;
frame - nosaka kuras līnijas tabulas ārējam rāmim būs redzamas. Iespējamās īpašības ir:

void - līnijas nav redzamas (noklusētā vērtība);
box vai border - visas puses;
above - augšējā līnija;
below - apakšējā līnija;
hsides - augšējās un apakšējās līnijas;
vsides - sānu līnijas;
lhs - kreisās rokas līnija;
rhs - labās rokas līnija;

rules - nosaka kādi likumi būs spēkā tabulas iekšienē, t.i., starp šūnām. Iespējamās īpašības ir:

none - nekādi (noklusētā vērtība);
all - noteikumus attiecinās uz visām rindām un kolonnām, t.i., šūnām;
groups - noteikumus attiecinās uz grupām (<thead>, <tfoot>, <tbody>, <colgroup>);
rows - noteikumus attiecinās uz rindām;
cols - noteikumus attiecinās uz kolonnām;

cellspacing - nosaka attālumu starp šūnām (šūnu līnijām);
cellpadding - nosaka attālumu no šūnas līnijas līdz šūnas saturam, piemēram, tekstam. Šai īpašībai vērtību var izteikt arī procentos, piemēram, cellpading="10%" - šajā gadījumā pieejamais attālums uz katru pusi būs "5%"! Ja tabulai vai kolonnai ir noteikts fiksēts platums, tad realitātē dotās īpašības vērtība var būt arī lielāka;

NB! Ja jau border un frame attiecas tikai uz tabulas ārējo rāmi, tad kāpēc līnijas parādās visām tabulas šūnām?
Iemesls tam ir priekšraksts par atsevišķu īpašību savstarpējo sakarību:

ja border="0", tad automātiski frame="void" un, ja vien nav definēts citādi, rules="none";
ja border vērtība ir lielāka par "0", tad automātiski frame="border" un, ja vien nav definēts citādi, rules="all";
tabulas elementā vienkārši ierakstot vērtību border (<table border>), tā automātiski tiek uzskatīta kā vērtība īpašībai frame="border" un paredz, ka rules="all", bet border vērtība ir lielāka par "0", t.i., tā tiek pārlūka noteikta pēc noklusētajiem uzstādījumiem.

HTML kods:

<table width="550" border="1" frame="hsides" rules="groups" cellpadding="10">

  <colgroup width="20%"></colgroup>
  <colgroup>
    <col span="4" width="15%">
    <col width="20%"></colgroup>
  <thead>
  <tr><th>Mēnesis</th>
    <th>SIA "A"</th><th>SIA "B"</th><th>SIA "C"</th>
    <th>SIA "D"</th><th>Summa</th></tr></thead>

  <tfoot>
  <tr><th>Kopā</th>
    <td>380</td><td>660</td><td>543</td>
    <td>502</td><td>3059</td></tr></tfoot>

  <tbody>
  <tr><th>Jan</th>
    <td>180</td><td>320</td><td>321</td>
    <td>222</td><td>1475</td></tr>
  <tr><th>Feb</th>
    <td>200</td><td>340</td><td>222</td>
    <td>280</td><td>1584</td></tr></tbody>

</table>

Rezultāts:

Mēnesis	SIA "A"	SIA "B"	SIA "C"	SIA "D"	Summa
Kopā	380	660	543	502	3059
Jan	180	320	321	222	1475
Feb	200	340	222	280	1584

Tātad tabulai līniju biezums ir 1px, tiek attēlota ārējā augšējā un apakšējā līnija, kā arī ar līnijām nodalītas grupas tabulas iekšienē (nevis ārpusē). Tāpat attālums no šūnas satura līdz līnijai ir 10px.

<< Atpakaļ

Tālāk >>