caption

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

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

tbody

tbody ne estas deviga elemento. Se oni ghin ne uzas, ghi automate subkomprenighas. Tamen montrighis, 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 chiam uzi tbody, ankau kiam tio eble shajnas superflua balasto.

Noto: Krom tbody por tabelkorpo, ekzistas ankau thead por tabelkapo, kaj tfoot por tabelpiedo. Pere de tiuj elementoj oni povas teorie krei tabelojn, en kiuj kapa kaj pieda partoj chiam videblas. Tiaj aranghoj povas esti tre oportunaj, precipe por presado de tabeloj surpapere, kiam oni volas ripeti ekzemple titolajn tabelchelojn sur chiu pagho. Sed chio tia bedaurinde ankorau apenau funkcias en iuj TTT-legiloj. Tial mi ne traktos thead kaj tfoot en tiu chi leciono.

Tabelaj atributoj

En la dua ekzemplo estas ankau unu atributo: border="1". Tiu atributo indikas, ke estu bordero chirkau chiu tabelchelo, kaj ke tiu bordero estu largha je unu bildero. Iom escepte oni povas indiki tian prezentan detalon rekte en la XHTML-kodo. Oni povas tion fari ankau per stilfolio, sed kiam temas pri tabeloj, povas esti tre grave, ke bordero estu montrata ankau kiam la stilfolio forestas (au kiam la TTT-legilo ignoras la stilfolion). Alie iuj tabeloj povas farighi nekompreneblaj. Sen la bordero oni eble ne povas bone kompreni la strukturon de kolumnoj kaj vicoj. Ghuste 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 sufichas skribi nenion ajn, char plej multaj TTT-legiloj montras tian borderon nur se oni tion aparte indikas. Chiuokaze oni ne povas esti certa, kiel prezentighas tabelo. Eble iuj legantoj havas propran stilfolion, kiu enshaltas au elshaltas borderojn diversgrandajn kaj diverskolorajn.

Ekzistas ankau cellspacing-atributo por indiki spacon chirkau la tabelcheloj, ekz. cellspacing="2" (= estu spaco largha je 2 bilderoj chiuflanke de chiu tabelchelo). Kaj ekzistas cellpadding-atributo por indiki spacon (remburon) ene de la tabelcheloj, inter la teksto kaj la bordero, ekz. cellpadding="4" (= estu remburo largha je 4 bilderoj chiuflanke de la enhavo de tabelchelo). Ankau tiuj atributoj povas esti utilaj por igi tabelon komprenebla. Sed normale sufichas 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 ghi krom border ankau cellspacing kaj cellpadding, eksperimentante per diversaj larghoj por vidi, kiel tio influas la prezentadon. Chiuj tri atributoj estu en la malferma marko de la table-elemento. Sciu, ke per stilfolio eblas fari multe pli interesajn aferojn.

Oni ankau povas uzi width-atributon en la table-elemento. Tia atributo indikas la larghon de tabelo, au en bilderoj, ekz. width="400", au per procentajho, ekz. width="80%" (= okdek procentoj de la largho de la havebla spaco). Sed preskau chiam estas preferinde ne uzi width-atributon, kaj precipe grave estas ne indiki la larghon de tabelo per bilderoj, char tio povas krei tro rigidan prezenton, kiu ne adaptighas al diversaj fenestrograndecoj kaj diversaj tekstograndecoj.

Malplenaj cheloj

Ofte en tabeloj iuj cheloj estas malplenaj, char mankas informo por la koncerna afero. Oni ne rajtas tiam forlasi la tutan tabelchelon. La kodo por tiu tabelchelo devas resti por ke la strukturo de kolumnoj kaj vicoj ne disfalu. Principe oni povas tiam simple skribi <td></td> (au <th></th>), sen enhavo inter la malferma kaj ferma markoj. Sed multaj TTT-legiloj tiam rifuzas aperigi eventualan borderon chirkau la chelo, kaj tio povas aspekti iom strange. Se oni nepre volas, ke tia malplena chelo aperu kune kun sia bordero, oni povas iom artifiki, kaj skribi en la chelo spaceton. Sed ne taugas 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  . Oni do skribu <td>&nbsp;</td> por tia “malplena” tabelchelo. Tio estas eta artifiko, sed sufiche senkulpa. Jen ekzemplo de tabelo kun malplenaj cheloj:

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

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

Cheloj plurkolumnaj au plurvicaj

En la antauaj ekzemploj chiu tabelchelo 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 cheloj transiras el tiu strikta skemo. Povas okazi, ke unu tabelchelo etendighas tra pluraj kolumnoj, au tra pluraj vicoj, au ech ambau. Por aranghi tiajn tabelojn oni devas uzi la atributojn colspan kaj rowspan:

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

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>neutra</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 fushi. Studu zorge la chi-antauan ekzemplon por kompreni, kiel chio 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 au id-atributon por ligi la bezonatajn stildeklarojn al la tabelo. Sed chi-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 chiu chelo de la tabelo.

summary

Ghenerale oni chiam aldonu summary al chiu tabelo, krom eble la plej simplaj. Tio povas aspekti ekzemple jene:

<table border="1"
  summary="La tabelo montras kelkajn landojn kun nomo de
  la chefurbo kaj de la chefa lingvo.">
  <caption>Kelkaj landoj</caption>
  <tbody>
    <tr>
      <th>Lando</th><th>Chefurbo</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>Algherio</td><td>Alghero</td><td>la Araba</td>
    </tr>
    <tr>
      <td>Meksiko</td><td>Meksikurbo</td><td>la Hispana</td>
    </tr>
  </tbody>
</table>

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

scope

Per scope oni povas indiki che titola chelo, chu ghi rilatas al la kolumno, au al la vico, en kiu ghi trovighas:

Jen la antaua 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">neutra</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 vochlega TTT-legilo tiaj aldonaj scope-atributoj, povas esti absolute necesaj por povi dechifri la sencon de tia tabelo. Mi ne scias, chu vere ekzistas nun tiaj vochlegiloj, kiuj atentas pri scope-atributoj, kaj iel voche indikas la sencon de la th-elementoj, sed ni ja ne verkas TTT-paghojn nur por la nuno. Ni verkas paghojn ankau 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 sufichas por indiki la rilatojn inter titolaj kaj datumaj tabelcheloj. Tiam oni povas anstataue (au kompletige) uzi la atributon headers, kiu estas multe pli preciza. Per ghi oni povas en datuma chelo doni liston de titolaj cheloj, kiuj validas por ghuste tiu chelo. En tian liston oni metas la id-nomojn de la koncernaj titolaj cheloj (kun spacetoj inter la nomoj). Kompreneble chiu titola chelo tiam devas havi id-atributon por ke tio funkciu. Jen ekzemplo:

Jen la XHTML-kodo:

<table border="1"
  summary="La tabelo montras la vojaghkostojn
  de la vojaghoj en Augusto al San Jose kaj Seattle">
<caption>Raporto pri vojaghkostoj</caption>
<tbody>
  <tr>
    <th></th>
    <th id="a2">manghoj</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 Aug 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 Aug 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 Aug 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 Aug 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 chi-antaua ekzemplo estas pruntita el la normo-teksto de HTML 4.01. La tiea versio de la kodo estas iom pli komplika, char oni uzis aldone ankau la atributon axis, per kiu eblas meti chelojn en diversajn kategoriojn. Tio povas ebligi diversajn analizojn kaj raportojn bazitajn sur la informoj de tabelo. Se vi interesighas pri tiu profunda temo, vi povas studi la originan ekzemplon (kiu tamen estas verkita en HTML 4.01, ne en XHTML).