wZine

Tabulomānija II
26 May 1999 by Laacz

   Es ceru, ka zini visu to, kas ir aprakstīts iekš Tabulomānijas. Ja jā, tad vari ielūkoties šeitan un dažādus paņēmienus dažādiem navarotiem pastīties.

   Pirmais, ko tev pastāstīšu, mans mazais draugs, ir tas, ka tabulas ir viens no galvenajiem tūļiem (tools - cirvis, āmurs, plaķenes, ...), kuri palīdzēs tev darīties ar lapas saturu diezgan brīvi.

Tabulai smuks borderis

  1. cells     2. cells  
  3. cells     4. cells  

   Tā tas izskatās. Kā zināms, šāds htmls:

<table border=1 bordercolor=#000000><br>
  <tr><td>1. cells</td><td>2. cells</td></tr>
  <tr><td>3. cells</td><td>4. cells</td></tr>
</table>

   izskatīsies dažādi iekš netskeipa un explorera un nebūt ne ar vienu pixeli plānu borderu :

1. cells2. cells
3. cells4. cells

   Ir viens (īstenībā vairāki :) workarounds (apkārtceļš, izvairīšanās, čerez-žopu, ...). Var uzlikt tabulai pašai backgroundu kā melnu, bet katram cellam (pietiek, ja katram rowam - tr) uzlikt background citu:

<table cellspacing=1 border=0 bgcolor=#000000>
<tr bgcolor=#ffffe9>
  <td>1. cells</td><td>2. cells</td>
</tr><tr bgcolor=#ffffe9>
  <td>3. cells</td><td>4. cells</td>
</tr>
</table>

1. cells2. cells
3. cells4. cells

   Bet netskeipā tu neredzēsi maliņas smukās melnās ideālās. Nu tad darām tā, ka ieliekam mums nepieciešamo tabulu iekš citas tabulas, kurai fons ir melns.:

<table border=0 cellspacing=0 cellpadding=0 align=center bgcolor=#000000>
<tr><td>

<table align=center cellspacing=1 border=0>
<tr bgcolor=#ffffe9>
  <td>1. cells</td><td>2. cells</td>
</tr><tr bgcolor=#ffffe9>
  <td>3. cells</td><td>4. cells</td>
</tr>
</table>

</td></tr>
</table>

1. cells2. cells
3. cells4. cells

   Te parādās viens netskeipa pluss/mīnuss. Lai tev kaut ko pareizi rādītu, nodefinē visu perfekti. Pamēģini nielikt border=0. Labo un apakšējo malu tev neredzēt.

Paātrināt lapas ielādēšanos

   Ir novērots, ka pārsvarā visās lapās, kurās ir lielas tabulas, jāgaida vesela mūžība, līdz tas viss parādās uz ekrāna. To var risināt. Pirmām kārtām - visām izmantojamajām bildēm liec width=... height=... parametrus, savādāk browseris nazin cik tā ir liela un nevar attēlot tabulu.

   Vari izmantot vēl CSS2 propertiju, kurš gan ir implementēts tikai iekš MSIE5+, rakstot apmēram šādi: <table style="table-layout: fixed;". Šādā gadījumā tev ir jānorāda pēc iespējas precīzāk kolonnu, rindu un cellu platums. Browseris ņems pēc kārtas visas rindas un zīmēs tās, attēlojot tās tādā platumā, kā esi noteicis. Plus vēl, ja tomēr kāda no nākošajām rindām ir platāka, MSIE provēs no sākuma aplauzt cellu saturu (to wrap), ja neizdosies, tad vienkārši apgriezīs. Ja platums ir definēts tikai tabulai, exploreris sadalīs tabulas rindu vienādās daļās un bāzīs visu iekšā tur. Šajos gadījumos ērti ir izmantot CSS overflow propertiju

   Mazliet vienkāršāka metode ir sadalīt vienu tabulu vairākās pēc kārtas nākošās. Tad viņš (browseris) zīmēs pirmo tabulu, tad otro, tad trešo utt. Skatīt to var wZines sākumlapā.

Obķekajemajas formas :)

   Mazs uzdevumiņš/izklaide/uzbrauciens:

See the gun
pick it up
all day you will
have good luck
See the gun
pick it up
all day you will
have good luck
Viss ir labs, kas labi beidzās. Viss ir labs, kas labi beidzās. Viss ir labs, kas labi beidzās. Viss ir labs, kas labi beidzās. Viss ir labs, kas labi beidzās. Viss ir labs, kas labi beidzās. Viss ir labs, kas labi beidzās. Viss ir labs, kas labi beidzās. Viss ir labs, kas labi beidzās. Viss ir labs, kas labi beidzās. Viss ir labs, kas labi beidzās. Viss ir labs, kas labi beidzās. Viss ir labs, kas labi beidzās. Viss ir labs, kas labi beidzās. Viss ir labs, kas labi beidzās. Viss ir labs, kas labi beidzās. Viss ir labs, kas labi beidzās. Viss ir labs, kas labi beidzās. Viss ir labs, kas labi beidzās.

Pozicionēšana pa visu lapu

   Tabulas var izmantot (un to dara) lai novietotu kaut kādu textu, bildi, pofig ko lapas malaas/stūros. Tas notiek tikai ievietojot vienā sekojošajā tabulā ar width=100% height=100% ar 3x3 celliem:

<table width=100% height=100%>
<tr valign=top>
  <td>Kreisais augšējais stūris</td>
  <td align=center width=100%>Augšējais vidējais stūris :)</td>
  <td>Labais augšējais stūris</td>
</tr><tr height=100% valign=center>
  <td>Kreisā mala</td>
  <td align=center>Viducis</td>
  <td>Labā mala</td>
</tr><tr valign=bottom>
  <td>Kreisais apakšējais stūris</td>
  <td align=center>Apakšējais vidējais stūris :)</td>
  <td>Labais apakšējais stūris</td>
</tr>
</table>

piemērs dabā

   Un tagad pievērsīsim mazliet uzmanību detaļām. width=100% un height=100%. Tas, ceru, ka ir saprotams. valign=top|middle|bottom ir ielikts iekš tr taga, lai nebūtu jāraksta iekš katra td. Vidējais cells pirmajā rindā ir definēts tik plats, cik tam ļauj apkārtesošie celli, to biš - width=100%. Pārējām rindām tas nav jāpārdefinē, jo browseris, ja nav definētas dimensijas, vadās pēc noklusējuma, aizpildījuma vai arī jau definētā. Tas pats ir ar otro rindu (<tr height=100%...>). Katrs vidējais savu tekstu iecentrē pa vidu. Tas arī laikam nav jāpaskaidro. Šāda risinājuma kaifs ir tas, ka resaizojot lapu tā paliek normāla, kamēr viss tabulas saturs, maximāli saspiests, vēl salien uz lapas.



Banneru sistēma BBA
Banneru sistēma BBA