Akkor nézzük a táblázatokat... egy kis előzetes kitérővel

Hogy illeszthetünk be nem-törhető szóközt?

A böngészők általában automatikusan tördelik a szöveget sorokra. Általában ott lehet új sort kezdeni, ahol szóköz van. Néha azonban szeretnénk elkerülni, hogy két adott szó közé - akár véletlenül is - sortörés kerülhessen. Például szeretnénk, hogy a Coca Cola szavak soha ne kerülhessenek külön szóba. Ilyenkor lehet azt a trükköt használni, hogy az   karakterhivatkozást használjuk a sima szóköz helyett. Például:

A szénsavas üdítőitalok, mint például a Coca Cola,
a világon mindenhol kaphatók.

Néhány további karakterhivatkozás gyakran használt karakterek beszúrásához:

A szerzői jogokra, bejegyzett nevekre gyakran csak az elterjedtt jelekkel utalunk:

Megjegyzés: a HTML 4.0 már tartalmaz külön hivatkozást az utóbbihoz is ™ , ám ezt a korábbi verziók még nem értik.

További hasznos hivatkozások:

Valamint léteznek ilyen kódok a különböző ékezetes betűkhöz és szimbólumokhoz is (arra az esetre, ha a böngésző magától nem ismerné fel őket):

Persze még így sem mindig biztos a siker :)

Hogy is tudtunk egy adott oldal meghatározott részéhez "ugrani"?

Tegyük fel, hogy épp elkészítettél egy viszonylag hosszú weboldalt, aminek az elején áll egy kis tartalomjegyzék. Hogy tudnád elérni, hogy az egyes címektől a megfelelő részhez lehessen ugrani?

Tegyük fel, hogy minden rész egy címsorral kezdődik:

<h2>Éjszakai mulatók</h2>

Alakítsuk át a címsort egy potenciális célponttá (ahova ugrani lehet):
<a name=azonosító> .... </a>

<h2><a name="mulatok">Éjszakai mulatók</a></h2>

A name jellemző segítségével tudunk majd hivatkozni erre a célterületre: "mulatók". Ezek után már csak a tartalomjegyzékben kell a megfelelő résznél elhelyezni egy hivatkozást (ennek a névnek a felhasználásával:

<ul>
  ...
  <li><a href="#mulatók">Éjszakai mulatók</a></li>
  ...
</ul>

A név előtt a # karakternek kell állnia, egyébként teljesen úgy néz ki mint egy "hagyományos" hivatkozás. Amennyiben a célterület egy másik dokumentumban található, annak elérési útját is meg kell adni a # karakter előtt. Például, ha a célterület a "http://www.akarmi.hu/" dokumentumban található, akkor a hivatkozás így fog kinézni:

<a href="http://www.akarmi.hu/#mulatók">Éjszakai mulatók</a>

Ma már gyakorlatilag tetszőleges tag-ben elhelyezhető egy id tulajdonság, amire aztán később lehet hivatkozni.

<h2 id="mulatók">Éjszakai mulatók</h2>

Táblázatok

Táblázatokat használhatunk adatok rendezett megjelenítéséhez, és formázásokhoz is. A táblázatok kitölthetik a margók közti teret, vagy akár meg is adhatjuk konkrét méretüket, esetleg méretük igazodhat a tartalomhoz.

Minden tábla legalább egy sorból áll, ami legalább egy cellát tartalmaz:

Ennek a táblázatnak a kódja (színezések nélkül) így néz ki:

<table border="1">
<tr><th>Év</th><th>Forgalom</th></tr>
<tr><td>2000</td><td>$18M</td></tr>
<tr><td>2001</td><td>$25M</td></tr>
<tr><td>2002</td><td>$36M</td></tr>
</table>

A table elem veszi körül a táblázat egészét. A border jellemző határozza meg a rácsozat vastagságát pixelekben. A tr elem foglalja magába egy sor tartalmát. A th és td elemek jelölik rendre az oszlopfejléceket és az egyes cellákat.

Térközök

Meg lehet adni, hogy mekkora hely legyen a cella tartalma és a szegély között a table elem cellpadding jellemzőjének megfelelő értékével. Például egy 10 pixeles távolság így fest:

<table border="1" cellpadding="10">

Cellák távolsága

A cellspacing jellemző ugyanakkor az egyes cellák távolságát határozza meg. Ismét 10 pixelben gondolkodva a hatás:

<table border="1" cellpadding="10" cellspacing="10">

Táblázat szélessége

A táblázat egészének szélessége a width jellemzővel állítható. Az érték megadható pixelekben vagy a rendelkezésre álló terület százalékaként. Nézzünk egy táblázatot, aminek szélessége 80% :

<table border="1" cellpadding="10" width="80%">

Amennyiben a width értéket nem a table elemben helyezzük el, hanem a td elemben, akkor azt határozhatjuk meg, hogy az adott cella milyen széles legyen a soron belül (szintén megadható pixelben vagy szálakéban is).

Szöveg igazítása a cellákon belül

Alapértelmezésben a böngészők az oszlopfejléceket (th) középre, a cellák tartalmát (td) balra igazítják. Az igazítás az align jellemzővel változtatható meg, egy sor minden cellájára egységesen a (tr) elemben, vagy akár minden cellára külön-külön a (td) elemekben. A lehetséges értékek: "left", "center" or "right":

<table border="1" cellpadding="10" width="80%">
<tr align="center"><th>Év</th><th>Forgalom</th></tr>
<tr align="center"><td>2000</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$25M</td></tr>
<tr><td align="left">2002</td><td align="right">$36M</td></tr>
</table>

Aminek a hatása:

A valign jellemző hasonló szerepet tölt be a tartalom függőleges igazításánál. Ennek lehetséges értékei: "top", "middle" or "bottom". Ez is beállítható egész sorokra, vagy külön cellákra is. Alapértelmezésben az oszlopfejléceket (th) a cella közepére igazítja a böngésző, az adatcellákat pedig fentre.

Üres cellák

Az üres cellákat elsőre meglepően kezelik a böngészők. Hasonlítsuk össze a következő két példát:

és a másik...

Az első esetben a cella valóban üres:

<td></td>

A második esetben egy nem-törhető szóköz szerepel benne:

<td>&nbsp;</td>

Több sorra vagy oszlopra kiterjedő cellák

Egészítsük ki az előbbi példánkat Észak és Dél felbontással!

Ekkor az "Év" oszlopfejlécünk két sorra terjed ki, míg a "Forgalom" 3 oszlopra. Ezt rendre a rowspan és a colspan jellemzők megfelelő értékeinek beállításával érhetjük el. Az előző példa kódja:

<table border="1" cellpadding="10" width="80%">
<tr align="center"><th rowspan="2">Év</th><th colspan="3">Forgalom</th></tr>
<tr align="center"><th>Észak</th><th>Dél</th><th>Összesen</th></tr>
<tr align="center"><td>2000</td><td>$10M</td><td>$8M</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$14M</td><td>$11M</td><td>$25M</td></tr>
</table>

Vegyük észre, hogy mivel az "Év" 2 sorra terjed ki, ezért a második sor első th eleme (Észak) az első oszlop helyett a másodikban szerepel (az elsőt még az Év foglalja el).

Szegélyek nélküli táblázatok

Az ilyen táblázatok jól használhatók az információ megfelelő elrendezéséhez az oldalon. Ehhez semmi mást nem kell tenni, mint kiegészíteni a table elemet a border="0" és a cellspacing="0" jellemzőkkel:

Ennek a táblázatnak a kódja:

<table border="0" cellspacing="0" cellpadding="10">
<tr><th>Év</th><th>Forgalom</th></tr>
<tr><td>2000</td><td>$18M</td></tr>
<tr><td>2001</td><td>$25M</td></tr>
<tr><td>2002</td><td>$36M</td></tr>
</table>

Ha kihagyjuk a cellspacing jellemző lenullázását, akkor nem fognak egybeérni a szomszédos cellák:

Táblázatok színezése

A táblázat tetszőleges egysége (az egész, egy sor, egy cella) háttere a bgcolor jellemzővel állítható be (persze a megfelelő tag nyitórészébe kell ezt beírni). A színek beállításánál itt is lehet a színek nevét, vagy a hexadecimális értékeket is használni.

<table border="0" cellspacing="0" cellpadding="10">
  <tr>
    <th bgcolor="#CCCC99">Év</th>
    <th bgcolor="#CCCC99">Forgalom</th>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2000</td>
    <td bgcolor="#FFFF66">$18M</td>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2001</td>
    <td bgcolor="#FFFF66">$25M</td>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2002</td>
    <td bgcolor="#FFFF66">$36M</td>
  </tr>
</table>

Itt minden cellát külön színeztünk. Azt, hogy egy cella végül milyen színű lesz, az határozza meg, hogy mi a legspecifikusabb beállítás, ami az adott cellára vonatkozhat. (A table elemben beállított színt felülbírálja a tr elemben beállított szín, azt pedig a td vagy th elemben beállított).

Táblafeliratok

Általában érdemes valami címet adni minden táblázatnak (táblacímet), amiből kiderül, hogy milyen értékeket foglaltunk a táblázatba. Erre való a caption elem, ami a táblázat felett (alapértelmezés) vagy alatt is elhelyezhető. A caption elemnek mindig meg kell előznie az első sort jelképező tr elemet.

ami az alábbi kód eredménye:

<table border="1" cellpadding="10" width="80%">
<caption>Éves forgalmi adatok</caption>
<tr align="center">
  <th>Év</th><th>Forgalom</th>
</tr>
<tr align="center"><td>2000</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$25M</td></tr>
</table>

Ugyanez a táblázat alul elhelyezett címmel (align="bottom" jellemzővel kell kiegészíteni a caption elemet):

Maga a táblázat középre igazítható az oldalon ha a table elem köré elhelyezünk egy center elemet.

A táblázat egyes celláiba szabadon helyezhetünk el képeket (img elemmel) vagy listákat (ul vagy ol elemekkel) is