BEVEZETÉS A HTML NYELV HASZNÁLATÁBA TARTALOM Bevezetı... 1 A HTML dokumentumok szerkezete... 1 Kezdjük a címmel... 1 Címsorok és bekezdések használata... 2 Színek és háttér... 2 Szövegrészek formázása... 3 Vízszintes tagolóvonal beillesztése... 3 Hogyan illesszünk be sortöréseket... 3 Elıformázott szöveg... 3 Képek beillesztése... 4 Hiperhivatkozások használata... 5 Horgonyok használata... 5 A listák három fajtája... 6 Táblázatok használata... 6 Bevezetı Ez a jegyzet egy rövid bevezetést kíván adni a webszerkesztés alapját jelentı HTML nyelvbe. (A HTML a Hypertext Markup Language rövidítése.) Sok webszerkesztı még ma is olyan egyszerő eszközökkel készíti weblapját, mint például a Windows jegyzettömbje. Mások különféle látványalapú szerkesztıprogramokat használnak (Pl. Mozilla, NVU, Front Page, Page Mill). Arra azonban az utóbbi tábornak is nagy szüksége van, hogy a szerkesztıprogram kulisszái mögött történı dolgokat megértse és szükség esetén korrigálhassa. A legalapvetıbb igényeken túllépve mindenképpen szükségünk lesz a HTML nyelv alapos ismeretére, fıként a dinamikus webprogramozás izgalmas területén. Ez a bevezetı a HTML nyelv legalapvetıbb elemeivel ismerteti meg az olvasót. További ismeretek találhatók a Ferences Gimnázium honlapján. A weblapok haladó formázásának színes kelléktára a CSS stílusleíró nyelv, errıl is található egy alapszintő bevezetı a honlapon. Kiváló módszer arra, hogy különféle weblapszerkesztési trükköket ellessünk, ha belenézünk mások által szerkesztett oldalak forráskódjába. A legtöbb böngészıprogram erre lehetıséget is ad. (Többnyire a nézet menüben találjuk az "oldal forrása", vagy "forrás" parancsot.) A HTML dokumentumok szerkezete A weboldalak valójában egyszerő szöveges fájlok, amelyekben tárolódik az oldalon található szöveg, a weboldalak közötti hivatkozások és az egész weboldal szerkezete. A dokumentum szerkezetére vonatkozó információ a HTML nyelv szabályai szerint, ún. elemek (TAG-ek) formájában van kódolva. A HTML elemek két szembe fordított relációs jel között szerepelnek. A legtöbb elemnek van egy párja: a lezáró elem. A kezdı és lezáró elem között szerepel az a szövegblokk, amelyre az elem vonatkozik. Maga az egész dokumentum is két TAG között helyezkedik el: <html> és </html>. A HTML elemekhez ún. attribútumok is kapcsolódhatnak, amelyekkel az adott elem bizonyos jellemzıit állíthatjuk be. A HTML oldal alapvetıen két részbıl áll: a fejlécbıl (head) és az oldal "testébıl" (body). A fejlécet a <head> elem vezeti be, és a </head> elem zárja le. A fejlécben az oldal egészére vonatkozó információ van kódolva. (Pl. cím, karakterkészlet, a szerzı neve, stb.) A <body> részben található a weboldal szövege, táblázatai és egyéb objektumai, valamint az oldalon szereplı képekre mutató hivatkozások. A lehetı legegyszerőbb weboldal a következıképp néz ki: <html> <head> <title>ez az én elsı weboldalam címe</title> </head> <body> Helló Világ!!! </body> </html> Ha a fenti szöveget begépeljük egy tetszıleges szövegszerkesztıbe és elmentjük formázatlan szövegfájl formátumban.html vagy.htm kiterjesztéssel, akkor ezzel el is készítettük elsı weblapunkat. Kezdjük a címmel Minden HTML dokumentumnak kell legyen egy címe (title). A címet a dokumentum fejlécébe kell írnunk (tehát a <head> és a </head> elemek közé), a következı formában: <title>ez itt a dokumentum címe</title> A cím tartalmazhat ékezetes karaktereket is, és általában a böngészıprogramok a weboldal ablakának címsorában jelenítik meg. 1
Címsorok és bekezdések használata Szöveges dokumentumainkat általában címsorokkal (heading) szoktuk tagolni. (Fıcím, alcím, stb.) Aki foglalkozott már szövegszerkesztéssel, annak ismerısek lehetnek a különféle szintő címsorok. A HTML nyelv 6 címsorszintet különböztet meg. A H1 címsorstílus a legfelsıbb szintet jelenti, a H6 pedig a legalsót. A weblapot megjelenítı böngészıprogram a különféle címsorstílusokhoz különféle megjelenést rendel. (Betőtípus, méret, szín, igazítás, stb.) <h1>ez itt egy fıcím</h1> <h2>ez itt egy alcím</h2> A címek igazítását szabályozhatjuk az ALIGN attribútummal, melynek lehetséges értékei: left, center, right. (balra, középre, jobbra.) <H1 ALIGN="left">Legfelsı szintő címsor balra igazítva</h1> Habár a dokumentum szövegét írhatjuk "ömlesztve" is, mégis célszerő azt bekezdésekre (paragraph) tagolni. A böngészıprogramok a bekezdések elıtt és után némi térközt szoktak hagyni. A bekezdéseket nyitó és záró elempár a <p> és a </p>. <p>ez az elsı bekezdés.</p> <p>ez a következı bekezdés.</p> A bekezdések igazítását is szabályozhatjuk az ALIGN attribútummal. Az igazítás lehetséges módjai: left, center, right, justify. (balra, középre, jobbra, sorkizárt.) <P ALIGN="right">Ez egy jobbra igazított bekezdés.</p> Színek és háttér A weblap egészére vonatkozó színbeállításokat a body elem különféle attribútumaival végezhetjük: <BODY BACKGROUND="fájlnév.kit" BGCOLOR="színkód" TEXT="színkód" LINK="színkód" VLINK="színkód"> A BACKGROUND attribútummal a dokumentum hátteréül szolgáló képfájlt jelölhetjük ki. (Mintás háttér esetén.) Háttérszínt a BGCOLOR attribútummal definiálhatjuk. (Amennyiben háttérmintául szolgáló fájlt is megadunk, akkor a háttérszín csak nagyon ritkán fog elıtőnni a dokumentumban, pl. a keretek szegélyében.) A dokumentumban a szöveg színét a TEXT attribútummal jelölhetjük ki. A LINK attribútum a hiperhivatkozások megjelenési színét határozza meg. A VLINK pedig, a már bejárt hivatkozásokat jelölı színt határozza meg. Ezeket a színeket azonban nem célszerő átállítani, mert az emberek hozzá vannak szokva a hivatkozások színeihez és a megszokottól eltérı színek sokakat megzavarhatnak! A HTML nyelvben minden színt három színkomponenssel kell megadni (piros, zöld, kék; RGB) éspedig hexadecimális formában. (16-os számrendszerben.) A tiszta piros szín kódja #FF0000, a zöldé #00FF00, a kéké #0000FF, a fehéré #FFFFFF és a feketéé #000000. Bizonyos színeket az angol nevükkel is megadhatunk. Ezeket a színeket az alábbi táblázat tartalmazza: Black = "#000000" (fekete) Silver = "#C0C0C0" (ezüst) Gray = "#808080" (szürke) White = "#FFFFFF" (fehér) Maroon = "#800000" (gesztenyebarna) Red = "#FF0000" (piros) Purple = "#800080" (sötétlila) Fuchsia = "#FF00FF" (világoslila) Green = "#008000" (sötétzöld) Lime = "#00FF00" (világoszöld) Olive = "#808000" (olajzöld) Yellow = "#FFFF00" (sárga) Navy = "#000080" (sötétkék) Blue = "#0000FF" (középkék) Teal = "#008080" ( Windows kék) Aqua = "#00FFFF" (zöldeskék) 2
Szövegrészek formázása Papíralapú dokumentumainkban általában félkövér, vagy dılt betőkkel, aláhúzással, színezéssel, vagy méretezéssel szoktunk hangsúlyossá tenni egy-egy szövegrészt. A weblapszerkesztésben inkább használjuk az <em> elemet, és bízzuk a böngészıprogramra, hogy milyen eszközt használ a hangsúlyozásra! (A hangsúly angolul emphasis.) Ez itt kérem egy <em>valóban fontos</em> dolog! A <strong> elem erısebb hangsúlyt ad a szövegrésznek: Ez itt egy <strong>rendkívül fontos</strong> dolog! Mindazonáltal használhatjuk a szövegszerkesztıkben megszokott karakterformázási lehetıségeket is: <b>ez a szövegrész félkövér betőkbıl áll</b> <i>ez a szövegrész dılt betőkbıl áll</i> <u>ez a szövegrész aláhúzott betőkbıl áll</u> <s>ez a szövegrész áthúzott betőkbıl áll</s> <big>ezzel a TAG-gel növelhetjük a betőméretet</big> <small>ezzel a TAG-gel csökkenthetjük a betőméretet</small> Ezekkel a TAG-ekkel írhatunk <sub> alsó </sub> és <sup> felsı </sup> indexeket A <font> elemmel direkt módon elıírhatjuk a megjelenı szöveg betőméretét (size) és színét (color). A méret egy egész szám lehet 1 és 7 között. A színt a HTML nyelvben szokásos módon (hexadecimális RGB kóddal) lehet megadni. <FONT COLOR="#FF0000" SIZE="1">Kicsi piros szöveg</font> A méret megadásánál elıjeles szám is szerepelhet, ami az alap betőmérethez viszonyított méretet jelöl. <FONT SIZE="+1">Az alapméretnél egyel nagyobb betőméret</font> <FONT SIZE="-2">Az alapméretnél kettıvel kisebb betőméret</font> Vízszintes tagolóvonal beillesztése A weblap egyes részeit tagolás vagy esztétikai ok miatt vízszintes vonallal is el lehet választani egymástól. Legegyszerőbb esetben a <hr> elem egy vízszintes elválasztó vonalat helyez el az adott ponton, a rendelkezésre álló szélességben. A vízszintes vonal megjelenését az align, width és size attribútumokkal módosíthatjuk. Az align az igazítás helyét adja meg (left, right, middle). A width a vonalhosszt definiálja, a size pedig a vonal vastagságát. Mindkettıt meg lehet adni képpontban, ill. a hosszt az ablak-szélesség százalékában. <hr align="middle" size="3" width="80%"> Hogyan illesszünk be sortöréseket Némely esetben a szöveg bizonyos pontján mindenképpen sort szeretnénk törni (break). Erre szolgál a <br> elem, amelynek használatát az alábbi postacímmel mutatjuk be: <p>the Willows<br> 21 Runnymede Avenue<br> Morton-in-the-marsh<br> Oxfordshire OX27 3BQ</p> A <br> elemnek soha nincs lezáró párja! (Az ilyen elemeket üres elemnek nevezzük.) Elıformázott szöveg A Web egyik nagy elınye, hogy a böngészıprogram a megjelenítendı szöveget automatikusan sorokra tördeli, a böngészıablak méreteihez igazodva. Néha azonban ez egy nemkívánatos folyamat. A <pre> elem használatával megakadályozhatjuk a sortöréseket, mint például az alábbi programkód esetében: <pre> void Node::Remove() { if (prev) prev->next = next; else if (parent) parent->setcontent(null); if (next) next->prev = prev; 3
} </pre> parent = null; Amely a következıképp jelenik meg: void Node::Remove() { if (prev) prev->next = next; else if (parent) parent->setcontent(null); } if (next) next->prev = prev; parent = null; Vegyük észre, hogy minden sortörés és szóköz ugyanúgy jelenik meg, mint ahogyan azt a szerzı begépelte! Így lehetıség nyílik a behúzások szóközökkel való megvalósítására, de ezt csak ilyen, speciális esetekben alkalmazzuk! Az elıformázott (preformatted) szöveget általában fix szélességő karakterkészlettel jelenítik meg a böngészık (olyan karakterkészlettel, amelyben minden karakter ugyanolyan széles). Képek beillesztése Képek nélkül a weblapok igencsak unalmasak lennének. Azon túl, hogy vonzóbbá teszik weboldalainkat, a képek sokat segítenek az információ közlésében. Képeket az <img> elemmel illeszthetünk be a dokumentumba. (A kép angolul image.) Valójában a kép nem kerül bele a weblapot leíró HTML fájlba, csak egy hivatkozás a képre vonatkozólag. Maga a kép egy külön fájlban tárolódik, amely lehet a weblapot tartalmazó mappában, egy másik mappában, vagy akár a Föld másik oldalán egy idegen webszerveren. Ha például egy "peter.jpg" nevő képfájlt szeretnénk beilleszteni a dokumentumba, amely a weblapot tartalmazó mappában van tárolva, akkor ezt a következıképp tehetjük: <img src="peter.jpg"> Elıfordulhat, hogy a képet nem az eredeti méretében szeretnénk megjeleníteni a weblapon, hanem kicsinyítve (vagy nagyítva). Ilyenkor a kép megjelenítési méretét is megadhatjuk: <img src="peter.jpg" width="200" height="150"> Amint az a fenti példából is látható, az <img> elemnek nincs lezáró párja. Az SRC attribútum adja meg a képfájl nevét (és elérési útját, ha kell), a másik két attribútum pedig a kép szélességét és magasságát. A méretadatokkal kapcsolatban fontos megjegyeznünk a következıt: Lehetıség van rá, hogy egy weblapon egy 500x500 pixeles képet 100x100 -as méretben jelenítsünk meg, de ezt nagyon nem érdemes így csinálni! Felesleges ugyanis 25 -ször annyi adat átvitelével terhelni a hálózatot (és ezáltal lassítani weblapunk letöltését), mint amennyi adatra valójában szükség van! Ha az említett képet 100x100 -as méretben kívánjuk felhasználni, akkor csökkentsük le a méretét 100x100 pixelre (egy alkalmas grafikai programmal). Nem minden képformátum alkalmas a weblapokba való beillesztésre. A legtöbb böngészıprogram képes a JPG (JPEG) és GIF formátumú képek megjelenítésére, az újabb böngészık pedig a PNG formátumot is ismerik. Mindhárom tömörített képformátum, így megfelelı képminıség mellett kis fájlméretet eredményeznek. Általában a JPG formátum alkalmasabb a fényképek és egyéb bonyolultan színezett képek tárolására, a GIF pedig a kevesebb, nagyobb mérető színfoltot tartalmazó, vonalas és vektorgrafikákhoz. A GIF formátum alkalmas még az átlátszóságra (átlátszó háttér), valamint animált képek tárolására. A dokumentumba helyezett képek alapesetben a szöveg részeként viselkednek, azaz a kép mellett csak egysornyi szöveg szerepelhet. Azt, hogy ez az egy szövegsor a kép alsó széléhez, felsı széléhez, vagy éppen a közepéhez igazodjon, az <img> elem ALIGN attribútumával állíthatjuk be. (top=tetején, middle=közepén, ha nem adjuk meg, akkor az alján) Lehetıség van azonban arra is, hogy a képet a margóhoz igazítsuk, és a szöveget többsorosan körbefuttassuk a kép körül. Például az alábbi beállítás: <p><img src="nap.jpg" align="left"> Hát ez kérem egy nagyon-nagyon hosszú-hosszú többsoros szöveg, amelyet a bal oldalon látható piciny napfelkeltét ábrázoló kép körül akarunk futtatni.</p> a következı eredményt adja: Hát ez kérem egy nagyon-nagyon hosszúhosszú többsoros szöveg, amelyet a bal oldalon látható piciny napfelkeltét ábrázoló kép körül akarunk futtatni. Az alábbi pedig align="right" <p><img src="nap.jpg" align="right"> Hát ez kérem egy nagyon-nagyon hosszú-hosszú többsoros szöveg, amelyet a jobb oldalon látható piciny napfelkeltét ábrázoló kép körül akarunk futtatni.</p> 4
és ezért a jobb margóhoz igazodik: Hát ez kérem egy nagyon-nagyon hosszúhosszú többsoros szöveg, amelyet a jobb oldalon látható piciny napfelkeltét ábrázoló kép körül akarunk futtatni. A hspace attribútummal a kép melletti vízszintes térközt, a vspace attribútummal pedig a függıleges térközt határozhatjuk meg. A border attribútummal akár szegélyt is rajzolhatunk a kép köré: <p><img src="nap.jpg" align="left" hspace="10" vspace="10" border="2">hát ez kérem egy nagyon-nagyon hosszú-hosszú többsoros szöveg, amelyet a bal oldalon látható piciny napfelkeltét ábrázoló kép körül akarunk futtatni.</p> Hát ez kérem egy nagyon-nagyon hosszú-hosszú többsoros szöveg, amelyet a bal oldalon látható piciny napfelkeltét ábrázoló kép körül akarunk futtatni. Hiperhivatkozások használata A Web lényegét az egyes weblapokat összekötı hivatkozások jelentik. A hivatkozásra kattintva, egy másik weblap jelenik meg a böngészıprogram ablakában (vagy akár egy új ablakban). Egyetlen kattintással a Föld másik oldalára kerülhetünk! Hiperhivatkozásokat (linkeket) az <a> elemmel hozhatunk létre: Ez itt egy hivatkozás <a href="peter.html">péter weblapjára.</a>. Az a szöveg, amely az <a> és a </a> között szerepel, hivatkozássá válik. Formátuma megváltozik (a böngészıprogram beállításainak megfelelıen), az egérmutató megváltozik, ha fölé visszük, és ha rákattintunk, akkor a böngészıprogram ablakába az a dokumentum töltıdik, amely a HREF attribútumban van megadva. (Jelen esetben az aktuális weblappal azonos mappában lévı peter.html fájl.) Ha egy másik webszerveren lévı dokumentumra akarunk hivatkozni, akkor a dokumentum teljes URL -jét meg kell adnunk. Például, ha a W3C honlapjára akarunk hivatkozni, akkor az így néz ki: Ez itt egy hivatkozás a <a href="http://www.w3.org/">w3c honlapjára.</a>. Egy képet is hivatkozássá alakíthatunk a következıképp: <a href="peter.html"><img src="peter.jpg"></a> Ha a hivatkozás célpontja ugyanazon a szerveren, de nem ugyanabban a mappában van, mint az aktuális weblap, akkor a fájlnéven kívül meg kell adnunk a hozzá vezetı relatív elérési utat is. Például az aktuális könyvtárban lévı emberek könyvtárban található peter.html fájlnál a következıt írjuk: Ez itt egy hivatkozás <a href="emberek/peter.html">péter weblapjára.</a>. Ha pedig az aktuális könyvtár felett lévı könyvtár egy fájljára akarunk hivatkozni, akkor: Ez itt egy hivatkozás <a href="../peter.html">péter weblapjára.</a>. Hivatkozásaink célpontjai nem csak weboldalak (HTML fájlok) lehetnek, hanem gyakorlatilag bármilyen típusú fájl. (PDF, JPG, DOC, ZIP, EXE, stb.) Az, hogy a böngészıprogram mit csinál ezzel a fájllal, a böngészıre telepített bıvítményektıl függ. Lehet, hogy meg tudja jeleníteni, de lehet, hogy csak a mentésére képes. Mindenesetre így letölthetıvé tehetünk bármilyen típusú fájlt. (Nagyobb fájlokat, vagy egész könyvtárakat célszerő egy tömörített fájlba tenni.) Horgonyok használata Képzeljük el, hogy írunk egy hosszú-hosszú dokumentumot, amelynek elején tartalomjegyzék található. A hagyományos könyvek tartalomjegyzékének használata az oldalak számozásán alapul, de egy weblapnak nincsenek oldalai! Ilyenkor a megoldás: készítsünk hiperhivatkozásokat, amelyek az egyes fejezetek elejére mutatnak. Korábban már megtanultuk, hogy hogyan hivatkozhatunk más weboldalakra. Az ott bemutatott módszert alkalmazva a hivatkozásokra kattintva az új weboldal eleje jelenik meg a böngészıablakban. Lehetıség van azonban arra is, hogy egy weboldal tetszıleges pontjára irányítsuk a hivatkozást. Ehhez a célpontra egy horgonyt (anchor) kell elhelyeznünk. Ha például egy H2 stílusú szöveget akarunk "célba venni", <h2>ez itt egy fejezetcím</h2> akkor erre a címsorra egy horgonyt kell helyeznünk. A horgonyokat ugyanazzal az <a> elemmel hozhatjuk létre, mint a hiperhivatkozásokat, de ez esetben nem a hivatkozás célpontját adjuk meg, hanem a horgony azonosítóját (name): <h2><a name="fejezet3">ez itt a harmadik fejezet címe</a></h2> A name attribútumban megadott azonosítót használjuk fel a hivatkozás létrehozásakor. Tehát a tartalomjegyzék így néz ki:... <a href="#fejezet3">harmadik fejezet</a>... 5
A # karakter jelzi, hogy itt horgony azonosító következik. Lehetıség van arra is, hogy egy másik weblapon elhelyezett horgonyra hivatkozzunk. Ilyenkor a href -ben a másik fájl nevét (elérési útját, URL -jét) követıen kell megadni a horgony azonosítóját: <a href="http://www.konyvtar.hu/konyvem.html#fejezet3">harmadik fejezet</a> Egy újabb lehetıség a horgonyok elhelyezésére az id attribútum használata: <h2 id="fejezet3">ez itt a harmadik fejezet címe</h2> Ez a módszer azonban csak az 5. generációs, vagy újabb böngészıprogramok esetében mőködik. A listák három fajtája A HTML nyelv háromféle listát támogat: a pontozott, számozott és definíciós listát. A pontozott listát, amelyet rendezetlen listának (unordered list) is szokás nevezni, az <ul> és <li> elemekkel lehet létrehozni: <ul> <li>ez az elsı listaelem</li> <li>ez a második listaelem</li> <li>ez pedig a harmadik</li> </ul> A listaelemeket záró </li> elem használata nem kötelezı (lustábbak el is hagyhatják). A második listatípus a számozott lista, amelyet rendezett listának (ordered list) is szoktak nevezni. Létrehozása az <ol> és <li> elemekkel történik: <ol> <li>ez az egyes számú listaelem</li> <li>ez a kettes számú listaelem</li> <li>ez pedig a hármas</li> </ol> Akárcsak a pontozott listák esetében, a </li> záró elem itt is elhagyható. A harmadik listatípus az ún. definíciós lista (definition list) A definíciós lista olyan esetekben használatos, amikor különféle fogalmakat és azok meghatározását (definícióját) akarjuk listaszerően megjeleníteni. (Pl. könyvek végén a kislexikon.) A definíciós lista egy <dl> elemmel kezdıdik. Minden listaelem egy fogalom - definíció párból áll, amelyeket a <dt> és <dd> elemek vezetnek be: <dl> <dt>ez az elsı fogalom</dt> <dd>ez az elsı fogalom meghatározása</dd> <dt>ez a második fogalom </dt> <dd>ez a második fogalom definíciója</dd> <dt>ez a harmadik fogalom</dt> <dd>ez pedig annak definíciója</dd> </dl> A </dt> és </dd> záró elemek itt is elhagyhatók. A különféle típusú listák egymásba is ágyazhatók: <ol> <li>ez az elsı számozott listaelem</li> <li> Ez a második számozott listaelem <ul> <li>ez az elsı beágyazott listaelem</li> <li>ez a második beágyazott listaelem</li> </ul> </li> <li>ez a harmadik számozott listaelem</li> </ol> Hosszabb listaelemek esetén még bekezdéseket és címsorokat is használhatunk a listán belül. Táblázatok használata A táblázatokat (table) különféle adatok rendezett megjelenítésén túl a weboldalon szereplı szöveg és képek elrendezésére is használjuk a HTML nyelvben (például szövegek többhasábos elrendezésére). Íme egy egyszerő táblázat: Amelyet az alábbi HTML kód definiál: 6
<table border="1"> <tr><th></th><th></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> A table elem jelzi, hogy táblázat következik. Ennek border attribútuma adja meg, hogy hány pixel széles legyen a táblázat szegélye. A tr elem jelzi a táblázat sorait. A th és td elemek jelzik a fejléc- és adatcellákat. A table elem cellpadding attribútumával beállítható, hogy mennyi "margót" hagyjon a böngészıprogram a szegély, és a cellában lévı adat között. Például, ha 10 pixelnyi cellpadding értéket állítunk be, akkor a következı hatást érjük el: <table border="1" cellpadding="10"> Ezzel szemben a cellspacing attribútummal a cellák közötti térközt állíthatjuk be. Ha a cellspacing -et is 10 pixelesre állítjuk, akkor a táblázat a következıképp jelenik meg: <table border="1" cellpadding="10" cellspacing="10"> A táblázat szélességét a width attribútummal állíthatjuk be. A szélességet megadhatjuk pixelben, vagy a bal és jobb margó között rendelkezésre álló hely százalékában. (Ha nem adjuk meg a táblázat méretét, akkor a böngészıprogram automatikusan méretezi a cellák tartalmának megfelelıen.) Például, ha 80% -os méretet állítunk be, akkor: <table border="1" cellpadding="10" width="80%"> Alapértelmezésben a böngészıprogramok középre igazítják a fejléc-cellák (th) tartalmát, és balra az adatcellákét (td). Az igazítást az align attribútummal változtathatjuk meg, amelyet egyenként megadhatunk minden cellához, vagy egy egész sorhoz. Az align attribútum értéke "left", "center" vagy "right" lehet. (Bal, közép, jobb.) <table border="1" cellpadding="10" width="80%"> <tr align="center"><th></th><th></th></tr> <tr align="center"><td>2000</td><td>$18m</td></tr> <tr align="center"><td>2001</td><td>$25m</td></tr> 7
<tr align="center"><td>2002</td><td>$36m</td></tr> A valign attribútummal hasonlóképpen állíthatjuk be cellák és sorok függıleges igazítását. Ez az attribútum a "top", "middle" vagy "bottom" értékeket kaphatja. (Fent, középen, lent.) Alapértelmezés szerint a fejléc-cellákat (th) középre, az adatcellákat pedig felülre igazítja a böngészıprogram. Cellák egyesítésére is lehetıség van a táblázatokban: North South Total 2000 $10M $8M $18M 2001 $14M $11M $25M A "" cella most két sornyi területet foglal el, míg a "" cella három oszlopnyit. A fenti hatás a rowspan és colspan attribútumok használatával érhetı el: <table border="1" cellpadding="10" width="80%"> <tr align="center"><th rowspan="2"></th><th colspan="3"></th></tr> <tr align="center"><th>north</th><th>south</th><th>total</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> A HTML kód áttekinthetıbbé tehetı annak felhasználásával, hogy a böngészıprogramok nem feltétlenül igénylik a </th>, </td> és </tr> lezáró elemeket: <table border="1" cellpadding="10" width="80%"> <tr align="center"><th rowspan="2"><th colspan="3"> <tr align="center"><th>north<th>south<th>total <tr align="center"><td>2000<td>$10m<td>$8m<td>$18m <tr align="center"><td>2001<td>$14m<td>$11m<td>$25m Amikor a táblázatokat nem adatok rendezett megjelenítésére, hanem a weboldal szövegének és képeinek elrendezésére használjuk, többnyire nincs szükségünk a cellákat elválasztó szegély megjelenítésére. Ilyenkor mindössze a border="0" és esetleg a cellspacing="0" beállításra van szükségünk. (Amennyiben a cellspacing attribútumot nem állítjuk nullára, elıfordulhat, hogy egy kis rés marad az egyes cellák között.) <table border="0" cellspacing="0" cellpadding="10"> <tr><th></th><th></th></tr> <tr><td>2000</td><td>$18m</td></tr> <tr><td>2001</td><td>$25m</td></tr> 8
<tr><td>2002</td><td>$36m</td></tr> A táblázatcellák színezését a bgcolor attribútum használatával állíthatjuk be. A színek RGB komponenseit hexadecimális (16-os számrendszerben) formában kell megadnunk: <table border="0" cellspacing="0" cellpadding="10"> <tr> <th bgcolor="#cccc99"></th> <th bgcolor="#cccc99"></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> 9