Kiel fari TTT-pagxojn

Tabeloj

En tiu cxi leciono vi lernos, kiel oni faras tabelojn en XHTML. La tabelaj elementoj de XHTML estas por prezentado de tabelecaj datumoj. Tio estas datumoj, kiuj havas diversajn logikajn interrilatojn prezenteblajn per arangxado laux kolumnoj kaj vicoj. Tiaj datumoj estas ekz. statistiko, adresaroj k.s.

Bedauxrinde XHTML-aj tabeloj estas tre ofte misuzataj por krei grafikajn arangxojn de pagxoj. Ne imitu tion! Uzu por grafika arangxado nur stilfoliojn.

Ne cxiuj ebloj kaj komplikajxoj de tabeloj estos cxi tie klarigitaj.

Noto: Pluraj el la ekzemploj en tiu cxi leciono estas pruntitaj de TTT-pagxo verkita de Jukka KORPELA. Mi tamen reverkis la ekzemplojn laux XHTML 1.0 (anstataux HTML 3.2), kaj tradukis ilin en Esperanton. La pagxoj de Jukka pri TTT-verkado (en la Angla kaj en la Finna) estas cetere tre legindaj.

Baza tabelo

Jen la bazaj tabelelementoj:

  • table = tabelo
  • caption = tabeltitolo
  • tbody = tabelkorpo
  • tr = tabelvico
  • th = titola tabelcxelo
  • td = datuma tabelcxelo

Jen ekstreme simpla tabelkodo:

<table>
  <tbody>
    <tr><td>A</td><td>B</td></tr>
    <tr><td>C</td><td>CX</td></tr>
  </tbody>
</table>

Kaj jen kiel prezentigxas tiu kodo en via TTT-legilo:

A B
C CX

Per tr-elementoj oni do kreas vicojn, kaj ene de tiuj vicoj estas tabelcxeloj: td-elementoj. La unua cxelo de la unua vico, kaj la unua cxelo de la dua vico, kune formas kolumnon (A kaj C). Same la dua cxelo de la unua vico, kaj la dua cxelo de la dua vico, formas alian kolumnon (B kaj CX).

Jen pli komplika kaj pli realisma tabelo, kiu uzas iom pli da elementoj:

Kelkaj landoj
Lando Cxefurbo Lingvo
Svedujo Stokholmo la Sveda
Germanujo Berlino la Germana
Algxerio Algxero la Araba
Meksiko Meksikurbo la Hispana

En tiu tabelo estas la jenaj partoj:

  • tabeltitolo: “Kelkaj landoj”
  • tri kolumnoj
  • kvin vicoj
  • tri titolaj tabelcxeloj, po unu en cxiu kolumno
  • dek du datumaj tabelcxeloj, po tri en cxiu vico; po kvar en cxiu kolumno

Jen la XHTML-kodo por konstrui tiun tabelon:

<table border="1">
  <caption>Kelkaj landoj</caption>
  <tbody>
    <tr>
      <th>Lando</th><th>Cxefurbo</th><th>Lingvo</th>
    </tr>
    <tr>
      <td>Svedujo</td><td>Stokholmo</td><td>la Sveda</td>
    </tr>
    <tr>
      <td>Germanujo</td><td>Berlino</td><td>la Germana</td>
    </tr>
    <tr>
      <td>Algxerio</td><td>Algxero</td><td>la Araba</td>
    </tr>
    <tr>
      <td>Meksiko</td><td>Meksikurbo</td><td>la Hispana</td>
    </tr>
  </tbody>
</table>

La tuta tabelo konsistas el unu table-elemento. Ene de gxi estas unue caption-elemento, kaj poste tbody-elemento. En la tbody estas kvin tr-elementoj (po unu por cxiu vico de la tabelo). Kaj ene de cxiu tr-elemento estas elementoj por tabelcxeloj: th-elementoj por titolaj cxeloj, kaj td-elementoj por datumaj cxeloj.

caption

La elemento caption estas praktike malmulte uzata, sed gxi estas tre utila. Oni rajtas meti caption nur tuj post la malferma table-marko, kaj povas esti nur po unu caption en cxiu tabelo.

Noto: Devus esti eble per stilfolio proponi diversajn prezentomanierojn por caption. Ekzemple caption {caption-side:bottom;} devus kauxzi, ke la tabeltitolo aperas sub la tabelo. Sed bedauxrinde nur malmultaj TTT-legiloj gxuste traktas tion.

tbody

tbody ne estas deviga elemento. Se oni gxin ne uzas, gxi auxtomate subkomprenigxas. Tamen montrigxis, ke iuj novaj TTT-legiloj, en iuj specialaj cirkonstancoj havas problemojn pri tabeloj, en kiujn oni ne enmetis efektivajn markojn por tbody. Tial mi konsilas cxiam uzi tbody, ankaux kiam tio eble sxajnas superflua balasto.

Noto: Krom tbody por tabelkorpo, ekzistas ankaux thead por tabelkapo, kaj tfoot por tabelpiedo. Pere de tiuj elementoj oni povas teorie krei tabelojn, en kiuj kapa kaj pieda partoj cxiam videblas. Tiaj arangxoj povas esti tre oportunaj, precipe por presado de tabeloj surpapere, kiam oni volas ripeti ekzemple titolajn tabelcxelojn sur cxiu pagxo. Sed cxio tia bedauxrinde ankoraux apenaux funkcias en iuj TTT-legiloj. Tial mi ne traktos thead kaj tfoot en tiu cxi leciono.

Tabelaj atributoj

En la dua ekzemplo estas ankaux unu atributo: border="1". Tiu atributo indikas, ke estu bordero cxirkaux cxiu tabelcxelo, kaj ke tiu bordero estu largxa je unu bildero. Iom escepte oni povas indiki tian prezentan detalon rekte en la XHTML-kodo. Oni povas tion fari ankaux per stilfolio, sed kiam temas pri tabeloj, povas esti tre grave, ke bordero estu montrata ankaux kiam la stilfolio forestas (aux kiam la TTT-legilo ignoras la stilfolion). Alie iuj tabeloj povas farigxi nekompreneblaj. Sen la bordero oni eble ne povas bone kompreni la strukturon de kolumnoj kaj vicoj. Gxuste tiu strukturo ja estas la tuta senco de tabelo. Tial estas bone, je bezono, indiki borderon jam en la XHTML-kodo.

Se oni nepre ne volas borderon, oni povas skribi border="0", sed normale suficxas skribi nenion ajn, cxar plej multaj TTT-legiloj montras tian borderon nur se oni tion aparte indikas. Cxiuokaze oni ne povas esti certa, kiel prezentigxas tabelo. Eble iuj legantoj havas propran stilfolion, kiu ensxaltas aux elsxaltas borderojn diversgrandajn kaj diverskolorajn.

Ekzistas ankaux cellspacing-atributo por indiki spacon cxirkaux la tabelcxeloj, ekz. cellspacing="2" (= estu spaco largxa je 2 bilderoj cxiuflanke de cxiu tabelcxelo). Kaj ekzistas cellpadding-atributo por indiki spacon (remburon) ene de la tabelcxeloj, inter la teksto kaj la bordero, ekz. cellpadding="4" (= estu remburo largxa je 4 bilderoj cxiuflanke de la enhavo de tabelcxelo). Ankaux tiuj atributoj povas esti utilaj por igi tabelon komprenebla. Sed normale suficxas uzi border en la XHTML-kodo, dum oni faras aliajn prezentajn aferojn en stilfolio.

Se vi volas, vi povas preni la kodon de la ekzempla tabelo, kaj aldoni al gxi krom border ankaux cellspacing kaj cellpadding, eksperimentante per diversaj largxoj por vidi, kiel tio influas la prezentadon. Cxiuj tri atributoj estu en la malferma marko de la table-elemento. Sciu, ke per stilfolio eblas fari multe pli interesajn aferojn.

Oni ankaux povas uzi width-atributon en la table-elemento. Tia atributo indikas la largxon de tabelo, aux en bilderoj, ekz. width="400", aux per procentajxo, ekz. width="80%" (= okdek procentoj de la largxo de la havebla spaco). Sed preskaux cxiam estas preferinde ne uzi width-atributon, kaj precipe grave estas ne indiki la largxon de tabelo per bilderoj, cxar tio povas krei tro rigidan prezenton, kiu ne adaptigxas al diversaj fenestrograndecoj kaj diversaj tekstograndecoj.

Pli komplikaj tabeloj

Malplenaj cxeloj

Ofte en tabeloj iuj cxeloj estas malplenaj, cxar mankas informo por la koncerna afero. Oni ne rajtas tiam forlasi la tutan tabelcxelon. La kodo por tiu tabelcxelo devas resti por ke la strukturo de kolumnoj kaj vicoj ne disfalu. Principe oni povas tiam simple skribi <td></td> (aux <th></th>), sen enhavo inter la malferma kaj ferma markoj. Sed multaj TTT-legiloj tiam rifuzas aperigi eventualan borderon cxirkaux la cxelo, kaj tio povas aspekti iom strange. Se oni nepre volas, ke tia malplena cxelo aperu kune kun sia bordero, oni povas iom artifiki, kaj skribi en la cxelo spaceton. Sed ne tauxgas simpla ordinara spaceto por tio. Oni devas uzi nerompeblan spaceton (signo numero 160 en Unikodo). La XHTML-a ento (simbola nomo) por tia spaceto estas &nbsp;. Oni do skribu <td>&nbsp;</td> por tia “malplena” tabelcxelo. Tio estas eta artifiko, sed suficxe senkulpa. Jen ekzemplo de tabelo kun malplenaj cxeloj:

La hodiauxaj mezuroj
horo temperaturo premo
10:00 11,00 12,800
11:00 13,50  
12:00 15,00 1,650
13:00 13,30  
13:00   0,002

Kelkaj mezuroj mankas, kaj tial la koncernaj tabelcxeloj estas malplenaj. Jen la XHTML-kodo:

<table border="2" cellspacing="0" cellpadding="2">
<caption>La hodiauxaj mezuroj</caption>
<tbody>
	<tr>
		<th>horo</th>
		<th>temperaturo</th>
		<th>premo</th>
	</tr>
	<tr>
		<td>10:00</td>
		<td>11,00</td>
		<td>12,800</td>
	</tr>
	<tr>
		<td>11:00</td>
		<td>13,50</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>12:00</td>
		<td>15,00</td>
		<td>1,650</td>
	</tr>
	<tr>
		<td>13:00</td>
		<td>13,30</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>13:00</td>
		<td>&nbsp;</td>
		<td>0,002</td>
	</tr>
</tbody>
</table>

Cxeloj plurkolumnaj aux plurvicaj

En la antauxaj ekzemploj cxiu tabelcxelo estas tute bonkonduta, kaj apartenas nur al precize unu kolumno kaj unu vico. Tiel estas en plej multaj simplaj tabeloj. Sed iafoje en pli komplikaj tabeloj povas okazi, ke iuj cxeloj transiras el tiu strikta skemo. Povas okazi, ke unu tabelcxelo etendigxas tra pluraj kolumnoj, aux tra pluraj vicoj, aux ecx ambaux. Por arangxi tiajn tabelojn oni devas uzi la atributojn colspan kaj rowspan:

colspan nombro de kolumnoj, tra kiuj etendigxas la cxelo
rowspan nombro de vicoj, tra kiuj etendigxas la cxelo

Jen ekzemplo de tia tabelo, kiu montras deklinaciajn formojn de Latina vorto:

Deklinacio de is (unu-nombro)
neuxtra vira ina
nominativo id is ea
akuzativo eum eam
genitivo eius
dativo ei
ablativo eo ea

Jen la XHTML-kodo:

<table border="1" style="text-align: center">
<caption>Deklinacio de <em>is</em> (unu-nombro)</caption>
<tbody>
	<tr>
		<th></th>
		<th>neuxtra</th>
		<th>vira</th>
		<th>ina</th>
	</tr>
	<tr>
		<th>nominativo</th>
		<td rowspan="2">id</td>
		<td>is</td>
		<td>ea</td>
	</tr>
	<tr>
		<th>akuzativo</th>
		<td>eum</td>
		<td>eam</td>
	</tr>
	<tr>
		<th>genitivo</th>
		<td colspan="3">eius</td>
	</tr>
	<tr>
		<th>dativo</th>
		<td colspan="3">ei</td>
	</tr>
	<tr>
		<th>ablativo</th>
		<td colspan="2">eo</td>
		<td>ea</td>
	</tr>
</tbody>
</table>

La strukturo de tiaj tabeloj povas esti iom kaporompa, kaj kiam oni ilin kreas, povas esti oportune unue desegni la tabelon surpapere, kaj tiam zorge elkalkuli la bezonatajn valorojn de colspan kaj rowspan. Pacienco kaj zorgemo necesas por ne fusxi. Studu zorge la cxi-antauxan ekzemplon por kompreni, kiel cxio interrilatas.

Rimarku, ke en tiu ekzemplo mi aldonis iom da stilfolia kodo rekte en la XHTML-kodo per la atributo style. Normale oni metu tiajn aferojn en apartajn CSS-dosierojn, uzante ekz. class-atributon aux id-atributon por ligi la bezonatajn stildeklarojn al la tabelo. Sed cxi-foje mi faris escepton por montri al vi, kiel oni povas okaze enmeti tiajn aferojn rekte en la XHTML-kodon. La indikita stilo simple centrigas la tekston en cxiu cxelo de la tabelo.

Facile kompreneblaj tabeloj

Komplikaj tabeloj povas esti malfacile kompreneblaj, precipe por homoj, kiuj ne povas vidi la tabelon. Iuj homoj pro neceso, aux pro elekto, retumas per ekz. vocxlegaj programoj, kiuj nur pene povas prezenti kompleksan tabelon. Por helpi faciligi la komprenadon kaj legadon de tabeloj ekzistas kelkaj aldonaj rimedoj en XHTML:

summary atributo, kiu donas klarigan resumon de la enhavo de tabelo
scope atributo de titolaj cxeloj; gxi montras, al kiuj datumaj cxeloj rilatas la titola cxelo
headers atributo de datumaj cxeloj; gxi montras, kiu(j) titolcxelo(j) validas por la datuma cxelo

summary

Gxenerale oni cxiam aldonu summary al cxiu tabelo, krom eble la plej simplaj. Tio povas aspekti ekzemple jene:

<table border="1"
  summary="La tabelo montras kelkajn landojn kun nomo de
  la cxefurbo kaj de la cxefa lingvo.">
  <caption>Kelkaj landoj</caption>
  <tbody>
    <tr>
      <th>Lando</th><th>Cxefurbo</th><th>Lingvo</th>
    </tr>
    <tr>
      <td>Svedujo</td><td>Stokholmo</td><td>la Sveda</td>
    </tr>
    <tr>
      <td>Germanujo</td><td>Berlino</td><td>la Germana</td>
    </tr>
    <tr>
      <td>Algxerio</td><td>Algxero</td><td>la Araba</td>
    </tr>
    <tr>
      <td>Meksiko</td><td>Meksikurbo</td><td>la Hispana</td>
    </tr>
  </tbody>
</table>

Ankaux povas esti, ke sercxrobotoj iam atentos (aux eble jam atentas) tiajn resumojn en summary-atributoj, kaj aldonas tiujn informojn al siaj indeksoj de la Reto.

scope

Per scope oni povas indiki cxe titola cxelo, cxu gxi rilatas al la kolumno, aux al la vico, en kiu gxi trovigxas:

<th scope="col">...</th> th-elemento, kiu estas titolo de la aktuala kolumno
<th scope="row">...</th> th-elemento, kiu estas titolo de la aktuala vico

Jen la antauxa tabelo de Latina deklinacio kun aldonaj klarigaj scope-atributoj:

<table border="1" style="text-align: center">
<caption>Deklinacio de <em>is</em> (unu-nombro)</caption>
<tbody>
	<tr>
		<th></th>
		<th scope="col">neuxtra</th>
		<th scope="col">vira</th>
		<th scope="col">ina</th>
	</tr>
	<tr>
		<th scope="row">nominativo</th>
		<td rowspan="2">id</td>
		<td>is</td>
		<td>ea</td>
	</tr>
	<tr>
		<th scope="row">akuzativo</th>
		<td>eum</td>
		<td>eam</td>
	</tr>
	<tr>
		<th scope="row">genitivo</th>
		<td colspan="3">eius</td>
	</tr>
	<tr>
		<th scope="row">dativo</th>
		<td colspan="3">ei</td>
	</tr>
	<tr>
		<th scope="row">ablativo</th>
		<td colspan="2">eo</td>
		<td>ea</td>
	</tr>
</tbody>
</table>

Por uzanto de vocxlega TTT-legilo tiaj aldonaj scope-atributoj, povas esti absolute necesaj por povi decxifri la sencon de tia tabelo. Mi ne scias, cxu vere ekzistas nun tiaj vocxlegiloj, kiuj atentas pri scope-atributoj, kaj iel vocxe indikas la sencon de la th-elementoj, sed ni ja ne verkas TTT-pagxojn nur por la nuno. Ni verkas pagxojn ankaux por la estonteco.

Efektive jam nun eblas en ordinaraj TTT-legiloj utiligi scope-atributojn. Oni povas per stilfolio indiki diversajn prezentojn por th-elementoj kun scope="col", kaj alian por th-elementoj kun scope="row", ekzemple jene:

th[scope=col] {
	color: red;
	background-color: black;
}
th[scope=row] {
	color: black;
	background-color: red;
}

Tiu CSS-kodo donas ekzemplon de peratributaj elektiloj. Tia kodo funkcias nur en la plej modernaj kaj plej bonaj TTT-legiloj. En ekz. “Explorer 4/5/6” ili tute ne funkcias.

headers

En tre kompleksaj tabeloj la atributo row eble ne suficxas por indiki la rilatojn inter titolaj kaj datumaj tabelcxeloj. Tiam oni povas anstatauxe (aux kompletige) uzi la atributon headers, kiu estas multe pli preciza. Per gxi oni povas en datuma cxelo doni liston de titolaj cxeloj, kiuj validas por gxuste tiu cxelo. En tian liston oni metas la id-nomojn de la koncernaj titolaj cxeloj (kun spacetoj inter la nomoj). Kompreneble cxiu titola cxelo tiam devas havi id-atributon por ke tio funkciu. Jen ekzemplo:

Raporto pri vojagxkostoj
mangxoj hoteloj transportado subsumoj
San Jose
25 Auxg 1997 37,74 112,00 45,00
26 Auxg 1997 27,28 112,00 45,00
subsumoj 65,02 224,00 90,00 379,02
Seattle
27 Auxg 1997 96,25 109,00 36,00
28 Auxg 1997 35,00 109,00 36,00
subsumoj 131,25 218,00 72,00 421,25
sumoj 196,27 442,00 162,00 800,27

Jen la XHTML-kodo:

<table border="1"
  summary="La tabelo montras la vojagxkostojn
  de la vojagxoj en Auxgusto al San Jose kaj Seattle">
<caption>Raporto pri vojagxkostoj</caption>
<tbody>
  <tr>
    <th></th>
    <th id="a2">mangxoj</th>
    <th id="a3">hoteloj</th>
    <th id="a4">transportado</th>
    <td>subsumoj</td>
  </tr>
  <tr>
    <th id="a6">San Jose</th>
    <th></th>
    <th></th>
    <th></th>
    <td></td>
  </tr>
  <tr>
    <td id="a7">25 Auxg 1997</td>
    <td headers="a6 a7 a2">37,74</td>
    <td headers="a6 a7 a3">112,00</td>
    <td headers="a6 a7 a4">45,00</td>
    <td></td>
  </tr>
  <tr>
    <td id="a8">26 Auxg 1997</td>
    <td headers="a6 a8 a2">27,28</td>
    <td headers="a6 a8 a3">112,00</td>
    <td headers="a6 a8 a4">45,00</td>
    <td></td>
  </tr>
  <tr>
    <td>subsumoj</td>
    <td>65,02</td>
    <td>224,00</td>
    <td>90,00</td>
    <td>379,02</td>
  </tr>
  <tr>
    <th id="a10">Seattle</th>
    <th></th>
    <th></th>
    <th></th>
    <td></td>
  </tr>
  <tr>
    <td id="a11">27 Auxg 1997</td>
    <td headers="a10 a11 a2">96,25</td>
    <td headers="a10 a11 a3">109,00</td>
    <td headers="a10 a11 a4">36,00</td>
    <td></td>
  </tr>
  <tr>
    <td id="a12">28 Auxg 1997</td>
    <td headers="a10 a12 a2">35,00</td>
    <td headers="a10 a12 a3">109,00</td>
    <td headers="a10 a12 a4">36,00</td>
    <td></td>
  </tr>
  <tr>
    <td>subsumoj</td>
    <td>131,25</td>
    <td>218,00</td>
    <td>72,00</td>
    <td>421,25</td>
  </tr>
  <tr>
    <th>sumoj</th>
    <td>196,27</td>
    <td>442,00</td>
    <td>162,00</td>
    <td>800,27</td>
  </tr>
</tbody>
</table>

Noto: La cxi-antauxa ekzemplo estas pruntita el la normo-teksto de HTML 4.01. La tiea versio de la kodo estas iom pli komplika, cxar oni uzis aldone ankaux la atributon axis, per kiu eblas meti cxelojn en diversajn kategoriojn. Tio povas ebligi diversajn analizojn kaj raportojn bazitajn sur la informoj de tabelo. Se vi interesigxas pri tiu profunda temo, vi povas studi la originan ekzemplon (kiu tamen estas verkita en HTML 4.01, ne en XHTML).

Bildoj en tabelcxeloj

Tre ofte oni metas bildojn en tabelcxeloj. Ofte temas tiam pri misuzado de tabeloj por grafika arangxo, sed ne cxiam. Ja ankaux bildo povas esti parto de datumoj, kiuj estas tute tabelecaj. Oni povas ekzemple havi bildojn kun ties nomoj kaj aliaj informoj en tabelo.

Principe estas nenia problemo meti bildojn en tabelon. Jen simpla ekzemplo:

Miaj fotoj
foto priskribo dato
Mia hejmbesteto estas verda mia hejmbesteto 1 Januaro 2003
Mia hejmo estas tre komforta mia hejmo 5 Januaro 2003
Mi estas iom timema mia portreto 6 Julio 2002

Jen la XHTML-kodo:

<table border="1" cellpadding="0" cellspacing="0">
<caption>Miaj fotoj</caption>
<tbody>
  <tr>
    <th>foto</th>
    <th>priskribo</th>
    <th>dato</th>
  </tr>
  <tr>
    <td><img src="bildoj/aligatoro.jpg" alt="Mia hejmbesteto estas verda" /></td>
    <td>mia hejmbesteto</td>
    <td>1 Januaro 2003</td>
  </tr>
  <tr>
    <td><img src="bildoj/hejmo.jpg" alt="Mia hejmo estas tre komforta" /></td>
    <td>mia hejmo</td>
    <td>5 Januaro 2003</td>
  </tr>
  <tr>
    <td><img src="bildoj/portreto.jpg" alt="Mi estas iom timema" /></td>
    <td>mia portreto</td>
    <td>6 Julio 2002</td>
  </tr>
</tbody>
</table>

img-elemento do povas aperi rekte en td-elemento, same kiel teksto. Nenia problemo...

Tamen, se vi uzas ekz. Fajrovulpon por legi tiujn cxi pagxojn, vi eble jam notis problemeton: Sub cxiu el la bildoj, Fajrovulpo lasas iom da spaco, kio aspektas iom strange. Multaj pensas, ke tio estas eraro en Fajrovulpo, sed fakte ne. Efektive Fajrovulpo agas tute gxuste. img-elementoj estas kvazaux teksto, kaj se oni ne aparte indikas alian prezenton, bildoj aperas sur la bazlinio de la teksto. Tekstolinioj cxiam havas iom da spaco sub la bazlinio, por ke la vostoj de literoj povu aperi. Kaj gxuste tiun spacon oni vidas en Fajrovulpo sub cxiu bildo en la cxi-antauxa tabelo. Ja mankas vera teksto en tiuj tabelcxeloj, sed tio ne gravas. Cxiu bildo aperas sur la sama nivelo, sur kiu aperus teksto, se estus teksto en la cxelo.

Nu, kion do fari, se oni nepre ne volas tian spacon? La respondo, kiel cxiam, estas stilfolio. Normale img estas nebloka elemento (inline), kio signifas, ke gxi estas kvazaux teksto. Per stilfolio oni povas tamen proponi, ke iuj img-elementoj anstatauxe prezentigxu kiel blokaj elementoj (block), kio signifas, ke la bildo ne plu prezentigxas flue kun la teksto, sed memstare.

Por fari ton, oni metu en stilfolion ekzemple la jenon:

td img {display: block;}

Provu tion. Faru XHTML-pagxon el la cxi-antauxa ekzemplo, kaj aldonu ligon al stilfolia dosiero. En tiu dosiero skribu la cxi-antauxan regulon pri td img (bildoj en datumaj tabelcxeloj). Se vi uzas Fajrovulpon, aux alian parencan TTT-legilon, vi povas vidi, ke la bildoj tiam prezentigxas sen la gxena suba spaco. Memoru, ke vi tiam devas konservi miajn ekzemplobildojn en loko, kie vi povas uzi ilin en via testopagxo, kaj eble reskribi la bildadresojn lauxe. Aux vi povas skribi absolutajn href-adresojn al miaj bildoj en mia servilo (bona ekzerco...).

Noto: Efektive la CSS-guruoj inter si iom kverelis pri tio, cxu Fajrovulpo vere agas gxuste cxi-okaze. La CSS-normo estas eventuale interpretebla en pli ol unu maniero cxi-punkte. Multaj aliaj legiloj, ekz. “Esplorilo”, ne lasas tian spacon, se bildo estas sola en tabelcxelo, sed vere (aux almenaux laux tiuj, kiuj programis Fajrovulpon) tiuj malnovaj legiloj agas malgxuste, kontraux la CSS-normo.

Noto: La CSS-eco display povas havi precipe la jenajn valorojn: inline, block kaj none. La du unuajn ni jam tusxis. La tria, none, signifas, ke la afero tute ne aperu. Tio povas foje esti utila. Ekzemple oni povas skribi apartan stilfolion por presado sur papero, kaj en gxi elekti kasxi iujn aferojn, kiuj ne estas bezonataj en papera prezento (ekz. aron da ligiloj, kiuj nur gxenas surpapere, cxar ili cxiuokaze ne funkcias tiam). display povas havi ankaux aliajn specialajn valorojn, kiuj tamen ankoraux apenaux funkcias en iuj TTT-legiloj.

Alia solvo estas la jena stilregulo, kiu kauxzas, ke bildoj en datumaj tabelcxeloj aligxas al la subo de la spaco por teksto (anstataux al la bazlinio de la teksto):

td img {vertical-align: bottom;}

Cxio cxi denove montras, ke tre indas testi siajn TTT-pagxojn en diversaj TTT-legiloj.

Al la sekva leciono