Tabulu izmantošana lapu noformēšanā

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


Teksta un attēlu izkārtošana lapā izmantojot tabulas
Apmaļu veidošana izmantojot tabulas
Apmales veidotas ar <IMG SRC=...>
Stūri likti ar <IMG SRC=...>, pārējais ar <TD BACKGROUND=...>
Apmales veidotas ar <TD BACKGROUND=...>

Teksta un attēlu izkārtošana lapā izmantojot tabulas

Izmantojot stilus iespējams panākt diezgan labu attēlu, teksta un citu objektu izvietojumu lapā. Tomēr šādi noformētas lapas ir stipri izkropļotas vai vispār nesaprotamas vecākos pārlūkos. Ja arī, taisot lapu, netiek ņemti vērā cilvēki, kas vēl lieto vecākus pārlūkus, tad vajadzētu atcerēties, ka lapu izskats var stipri atšķirties no iecerētā, ja lapas skatītāja ekrāna izšķirtspēja būtiski atšķiras no tās, kam pielāgota dotā lapa. Daudz paredzamākus rezultātus iespējams panākt izmantojot tabulas, kā lapas skeletu. Protamas, ne visu iespējams panākt ar tabulām, piemēram, ar tabulām nav iespējams panākt dažādu objektu savstarpēju pārklāšanos.

Tabulas ir ļoti parocīga, ja vienā rindā jānovieto objekti, kas atrodas dažādās vietās, piemēram, pirmais atrodas lapas kreisā malā, otrs – lapas centrā, bet trešais pieguļ lapas labajai malai. Šinī gadījumā jaizvēlas pareizas tabulas platums, lai tā, neatkarīgi no satura, aizņemtu pilnu ekrāna platumu (WIDTH=100%).

Teksts ar komandām:

<HR>
<TABLE WIDTH=100% BORDER=0 CELLSPACING=9 CELLPADDING=6>
<TR VALIGN=top BGCOLOR=#DDEEAA>
	<TD ALIGN=left><i>Teksts pie kreisās malas</i></TD>
	<TD ALIGN=center><i>Teksts centrā</i></TD>
	<TD ALIGN=right><i>Teksts pie labās malas</i></TD>
</TR>
</TABLE>
<HR>

Rezultāts:

Teksts pie kreisās malas Teksts centrā Teksts pie labās malas
Jaunbūve
Ne jau vienmēr
viss sanāk
kā iecerēts

Tabulas ieteicams izmantot, lai saturētu kopā attēlus ar tam piekātotu tekstu. Šādi var izveidot fotogrāfiju albumu pārskata lapas (Skati piemēru). Tikpat veiksmīgi tabula ir izmantojama attēla + teksta ievietošana pamattekstā. Tabulai, līdzīgi kā attēliem, var uzrādīt, kurā malā tai jāatrodas (ALIGN=left|right). Pamatteksts, kas seko aiz dotās tabulas, šādai tabulai „aptek” apkārt. Brīvo telpu starp tekstu un tabulu nosaka parametri HSPACE (no abām malām) un VSPACE (augšai un apakšai). Šādi ir ievietots attēls ar paskaidrojumu, kuram ir jābūt redzamam pa labi no šīs rindkopas. Šī attēla un paskaidrojuma ievietošanu lapā veic šādas komandas: 

<TABLE ALIGN=right BORDER=0 CELLSPACING=9 CELLPADDING=6 HSPACE=30>
<TR>
	<TD ALIGN=left>
		<IMG SRC=/atteli/mazini/jaunbuve.gif
		 WIDTH=100 HEIGHT=150 ALT="Jaunbūve"
		 TITLE="Šī lapa aizvien tiek pilnveidota">
	</TD>
</TR>
<TR>
	<TD ALIGN=left>
		<SMALL><I>
		Ne jau vienmēr
		<BR>viss sanāk
		<BR>kā iecerēts
		</I></SMALL>
	</TD>
</TR>
</TABLE>
Saturs Iepriekšējā lappuse Lappas saturs Nākošā lappuse

Apmaļu veidošana izmantojot tabulas

Ja gribas teksta vai attēla ierāmēšanai izmantot daudzkrāsainus vai ornamentētus rāmjus, tad nepieciešams veidot attiecīgos attēlus un to „apvilkšanai” ap tekstu jāizmanto tabula. Lai apmalē neparādītos nevajadzīgi pārravumi, tabulas parametros jāieraksta, ka atdalošās līnijas ir 0 pikseļu platas (BORDER=0) un nav brīvas telpas ne starp šūnām, ne šūnām un tekstu (CELLPADDING=0 CELLSPACING=0).

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

Apmales veidotas ar <IMG SRC=...>

Teksts ar komandām (piemērā izmantotais teksts ievietots ar SSI komandu):

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR HEIGHT=16>
	<TD WIDTH=16><IMG SRC=/atteli/apmales/kopas/G_aa/G_aa-1.gif WIDTH=16 HEIGHT=16></TD>
	<TD><IMG SRC=/atteli/apmales/kopas/G_aa/G_aa-2.gif WIDTH=100% HEIGHT=16></TD>
	<TD WIDTH=16><IMG SRC=/atteli/apmales/kopas/G_aa/G_aa-3.gif WIDTH=16 HEIGHT=16></TD>
</TR>
<TR>
	<TD WIDTH=16><IMG SRC=/atteli/apmales/kopas/G_aa/G_aa-4.gif WIDTH=16 HEIGHT=100%></TD>
	<TD BACKGROUND=/atteli/apmales/kopas/G_aa/G_aa-5.gif><!--#echo encoding="none" var="teksts" --></TD>
	<TD WIDTH=16><IMG SRC=/atteli/apmales/kopas/G_aa/G_aa-6.gif WIDTH=16 HEIGHT=100%></TD>
</TR>
<TR HEIGHT=16>
	<TD WIDTH=16><IMG SRC=/atteli/apmales/kopas/G_aa/G_aa-7.gif WIDTH=16 HEIGHT=16></TD>
	<TD><IMG SRC=/atteli/apmales/kopas/G_aa/G_aa-8.gif WIDTH=100% HEIGHT=16></TD>
	<TD WIDTH=16><IMG SRC=/atteli/apmales/kopas/G_aa/G_aa-9.gif WIDTH=16 HEIGHT=16></TD>
</TR>
</TABLE>

Rezultāts:

Kas te tagad izskatīsies?
Kā te tagad veidosies apmales?

Šo tekstu vajadzētu aptvert apmalei, bet dažādi pārlūki saprot dažādi šeit sarakstītās komandas un parametrus.

Cits piemērs:

Kas te tagad izskatīsies?
Kā te tagad veidosies apmales?

Šo tekstu vajadzētu aptvert apmalei, bet dažādi pārlūki saprot dažādi šeit sarakstītās komandas un parametrus.

Šīs apmales ir pārbaudītas un ir pareizi redzamas ar Mozilla 1.7.11, Midori 0.2.9. The Off By One Web Browser 3.5a nerāda iekšējo laukumu.

Šīs apmales ir pārbaudītas un nav pareizi redzamas ar Opera 8.02, Opera 6.05, Netscape Communicator 4.8, Internet Explorer 5.5, Netscape Navigator 4.08, Mozilla SeaMonkey 2.0.14, Mozilla Firefox 3.6.24, Opera 11.51, Konqueror 4.6.5.

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

Stūri likti ar <IMG SRC=...>, pārējais ar <TD BACKGROUND=...>

Teksts ar komandām (piemērā izmantotais teksts ievietots ar SSI komandu):

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR HEIGHT=16>
	<TD WIDTH=16><IMG SRC=/atteli/apmales/kopas/G_aa/G_aa-1.gif WIDTH=16 HEIGHT=16></TD>
	<TD BACKGROUND=/atteli/apmales/kopas/G_aa/G_aa-2.gif></TD>
	<TD WIDTH=16><IMG SRC=/atteli/apmales/kopas/G_aa/G_aa-3.gif WIDTH=16 HEIGHT=16></TD>
</TR>
<TR>
	<TD WIDTH=16 BACKGROUND=/atteli/apmales/kopas/G_aa/G_aa-4.gif></TD>
	<TD BACKGROUND=/atteli/apmales/kopas/G_aa/G_aa-5.gif><!--#echo encoding="none" var="teksts" --></TD>
	<TD WIDTH=16 BACKGROUND=/atteli/apmales/kopas/G_aa/G_aa-6.gif></TD>
</TR>
<TR HEIGHT=16>
	<TD WIDTH=16><IMG SRC=/atteli/apmales/kopas/G_aa/G_aa-7.gif WIDTH=16 HEIGHT=16></TD>
	<TD BACKGROUND=/atteli/apmales/kopas/G_aa/G_aa-8.gif></TD>
	<TD WIDTH=16><IMG SRC=/atteli/apmales/kopas/G_aa/G_aa-9.gif WIDTH=16 HEIGHT=16></TD>
</TR>
</TABLE>

Rezultāts:

Kas te tagad izskatīsies?
Kā te tagad veidosies apmales?

Šo tekstu vajadzētu aptvert apmalei, bet dažādi pārlūki saprot dažādi šeit sarakstītās komandas un parametrus.

Cits piemērs:

Kas te tagad izskatīsies?
Kā te tagad veidosies apmales?

Šo tekstu vajadzētu aptvert apmalei, bet dažādi pārlūki saprot dažādi šeit sarakstītās komandas un parametrus.

Šīs apmales ir pārbaudītas un ir pareizi redzamas ar lielāko daļu pārlūku.

Šīs apmales ir pārbaudītas un nav pareizi redzamas ar The Off By One Web Browser 3.5a, Netscape Communicator 4.8, Netscape Navigator 4.08. Šie pārlūki rāda tikai stūra attēlus, jo tie nesaprot parametru, kas nosaka attēlu tabulas šūnas pamatnei.

Iespējams, ka šis ir labākais risinājums, jo jaunie pārlūki to rāda pareizi, bet vecāki pārlūki apmali vismaz apzīmē ar attēliņiem stūros.

Atšķirībā no iepriekšējā varianta, šeit rāmju malas tiek veidotas atkārtojot attecīgo attēlu, nevis to izstiepjot.

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

Apmales veidotas ar <TD BACKGROUND=...>

Teksts ar komandām (piemērā izmantotais teksts ievietots ar SSI komandu):

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR HEIGHT=16>
	<TD WIDTH=16 BACKGROUND=/atteli/apmales/kopas/G_aa/G_aa-1.gif></TD>
	<TD BACKGROUND=/atteli/apmales/kopas/G_aa/G_aa-2.gif></TD>
	<TD WIDTH=16 BACKGROUND=/atteli/apmales/kopas/G_aa/G_aa-3.gif></TD>
</TR>
<TR>
	<TD WIDTH=16 BACKGROUND=/atteli/apmales/kopas/G_aa/G_aa-4.gif></TD>
	<TD BACKGROUND=/atteli/apmales/kopas/G_aa/G_aa-5.gif><!--#echo encoding="none" var="teksts" --></TD>
	<TD WIDTH=16 BACKGROUND=/atteli/apmales/kopas/G_aa/G_aa-6.gif></TD>
</TR>
<TR HEIGHT=16>
	<TD WIDTH=16 BACKGROUND=/atteli/apmales/kopas/G_aa/G_aa-7.gif></TD>
	<TD BACKGROUND=/atteli/apmales/kopas/G_aa/G_aa-8.gif></TD>
	<TD WIDTH=16 BACKGROUND=/atteli/apmales/kopas/G_aa/G_aa-9.gif></TD>
</TR>
</TABLE>

Rezultāts:

Kas te tagad izskatīsies?
Kā te tagad veidosies apmales?

Šo tekstu vajadzētu aptvert apmalei, bet dažādi pārlūki saprot dažādi šeit sarakstītās komandas un parametrus.

Cits piemērs:

Kas te tagad izskatīsies?
Kā te tagad veidosies apmales?

Šo tekstu vajadzētu aptvert apmalei, bet dažādi pārlūki saprot dažādi šeit sarakstītās komandas un parametrus.

Šīs apmales ir pārbaudītas un ir pareizi redzamas ar lielāko daļu pārlūku.

Šīs apmales ir pārbaudītas un nav pareizi redzamas ar The Off By One Web Browser 3.5a, Netscape Communicator 4.8, Netscape Navigator 4.08. Šie pārlūki nav pat atstājuši vietu apmalei, jo tie nesaprot parametru, kas nosaka attēlu tabulas šūnas pamatnei, kā arī neievēro aiļu platumus un rindu augstumus.

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

priede.bf.lu.lv Bioloģijas fakultāte Datorklase Sākumlapa
Pamatlapa BF Datorklase Sākums
Lappusi
«tabulas_izm.shtml»
veidoja
karlo@lanet.lv
2014.08.20-14:27
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ā.