Tabulas


Sākumlapa Iepriekšējā lappuse Nākošā lappuse



Tabulas veidošanas pamatkomandas
Vienkārša tabula
Tabulas dalījuma līnijas
Tabulas paresnināts rāmis
Tabulas pamatne
Atstarpes starp tabulas elementiem
Paresninātas dalījuma līnijas
Atstarpes starp tekstu un atdalošām līnijām
Šūnu apvienošana un dalīšana
Tabulas galva
Tabulas un aiļu platumi
Paraugs tabulu izmantošanai

Tabulas ir ērts veids, kā izkārtot datus ailēs un rindās – ne tikai skaitļus un tekstus, bet arī dažādus lapas objektus, piemēram, attēlus un ar tiem saistītos tekstus. Lai arī pastāv citi viedokļi (stili kā lapas noformējuma panaceja), tabulas ir ērti izmantojamas visas lapas satura izkārtošanā. Tikai jāatceras, ka pārāk sarežģītas un lielas tabulas būtiski iespaido lapas parādīšanas ātrumu pārlūkā.

Tabulas veidošanas pamatkomandas


Saturs Iepriekšējā lappuse Lappas saturs Nākošā lappuse

Vienkārša tabula

Vienkāršoko tabulu var izveidot izmantojot tikai trīs komandas:

Tabulas aiļu skaitu nosaka lielākais šūnu skaits vienā rindā.

HTML teksts:

<TABLE>
<TR><TD>R1A1</TD><TD>R1A2</TD><TD>R1A3</TD><TD>R1A4</TD></TR>
<TR><TD>R2A1</TD><TD></TD><TD> </TD><TD>R2A4</TD></TR>
<TR><TD>R3A1</TD><TD>R3A2</TD><TD>R3A3</TD><TD>R3A4</TD></TR>
</TABLE>

Rezultāts:

R1A1R1A2R1A3R1A4
R2A1 R2A4
R3A1R3A2R3A3R3A4

Saturs Iepriekšējā lappuse Lappas saturs Nākošā lappuse

Tabulas dalījuma līnijas

Tabulas dalījuma līnijas var padarīt redzamas ar parametru BORDER. Pēc noklusējma, tā vērtība ir '0' (līnijas nav redzama). Nākošajā piemērā, kurā ir redzams tabulas sadalošās līnijas, pievērsiet uzmanību tabulas otrās rindas otrai un trešai šūnai. Šūna, kas ir atstāta tukša, nav redzama. Ja nepieciešams, lai arī tukša šūna būtu redzama, to jāaizpilda, piemēram, ar nedalāmo atstarpi (&nbsp;). Ja nepieciešms vienas tabulas ietvaros izmantot dažādas dalījuma līnijas, jāizmanto stili.

HTML teksts:

<TABLE BORDER=1>
<TR><TD>R1A1</TD><TD>R1A2</TD><TD>R1A3</TD><TD>R1A4</TD></TR>
<TR><TD>R2A1</TD><TD></TD><TD> </TD><TD>R2A4</TD></TR>
<TR><TD>R3A1</TD><TD>R3A2</TD><TD>R3A3</TD><TD>R3A4</TD></TR>
</TABLE>

Rezultāts:

R1A1R1A2R1A3R1A4
R2A1 R2A4
R3A1R3A2R3A3R3A4

Saturs Iepriekšējā lappuse Lappas saturs Nākošā lappuse

Tabulas paresnināts rāmis

Palielinot BORDER vērtību, tiek paresnināts tikai tabulas rāmis.

HTML teksts:

<TABLE BORDER=9>
<TR><TD>R1A1</TD><TD>R1A2</TD><TD>R1A3</TD><TD>R1A4</TD></TR>
<TR><TD>R2A1</TD><TD>R2A2</TD><TD>R2A3</TD><TD>R2A4</TD></TR>
<TR><TD>R3A1</TD><TD>R3A2</TD><TD>R3A3</TD><TD>R3A4</TD></TR>
</TABLE>

Rezultāts:

R1A1R1A2R1A3R1A4
R2A1R2A2R2A3R2A4
R3A1R3A2R3A3R3A4

Saturs Iepriekšējā lappuse Lappas saturs Nākošā lappuse

Tabulas pamatne

Tabulu kopumā, vai atsevišķus tās elementus ar parametra bgcolor palīdzību iespējams aizkrāsot. Savukārt ar parametru background var izveidot tapeti.

HTML teksts:

<TABLE BGCOLOR=YELLOW>
<TR><TD>R1A1</TD><TD>R1A2</TD><TD>R1A3</TD><TD>R1A4</TD></TR>
<TR BGCOLOR=BLUE><TD>R2A1</TD><TD BGCOLOR=WHITE>R2A2</TD><TD>R2A3</TD><TD>R2A4</TD></TR>
<TR BACKGROUND=/atteli/pamati/Raksti/C_pp_galdauts_06o.gif><TD>R3A1</TD><TD>R3A2</TD><TD>R3A3</TD><TD>R3A4</TD></TR>
</TABLE>

Rezultāts:

R1A1R1A2R1A3R1A4
R2A1R2A2R2A3R2A4
R3A1R3A2R3A3R3A4

Saturs Iepriekšējā lappuse Lappas saturs Nākošā lappuse

Atstarpes starp tabulas elementiem


Saturs Iepriekšējā lappuse Lappas saturs Nākošā lappuse

Paresninātas dalījuma līnijas

Lai palielinātu līniju biezumu starp šūnām, jāizmanto parametrs CELLSPACING.

HTML teksts:

<TABLE BORDER=1 CELLSPACING=9>
<TR><TD>R1A1</TD><TD>R1A2</TD><TD>R1A3</TD><TD>R1A4</TD></TR>
<TR><TD>R2A1</TD><TD>R2A2</TD><TD>R2A3</TD><TD>R2A4</TD></TR>
<TR><TD>R3A1</TD><TD>R3A2</TD><TD>R3A3</TD><TD>R3A4</TD></TR>
</TABLE>

Rezultāts:

R1A1R1A2R1A3R1A4
R2A1R2A2R2A3R2A4
R3A1R3A2R3A3R3A4

Saturs Iepriekšējā lappuse Lappas saturs Nākošā lappuse

Atstarpes starp tekstu un atdalošām līnijām

Savukārt, lai tekst nebāztos virsū atdalošām līnijām, jāizmanto parametrs CELLPADDING.

HTML teksts:

<TABLE BORDER=1 CELLPADDING=9>
<TR><TD>R1A1</TD><TD>R1A2</TD><TD>R1A3</TD><TD>R1A4</TD></TR>
<TR><TD>R2A1</TD><TD>R2A2</TD><TD>R2A3</TD><TD>R2A4</TD></TR>
<TR><TD>R3A1</TD><TD>R3A2</TD><TD>R3A3</TD><TD>R3A4</TD></TR>
</TABLE>

Rezultāts:

R1A1R1A2R1A3R1A4
R2A1R2A2R2A3R2A4
R3A1R3A2R3A3R3A4

Saturs Iepriekšējā lappuse Lappas saturs Nākošā lappuse

Šūnu apvienošana un dalīšana

Blakus esošās šūnas iespējams apvienot. Patiesāk gan būtu teikt, ka šūnas ir iespējams izplest uz blakus esošo šūnu rēķina. Parametrs ROWSPAN norāda par cik rindām izpletīsies dotā šūna. Savukārts parametrs COLSPAN norāda par cik ailēm izpletīsies dotā šūna. Šūnas, kuru vietu aizņem paplestā šūna, tiek pabīdītas pa labi.

HTML teksts:

<TABLE BORDER=1 CELLPADDING=9>
<TR><TD>R1A1</TD><TD>R1A2</TD><TD>R1A3</TD><TD>R1A4</TD></TR>
<TR><TD>R2A1</TD><TD COLSPAN=2 ROWSPAN=2>R2A2</TD><TD>R2A3</TD><TD>R2A4</TD></TR>
<TR><TD>R3A1</TD><TD>R3A2</TD><TD>R3A3</TD><TD>R3A4</TD></TR>
<TR><TD>R4A1</TD><TD>R4A2</TD><TD>R4A3</TD><TD>R4A4</TD></TR>
</TABLE>

Rezultāts:

R1A1R1A2R1A3R1A4
R2A1R2A2R2A3R2A4
R3A1R3A2R3A3R3A4
R4A1R4A2R4A3R4A4

Pieņemot, ka ir notikusi šūnu apvienošana, tās šūnas, kuru vietu aizņem paplestā šūna, tabulā virs nav jāraksta.

HTML teksts:

<TABLE BORDER=1 CELLPADDING=9>
<TR><TD>R1A1</TD><TD>R1A2</TD><TD>R1A3</TD><TD>R1A4</TD></TR>
<TR><TD>R2A1</TD><TD COLSPAN=2 ROWSPAN=2>R2A2</TD><TD>R2A4</TD></TR>
<TR><TD>R3A1</TD><TD>R3A4</TD></TR>
<TR><TD>R4A1</TD><TD>R4A2</TD><TD>R4A3</TD><TD>R4A4</TD></TR>
</TABLE>

Rezultāts:

R1A1R1A2R1A3R1A4
R2A1R2A2R2A4
R3A1R3A4
R4A1R4A2R4A3R4A4

Sadalīt šūnu sīkāk nav iespējams. Viena iespēja, kā panākt to, lai kāda šūna izskatītos sadalīta, ir palielināt tabulas aiļu/rindu skaitu un izstiept atbilstošās pārējās šūnas pa jaunradītām ailēm/rindām.

HTML teksts:

<TABLE BORDER=1 CELLPADDING=9>
<TR><TD>R1A1</TD><TD COLSPAN=2>R1A2</TD><TD>R1A4</TD></TR>
<TR><TD ROWSPAN=2>R2A1</TD><TD>R2A2</TD><TD>R2A3</TD><TD ROWSPAN=2>R2A4</TD></TR>
<TR><TD>R3A2</TD><TD>R3A3</TD></TR>
<TR><TD>R4A1</TD><TD COLSPAN=2>R4A2</TD><TD>R4A4</TD></TR>
</TABLE>

Rezultāts:

R1A1R1A2R1A4
R2A1R2A2R2A3R2A4
R3A2R3A3
R4A1R4A2R4A4

Ja vienkāršas tabulas gadījumā šads risinājums ir gana labs, tad pieaugot tabulas sarežģītībai šāda šūnas „dalīšana” ir apgrūtinoša. Šādā šūnā iespējams ievietot jaunu tabulu.

HTML teksts:

<TABLE BORDER=1 CELLPADDING=3>
<TR><TD>T1R1A1</TD><TD>T1R1A2</TD><TD>T1R1A3</TD><TD>T1R1A4</TD></TR>
<TR><TD>T1R2A1</TD><TD>
 <TABLE BORDER=1 CELLPADDING=3>
 <TR><TD>T2R1A1</TD><TD>T2R1A2</TD><TD>T2R1A3</TD><TD>T2R1A4</TD></TR>
 <TR><TD>T2R2A1</TD><TD>T2R2A2</TD><TD>T2R2A3</TD><TD>T2R2A4</TD></TR>
 <TR><TD>T2R3A1</TD><TD>T2R3A2</TD><TD>T2R3A3</TD><TD>T2R3A4</TD></TR>
 </TABLE>
</TD><TD>T1R2A3</TD><TD>T1R2A4</TD></TR>
<TR><TD>T1R3A1</TD><TD>T1R3A2</TD><TD>T1R3A3</TD><TD>T1R3A4</TD></TR>
</TABLE>

Rezultāts:

T1R1A1T1R1A2T1R1A3T1R1A4
T1R2A1
T2R1A1T2R1A2T2R1A3T2R1A4
T2R2A1T2R2A2T2R2A3T2R2A4
T2R3A1T2R3A2T2R3A3T2R3A4
T1R2A3T1R2A4
T1R3A1T1R3A2T1R3A3T1R3A4

Saturs Iepriekšējā lappuse Lappas saturs Nākošā lappuse

Tabulas galva

Kamēr tiek veidotas īsas, vienā lappusē ietilpstošas tabulas, parasti netiek pievērsta uzmanība tabulas galvu pareizai noformēšanai. HTML ļauj definēt atsevišķi tabulas galvu un pārējo tabulas daļu. Tabulas galvu nosaka komanda THEAD, atlikušo tabulas daļu – TBODY. Sākot no HTML ceturtās versijas tabulas galvu šūnu apzīmēšanai izmanto nevis komandu TD, bet gan komandu TH, kura nodrošina arī atšķirīgu šūnu izskatu.

Ja tabulas galva ir tikusi atzīmēta ar attiecīgajam komandām, tad tabulai, kura pārsniedz vienas lappuses izmērus, katrā jaunā lappusē tiks izdrukāta arī tabulas galva.

Tabulas ar galvas piemērs:

<TABLE BORDER=1 WIDTH=85%>
<THEAD>
<TR>
<TH COLSPAN=3>Aiļu pirmā grupa</TH>
<TH COLSPAN=2>Aiļu otrā grupa</TH>
</TR>
<TR>
<TH>1. aile</TH><TH>2. aile</TH><TH>3. aile</TH><TH>4. aile</TH><TH>5. aile</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>R1A1</TD><TD>R1A2</TD><TD>R1A3</TD><TD>R1A4</TD><TD>R1A5</TD>
</TR>
<TR>
<TD>R2A1</TD><TD>R2A2</TD><TD>R2A3</TD><TD>R2A4</TD><TD>R2A5</TD>
<TR>
</TBODY>
</TABLE>
Te var apskatīt šādi noformētu tabulu —>.


Saturs Iepriekšējā lappuse Lappas saturs Nākošā lappuse

Tabulas un aiļu platumi

Ja netiek norādīts tabulas platums, tad tabula tiek parādīt pēc iespējas aizņemot mazāk vietas. Aiļu platumu nosaka tabulas saturs. Ja kādā ailē nav ne viena ieraksta, tad tai tiek atvēlēts tik vien platums, cik nepieciešams apmaļu uzzīmēšanai. Ja nepieciešams, lai tabula aizņemtu noteiktu daļa loga platumu, pie tabulas parametriem jāraksta width= un norādot attiecīgo platumu procentos vai pikseļos. Ja norādītajā platumā tabulas ailēs nevar ietilpināt tabulas saturu, tad tabula tiks rādīta tik plata, cik nepieciešams. Līdzīga ar parametru height= iespējams norādīt gan visas tabulas, gan atsevīšku rindu augstumu.

Ja nepieciešams uzdot noteiktu aiļu platumu jāizmanto konstrukcija <COLGROUP><COL width="..">..</COLGROUP>. Aiļu platumu var uzdot pikseļos (skaitlis) un/vai procentos (skaitlis ar procenta zīmi).

Nākamajā piemērā visa tabula aizņems 85 % no loga platuma. Pirmā aile būs 30 pikseļus plata, bet otrā aizņems 85% no tabulas platuma. Savukārt trešā aizņems to, kas paliks pāri. Tabulas pirmai pamatrindai uzrādīts 45 pikseļu liels augstums.

<TABLE BORDER=1 WIDTH=85%>
	<COLGROUP>
		<COL WIDTH=30 />
		<COL WIDTH=85% />
		<COL WIDTH=* />
	</COLGROUP>
	<THEAD>
		<TR>
			<TH>1</TH>
			<TH>2</TH>
			<TH>3</TH>
		</TR>
	</THEAD>
	<TBODY>
		<TR HEIGHT=45>
			<TD>1R1A</TD>
			<TD>1R2A</TD>
			<TD>1R3A</TD>
		</TR>
		<TR>
			<TD>2R1A</TD>
			<TD>2R2A</TD>
			<TD>2R3A</TD>
		</TR>
	</TBODY>
</TABLE>
1 2 3
1R1A 1R2A 1R3A
2R1A 2R2A 2R3A

Saturs Iepriekšējā lappuse Lappas saturs Nākošā lappuse

Paraugs tabulu izmantošanai


Saturs Iepriekšējā lappuse Lappas saturs Nākošā lappuse


priede.bf.lu.lv Bioloģijas fakultāte Datorklase Sākumlapa Meklēt tekstu Atsauksmēm un Jautājumiem
Pamatlapa BF Datorklase Sākums Meklē Raksti mums
Lappusi
«tabulas.shtml»
veidoja
karlo
2013.11.22-20:13
Lapa ir publicēta ar    CC    BY–SA    3.0 licenci. Ja lapā ir ietvertas daļas uz kurām attiecas cita licence, tas norādīts atsevišķi lapas tekstā.