Tabulas

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

Vienkārša tabula

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

• <TABLE> – pati tabula;
• <TR> – tabulas rinda;
• <TD> – tabulas šūna;

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:

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 ( ). 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:

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:

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:

Atstarpes starp tabulas elementiem

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:

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:

Šū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:

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:

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:

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:

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>

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>

Paraugs tabulu izmantošanai

• Tabulu izmantošana objektu izkārtošanai lapā.
  • Dokumenta saturs kā teksta fails
  • Rezultāts. Tas, kas redzams, ir atkarīgs no Tavas tīmekļa pārlūkprogrammas.
  • Lapas izskats, ja netiek izmantoti stili
• Tabulu izmantošana lapas sadalīšanai.
  • Dokumenta saturs kā teksta fails
  • Rezultāts. Tas, kas redzams, ir atkarīgs no Tavas tīmekļa pārlūkprogrammas.
• Ar stiliem un tabulu veidota shēma
  • Stilu aprakstu dokuments („shemas.css”)
  • Dokumenta saturs kā teksta fails
  • Rezultāts. Tas, kas redzams, ir atkarīgs no Tavas tīmekļa pārlūkprogrammas.
• No maziem gabaliņiem sastāvoša attēla ievietošana lapā izmantojot tabulu
  • Rezultāts. Tas, kas redzams, ir atkarīgs no Tavas tīmekļa pārlūkprogrammas.
• Tabulu izmantošana lapu noformēšanā

Pamatlapa BF Datorklase Sākums	Lappusi «tabulas.shtml» veidoja karlo@lanet.lv 2019.09.16-23:35