Kiel fari TTT-paĝojn

Tabeloj

En tiu ĉi 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 aranĝado laŭ kolumnoj kaj vicoj. Tiaj datumoj estas ekz. statistiko, adresaroj k.s.

Bedaŭrinde XHTML-aj tabeloj estas tre ofte misuzataj por krei grafikajn aranĝojn de paĝoj. Ne imitu tion! Uzu por grafika aranĝado nur stilfoliojn.

Ne ĉiuj ebloj kaj komplikaĵoj de tabeloj estos ĉi tie klarigitaj.

Noto: Pluraj el la ekzemploj en tiu ĉi leciono estas pruntitaj de TTT-paĝo verkita de Jukka KORPELA. Mi tamen reverkis la ekzemplojn laŭ XHTML 1.0 (anstataŭ HTML 3.2), kaj tradukis ilin en Esperanton. La paĝoj 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 tabelĉelo
  • td = datuma tabelĉelo

Jen ekstreme simpla tabelkodo:

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

Kaj jen kiel prezentiĝas tiu kodo en via TTT-legilo:

AB
CĈ

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

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

Kelkaj landoj
LandoĈefurboLingvo
SvedujoStokholmola Sveda
GermanujoBerlinola Germana
AlĝerioAlĝerola Araba
MeksikoMeksikurbola Hispana

En tiu tabelo estas la jenaj partoj:

  • tabeltitolo: “Kelkaj landoj”
  • tri kolumnoj
  • kvin vicoj
  • tri titolaj tabelĉeloj, po unu en ĉiu kolumno
  • dek du datumaj tabelĉeloj, po tri en ĉiu vico; po kvar en ĉiu kolumno

Jen la XHTML-kodo por konstrui tiun tabelon:

<table border="1">
  <caption>Kelkaj landoj</caption>
  <tbody>
    <tr>
      <th>Lando</th><th>Ĉefurbo</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>Alĝerio</td><td>Alĝero</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 ĝi estas unue caption-elemento, kaj poste tbody-elemento. En la tbody estas kvin tr-elementoj (po unu por ĉiu vico de la tabelo). Kaj ene de ĉiu tr-elemento estas elementoj por tabelĉeloj: th-elementoj por titolaj ĉeloj, kaj td-elementoj por datumaj ĉeloj.

caption

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

Noto: Devus esti eble per stilfolio proponi diversajn prezentomanierojn por caption. Ekzemple caption {caption-side:bottom;} devus kaŭzi, ke la tabeltitolo aperas sub la tabelo. Sed bedaŭrinde nur malmultaj TTT-legiloj ĝuste traktas tion.

tbody

tbody ne estas deviga elemento. Se oni ĝin ne uzas, ĝi aŭtomate subkompreniĝas. Tamen montriĝis, 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 ĉiam uzi tbody, ankaŭ kiam tio eble ŝajnas superflua balasto.

Noto: Krom tbody por tabelkorpo, ekzistas ankaŭ thead por tabelkapo, kaj tfoot por tabelpiedo. Pere de tiuj elementoj oni povas teorie krei tabelojn, en kiuj kapa kaj pieda partoj ĉiam videblas. Tiaj aranĝoj povas esti tre oportunaj, precipe por presado de tabeloj surpapere, kiam oni volas ripeti ekzemple titolajn tabelĉelojn sur ĉiu paĝo. Sed ĉio tia bedaŭrinde ankoraŭ apenaŭ funkcias en iuj TTT-legiloj. Tial mi ne traktos thead kaj tfoot en tiu ĉi leciono.

Tabelaj atributoj

En la dua ekzemplo estas ankaŭ unu atributo: border="1". Tiu atributo indikas, ke estu bordero ĉirkaŭ ĉiu tabelĉelo, kaj ke tiu bordero estu larĝa je unu bildero. Iom escepte oni povas indiki tian prezentan detalon rekte en la XHTML-kodo. Oni povas tion fari ankaŭ per stilfolio, sed kiam temas pri tabeloj, povas esti tre grave, ke bordero estu montrata ankaŭ kiam la stilfolio forestas (aŭ kiam la TTT-legilo ignoras la stilfolion). Alie iuj tabeloj povas fariĝi nekompreneblaj. Sen la bordero oni eble ne povas bone kompreni la strukturon de kolumnoj kaj vicoj. Ĝuste 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 sufiĉas skribi nenion ajn, ĉar plej multaj TTT-legiloj montras tian borderon nur se oni tion aparte indikas. Ĉiuokaze oni ne povas esti certa, kiel prezentiĝas tabelo. Eble iuj legantoj havas propran stilfolion, kiu enŝaltas aŭ elŝaltas borderojn diversgrandajn kaj diverskolorajn.

Ekzistas ankaŭ cellspacing-atributo por indiki spacon ĉirkaŭ la tabelĉeloj, ekz. cellspacing="2" (= estu spaco larĝa je 2 bilderoj ĉiuflanke de ĉiu tabelĉelo). Kaj ekzistas cellpadding-atributo por indiki spacon (remburon) ene de la tabelĉeloj, inter la teksto kaj la bordero, ekz. cellpadding="4" (= estu remburo larĝa je 4 bilderoj ĉiuflanke de la enhavo de tabelĉelo). Ankaŭ tiuj atributoj povas esti utilaj por igi tabelon komprenebla. Sed normale sufiĉas 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 ĝi krom border ankaŭ cellspacing kaj cellpadding, eksperimentante per diversaj larĝoj por vidi, kiel tio influas la prezentadon. Ĉiuj tri atributoj estu en la malferma marko de la table-elemento. Sciu, ke per stilfolio eblas fari multe pli interesajn aferojn.

Oni ankaŭ povas uzi width-atributon en la table-elemento. Tia atributo indikas la larĝon de tabelo, aŭ en bilderoj, ekz. width="400", aŭ per procentaĵo, ekz. width="80%" (= okdek procentoj de la larĝo de la havebla spaco). Sed preskaŭ ĉiam estas preferinde ne uzi width-atributon, kaj precipe grave estas ne indiki la larĝon de tabelo per bilderoj, ĉar tio povas krei tro rigidan prezenton, kiu ne adaptiĝas al diversaj fenestrograndecoj kaj diversaj tekstograndecoj.

Pli komplikaj tabeloj

Malplenaj ĉeloj

Ofte en tabeloj iuj ĉeloj estas malplenaj, ĉar mankas informo por la koncerna afero. Oni ne rajtas tiam forlasi la tutan tabelĉelon. La kodo por tiu tabelĉelo devas resti por ke la strukturo de kolumnoj kaj vicoj ne disfalu. Principe oni povas tiam simple skribi <td></td> (aŭ <th></th>), sen enhavo inter la malferma kaj ferma markoj. Sed multaj TTT-legiloj tiam rifuzas aperigi eventualan borderon ĉirkaŭ la ĉelo, kaj tio povas aspekti iom strange. Se oni nepre volas, ke tia malplena ĉelo aperu kune kun sia bordero, oni povas iom artifiki, kaj skribi en la ĉelo spaceton. Sed ne taŭgas 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” tabelĉelo. Tio estas eta artifiko, sed sufiĉe senkulpa. Jen ekzemplo de tabelo kun malplenaj ĉeloj:

La hodiaŭaj 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 tabelĉeloj estas malplenaj. Jen la XHTML-kodo:

<table border="2" cellspacing="0" cellpadding="2">
<caption>La hodiaŭaj 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>

Ĉeloj plurkolumnaj aŭ plurvicaj

En la antaŭaj ekzemploj ĉiu tabelĉelo 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 ĉeloj transiras el tiu strikta skemo. Povas okazi, ke unu tabelĉelo etendiĝas tra pluraj kolumnoj, aŭ tra pluraj vicoj, aŭ eĉ ambaŭ. Por aranĝi tiajn tabelojn oni devas uzi la atributojn colspan kaj rowspan:

colspan nombro de kolumnoj, tra kiuj etendiĝas la ĉelo
rowspan nombro de vicoj, tra kiuj etendiĝas la ĉelo

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

Deklinacio de is (unu-nombro)
neŭtra 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>neŭtra</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 fuŝi. Studu zorge la ĉi-antaŭan ekzemplon por kompreni, kiel ĉio 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 aŭ id-atributon por ligi la bezonatajn stildeklarojn al la tabelo. Sed ĉi-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 ĉiu ĉelo 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, aŭ pro elekto, retumas per ekz. voĉlegaj 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 ĉeloj; ĝi montras, al kiuj datumaj ĉeloj rilatas la titola ĉelo
headers atributo de datumaj ĉeloj; ĝi montras, kiu(j) titolĉelo(j) validas por la datuma ĉelo

summary

Ĝenerale oni ĉiam aldonu summary al ĉiu tabelo, krom eble la plej simplaj. Tio povas aspekti ekzemple jene:

<table border="1"
  summary="La tabelo montras kelkajn landojn kun nomo de
  la ĉefurbo kaj de la ĉefa lingvo.">
  <caption>Kelkaj landoj</caption>
  <tbody>
    <tr>
      <th>Lando</th><th>Ĉefurbo</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>Alĝerio</td><td>Alĝero</td><td>la Araba</td>
    </tr>
    <tr>
      <td>Meksiko</td><td>Meksikurbo</td><td>la Hispana</td>
    </tr>
  </tbody>
</table>

Ankaŭ povas esti, ke serĉrobotoj iam atentos (aŭ eble jam atentas) tiajn resumojn en summary-atributoj, kaj aldonas tiujn informojn al siaj indeksoj de la Reto.

scope

Per scope oni povas indiki ĉe titola ĉelo, ĉu ĝi rilatas al la kolumno, aŭ al la vico, en kiu ĝi troviĝas:

<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 antaŭa 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">neŭtra</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 voĉlega TTT-legilo tiaj aldonaj scope-atributoj, povas esti absolute necesaj por povi deĉifri la sencon de tia tabelo. Mi ne scias, ĉu vere ekzistas nun tiaj voĉlegiloj, kiuj atentas pri scope-atributoj, kaj iel voĉe indikas la sencon de la th-elementoj, sed ni ja ne verkas TTT-paĝojn nur por la nuno. Ni verkas paĝojn ankaŭ 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 sufiĉas por indiki la rilatojn inter titolaj kaj datumaj tabelĉeloj. Tiam oni povas anstataŭe (aŭ kompletige) uzi la atributon headers, kiu estas multe pli preciza. Per ĝi oni povas en datuma ĉelo doni liston de titolaj ĉeloj, kiuj validas por ĝuste tiu ĉelo. En tian liston oni metas la id-nomojn de la koncernaj titolaj ĉeloj (kun spacetoj inter la nomoj). Kompreneble ĉiu titola ĉelo tiam devas havi id-atributon por ke tio funkciu. Jen ekzemplo:

Raporto pri vojaĝkostoj
manĝoj hoteloj transportado subsumoj
San Jose
25 Aŭg 1997 37,74 112,00 45,00
26 Aŭg 1997 27,28 112,00 45,00
subsumoj 65,02 224,00 90,00 379,02
Seattle
27 Aŭg 1997 96,25 109,00 36,00
28 Aŭg 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 vojaĝkostojn
  de la vojaĝoj en Aŭgusto al San Jose kaj Seattle">
<caption>Raporto pri vojaĝkostoj</caption>
<tbody>
  <tr>
    <th></th>
    <th id="a2">manĝoj</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 Aŭg 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 Aŭg 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 Aŭg 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 Aŭg 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 ĉi-antaŭa ekzemplo estas pruntita el la normo-teksto de HTML 4.01. La tiea versio de la kodo estas iom pli komplika, ĉar oni uzis aldone ankaŭ la atributon axis, per kiu eblas meti ĉelojn en diversajn kategoriojn. Tio povas ebligi diversajn analizojn kaj raportojn bazitajn sur la informoj de tabelo. Se vi interesiĝas pri tiu profunda temo, vi povas studi la originan ekzemplon (kiu tamen estas verkita en HTML 4.01, ne en XHTML).

Bildoj en tabelĉeloj

Tre ofte oni metas bildojn en tabelĉeloj. Ofte temas tiam pri misuzado de tabeloj por grafika aranĝo, sed ne ĉiam. Ja ankaŭ 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 ĉi paĝojn, vi eble jam notis problemeton: Sub ĉiu 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 ĝuste. img-elementoj estas kvazaŭ teksto, kaj se oni ne aparte indikas alian prezenton, bildoj aperas sur la bazlinio de la teksto. Tekstolinioj ĉiam havas iom da spaco sub la bazlinio, por ke la vostoj de literoj povu aperi. Kaj ĝuste tiun spacon oni vidas en Fajrovulpo sub ĉiu bildo en la ĉi-antaŭa tabelo. Ja mankas vera teksto en tiuj tabelĉeloj, sed tio ne gravas. Ĉiu bildo aperas sur la sama nivelo, sur kiu aperus teksto, se estus teksto en la ĉelo.

Nu, kion do fari, se oni nepre ne volas tian spacon? La respondo, kiel ĉiam, estas stilfolio. Normale img estas nebloka elemento (inline), kio signifas, ke ĝi estas kvazaŭ teksto. Per stilfolio oni povas tamen proponi, ke iuj img-elementoj anstataŭe prezentiĝu kiel blokaj elementoj (block), kio signifas, ke la bildo ne plu prezentiĝas flue kun la teksto, sed memstare.

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

td img {display: block;}

Provu tion. Faru XHTML-paĝon el la ĉi-antaŭa ekzemplo, kaj aldonu ligon al stilfolia dosiero. En tiu dosiero skribu la ĉi-antaŭan regulon pri td img (bildoj en datumaj tabelĉeloj). Se vi uzas Fajrovulpon, aŭ alian parencan TTT-legilon, vi povas vidi, ke la bildoj tiam prezentiĝas sen la ĝena suba spaco. Memoru, ke vi tiam devas konservi miajn ekzemplobildojn en loko, kie vi povas uzi ilin en via testopaĝo, kaj eble reskribi la bildadresojn laŭe. Aŭ 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, ĉu Fajrovulpo vere agas ĝuste ĉi-okaze. La CSS-normo estas eventuale interpretebla en pli ol unu maniero ĉi-punkte. Multaj aliaj legiloj, ekz. “Esplorilo”, ne lasas tian spacon, se bildo estas sola en tabelĉelo, sed vere (aŭ almenaŭ laŭ tiuj, kiuj programis Fajrovulpon) tiuj malnovaj legiloj agas malĝuste, kontraŭ la CSS-normo.

Noto: La CSS-eco display povas havi precipe la jenajn valorojn: inline, block kaj none. La du unuajn ni jam tuŝis. 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 ĝi elekti kaŝi iujn aferojn, kiuj ne estas bezonataj en papera prezento (ekz. aron da ligiloj, kiuj nur ĝenas surpapere, ĉar ili ĉiuokaze ne funkcias tiam). display povas havi ankaŭ aliajn specialajn valorojn, kiuj tamen ankoraŭ apenaŭ funkcias en iuj TTT-legiloj.

Alia solvo estas la jena stilregulo, kiu kaŭzas, ke bildoj en datumaj tabelĉeloj aliĝas al la subo de la spaco por teksto (anstataŭ al la bazlinio de la teksto):

td img {vertical-align: bottom;}

Ĉio ĉi denove montras, ke tre indas testi siajn TTT-paĝojn en diversaj TTT-legiloj.

Al la sekva leciono