A táblázatok

 

 

Ebben a fejezetben a táblázatokkal ismerkedünk meg.
Témák:


Ezek a gyakran használt eszközök segítenek abban, hogy oldalunk tartalma mindig rendezett képet mutasson. Az egymás alatti cellák biztos, hogy bármilyen böngészőben, bármilyen széles képernyőn pontosan egymás alá kerülnek. Használható adatok táblázatos megjelenítésén túl egyebek között az oldal tartalmának rendezéséhez, menüsorok megjelenítéséhez, több darabból álló nagyobb képek összeillesztéséhez.

Ime egy táblázat:

     
     
     

Az alábbiakban a legfontosabb, táblázatokkal kapcsolatos elemekkel ismerkedünk meg:

<TABLE>   </TABLE>

Ezzel a kóddal a táblázat elején és végén találkozunk. Ez jelzi a böngészőnek, hogy most egy táblázatot kell készítenie.

<TABLE>
   <TR>
      <TD> 1.sor-1.cella </TD>
      <TD> 1.sor-2.cella </TD>
   </TR>
   <TR>
      <TD> 2.sor-1.cella </TD>
      <TD> 2.sor-2.cella </TD>
   </TR>
</TABLE>

A kezdő elemben helyezhetjük el a táblázat egészére vonatkozó tulajdonságok meghatározását. Ilyen tulajdonságok lehetnek:

  • vízszintes igazítás a képernyőn: lehet jobbra(right), balra(left) vagy középre(center) igazítani.
    Például <TABLE align="center"> az ablak közepére igazítva:
    szöveg szöveg
    szöveg szöveg


  • cellák szövegének a távolsága a cella szélétől Értékét pixelben adjuk meg.
    <TABLE cellpadding="15">
    szöveg szöveg
    szöveg szöveg


  • cellák távolsága egymástól Értékét pixelben adjuk meg.
    <TABLE cellspacing="15">
    szöveg szöveg
    szöveg szöveg


  • a táblázat kerete Vastagságát pixelben adjuk meg. Ha nem határozunk meg vastagságot, vagy 0 pixelnek vesszük, a böngésző keret nélkül fogja a táblázatot megjeleníteni.
    <TABLE border="5"> <TABLE border="0">
    szöveg szöveg
    szöveg szöveg
    szöveg szöveg
    szöveg szöveg


  • táblázat szélessége megadható pixelben vagy a rendelkezésre álló hely százalákában. A táblázat legalább ilyen széles lesz.
    <TABLE width="500">
    szöveg szöveg
    szöveg szöveg


  • táblázat magassága megadható pixelben vagy a rendelkezésre álló hely százalákában. A táblázat legalább ilyen magas lesz.
    <TABLE height="250">
       
       


  • háttérszín megadható RGB, hexadecimális kóddal, vagy a defíniált szín nevével.
    <TABLE bgcolor="lightblue">
       
       


  • a keret színe megadható RGB, hexadecimális kóddal, vagy a defíniált szín nevével.
    <TABLE bordercolor="red">
       
       

A színkódokról itt olvashatsz részletesebben.
A böngészők által név szerint is értelmezett színek listáját itt találod.
Figyelmedbe ajánlom ezt a színkódolót tetszetős színárnyalatok gyors kipróbálásához.

A TABLE elem használata kötelező.
A TABLE elemről itt is olvashatsz...

fel...


<CAPTION>   </CAPTION>

Ezzel a kóddal címet adhatunk a táblázatunknak. A cím a táblázat fölött, középre rendezve fog megjelenni.

<TABLE>
<CAPTION> ez a cím helye </CAPTION>
   <TR>
      <td> 1.sor-1.cella </td>
      <td> 1.sor-2.cella </td>
   </TR>
   <TR>
      <TD> 2.sor-1.cella </TD>
      <TD> 2.sor-2.cella </TD>
   </TR>
</TABLE>
ez a cím helye
1.sor 1.cella 1.sor 2.cella
2.sor 1.cella 2.sor 2.cella

A CAPTION elem használata opcionális (nem kötelező).
A CAPTION elemről itt is olvashatsz...

fel...


<TH>   </TH>

Ezzel a kóddal a táblázatunk oszlopainak vagy sorainak adhatunk kezdő fejlécet. A fejlécet a legfelső adatsor felett, illetve az első cella előtt kell elhelyezni és ott fog megjelenni. Tartalmát a böngészők kiemelve jelenítik meg.

<TABLE>
   <TR>
      <TH> 1. oszlop </TH>
      <TH> 2. oszlop </TH>
   </TR>
   <TR>
      <TD> 1.sor-1.cella </TD>
      <TD> 1.sor-2.cella </TD>
   </TR>
   <TR>
      <TD> 2.sor-1.cella </TD>
      <TD> 2.sor-2.cella </TD>
   </TR>
</TABLE>
1.oszlop 2.oszlop
1.sor.1.cella 1.sor.2.cella
2.sor.1.cella 2.sor.2.cella

A TH elem használata opcionális (nem kötelező).

fel...


<TR>   </TR>

Ezzel a kóddal a táblázatunk sorait kezdjük és fejezzük be.

<TABLE>
   <TR>    <----------------------itt kezdődik az első sor
      <TD> 1.sor-1.cella </TD>
      <TD> 1.sor-2.cella </TD>
   </TR>    <---------------------eddig tart az első sor
   <TR>    <----------------------itt kezdődik az második sor
      <TD> 2.sor-1.cella </TD>
      <TD> 2.sor-2.cella </TD>
   </TR>    <---------------------eddig tart az második sor
</TABLE>

A sorokra az alábbi tulajdonságokat szoktuk meghatározni:

  • háttérszín: megadható RGB, hexadecimális kóddal, vagy a defíniált szín nevével.
    Például:<TR bgcolor="yellow">
    szöveg szöveg
    szöveg szöveg


  • sor igazítása A vízszintes igazítás right(jobbra), center(középre), left(balra) és justify(sorkizárt), a függőleges igazítás top(tetejéhez), center(középre) és bottom(aljához) értékekkel történhet. Az igazítás a sor összes cellájára vonatkozik.
    <TR align="right">
    szöveg szöveg
    szöveg szöveg


  • sor magassága Értékét pixelben vagy a rendelkezésre álló hely százalékában adjuk meg.
    <TR height="100">
    szöveg szöveg
    szöveg szöveg
    (ezt az attribútumot a Netscape böngésző nem jeleníti meg. Érdemes egyidejűleg/vagy a TD elem magasságát is megadni.

A TR elem használata kötelező.
A TR elemről itt is olvashatsz...

fel...


<TD>   </TD>

Ezzel a kóddal a táblázatunk celláit kezdjük és fejezzük be. Itt lehet a táblázat megjelenítendő tartalmát elhelyezni.

<TABLE>
   <TR>
      <TD> 1.sor-1.cella </TD>
      <TD> 1.sor-2.cella </TD>
   </TR>
   <TR>
      <TD> 2.sor-1.cella </TD>
      <TD> 2.sor-2.cella </TD>
   </TR>
</TABLE>

A cellákra az alábbi tulajdonságokat szoktuk meghatározni:
(a példáknál jelölve van a cella, amelyikre meghatároztuk a tulajdonságot)

  • háttérszín: megadható RGB, hexadecimális kóddal, vagy a defíniált szín nevével.
    Például:<TD bgcolor="#FF0000">
    minta szöveg
    szöveg szöveg


  • a cella szélessége Értékét pixelben vagy a rendelkezésre álló hely százalékában adjuk meg. A böngésző legalább ilyen méretben fogja a cellát megjeleníteni, a szöveget több sorra töri, hogy kiférjen. Ha viszont a tartalma ennél nagyobb (pl. kép megadott méretekkel), akkor a cella felveszi a tartalom méreteit.
    <TD width="70%">
    minta szöveg
    szöveg szöveg


  • a cella magassága Értékét pixelben vagy a rendelkezésre álló hely százalékában adjuk meg. A böngésző legalább ilyen méretben fogja a cellát megjeleníteni, ha viszont a tartalma ennél nagyobb (pl. kép megadott méretekkel vagy hosszabb szöveg), akkor a cella felveszi a tartalom méreteit.
    <TD height="100">
    minta szöveg
    szöveg szöveg


  • a cella tartalmának vízszintes igazítása: lehet jobbra(right), balra(left) vagy középre(center) igazítani. Alapértelmezett: balra.
    Például:<TD align="right">
    minta szöveg
    szöveg szöveg


  • a cella tartalmának függőleges igazítása: lehet a tetejéhez(top), az aljához(bottom) vagy középre(center) igazítani. Alapértelmezett: középre.
    Például:<TD valign="top">
    minta szöveg
    szöveg szöveg


  • a cella több egymás melletti cellahelyen jelenjen meg. Ekkor természetesen annyival kevesebb cellát kell az adott sorban elhelyezni, ahány cellát ez elfoglal.
    Így írjuk:<TD colspan="2">
    minta
    szöveg szöveg


  • a cella több egymás alatti cellahelyen jelenjen meg. Ekkor az alatta levő sorokban kell eggyel kevesebb cellát elhelyezni.
    Így írjuk:<TD rowspan="2">
    minta szöveg
    szöveg

A TD elem használata kötelező.
A TD elemről itt is olvashatsz...

fel...


Foglaljuk össze az eddigieket: Készítsünk egy olyan táblázatot, amiben szerepelnek a felsorolt attribútumok és jelenítsük is meg:

<TABLE width="300" border="5" bordercolor="#FF0000" align="center"
                         cellpadding="10" cellspacing="20" bgcolor="#00FFFF">
   <TR>
      <TD colspan="3" align="right"> 1.sor-1-3.cella </TD>
   </TR>
   <TR>
      <TD rowspan="2" valign="top" bgcolor="blue"> 2-3.sor 1.cella egyben </TD>
      <TD> 2.sor-2.cella </TD>
      <TD> 2.sor-3.cella </TD>
   </TR>
   <TR bgcolor="yellow">
      <TD> 3.sor-2.cella </TD>
      <TD> 3.sor-2.cella </TD>
   </TR>
</TABLE>

Ez megjelenítve a következőképpen néz ki:

1.sor 1-3.cella egyben
2-3.sor 1.cella egyben 2.sor 2.cella 2.sor 3.cella
3.sor 2.cella 3.sor 3.cella

fel...


Fontos még tudni a következőket:

A táblázatokat egymásba is lehet illeszteni. Tehát egy táblázati cellában elhelyezhetünk egy teljes új táblázatot is.

Ha nagyméretű, sokcellás táblázatot tervezünk weblapunkra, tudnunk kell, hogy a böngészők a táblázat tartalmát csak akkor jelenítik meg, amikor az egész táblázat, tehát a zárótag is, letöltődött. Ez késleltetheti a lapunk megjelenítését. Tanácsos ilyenkor több kisebb táblázatot használni egy nagy helyett.

Ezekről és a többi táblázati elemről részletes leírást itt olvashatsz.
Táblázatokkal kapcsolatos tippeket itt találsz.

fel...


 
Próbálj te is készíteni egy táblázatot. Az alábbi kódban változtass kedved szerint, aztán nézd meg, amit alkottál:

   

 



fel...
előző: képek beillesztése...
következő: felsorolások, listák...
tartalom...


ThomasWebMűhely
(c)Katona Tibor
2001-2002