Táblázatot létrehozni egy kicsit bonyolultabb dolog már, hiszen meg kell adni a sorok, cellák elejét, végét, stb. Nehezebb megérteni, de ha egyszer megérted, akkor utána könnyű lesz.

Először is a táblázat létrehozására szükséges alap tag:

<table>
...táblázat...
</table>

A táblázatban még szükség lehet a következő tagre <table> szülő után, viszont ez nem kötelező, de berakható:

<table>
<tbody>
...táblázat...
</tbody>
</table>

Most, hogy tudjuk, hogyan kezdjünk neki egy táblázatnak, jöhetnek a sorok. A táblázat sorokból, és cellákból áll, az oszlopokat nem számítjuk. Egy sor több cellából is állhat, és természetesen a többi sor is állhat különböző mennyiségű cellákból. Ezért nem mondjuk, hogy oszlopokat számolunk. Csak sorokat, és cellákat. A cella létrehozásának alap tage: (természetesen a táblázat alap tagei közé zárva)

<tr>
...sor tartalma...
</tr>

Új sort mindig <tr> taggel kezdhetünk, és természetesen ebbe jöhetnek a cellák. A cellák tage a <td>, minden cellát ezzel nyitunk és zárunk. Tehát, ez így néz ki:

<tr>
<td>
...1. cella tartalma...
</td>
<td>
...2. cella tartalma...
</td>
</tr>

Az egyes cellákat pedig a következőképpen formálhatod:

<td align="center" valign="top" width="200"heigth="40">
...cella tartalma...
</td>

align: cella tartalmának igazítása vízszintesen. Értéke lehet: left(balra) center(középen) right (jobbra)

valign: cella tartalmának igazítása függőlegesen. Értéke lehet: top(felül) center(középen) bottom (alul)

height,width: magasság és szélesség, pixelben adjuk meg

 

Most pedig egy teljes táblázatot láthattok az eddigiek alapján felépítve: (2 soros, 2 oszlopos táblázat, vagyis mindegyik sorban 2 cella van)

<table>
<tr>
<td>
első sor első cellájának tartalma
</td>
<td>
első sor második cellájának tartalma
</td>
</tr>
<tr>
<td>
második sor első cellájának tartalma
</td>
<td>
második sor második cellájának tartalma
</td>
</tr>
</table>

Tehát mindig <table> nyitótaggel kell kezdeni, és utána új sor létrehozásához kell a <tr> abba pedig <td>-vel a cellákat. Remélem, azért érthető :)

 

Most pedig a <table> tagbe rakható alap beállításokról lesz szó. Ha a táblázatnak nem szeretnél se keretet, se semmit, ami bezavarhat, akkor ezeket a kódokat jó, ha beilleszted a táblázatod <table> tagjébe:

<table cellpadding="0" cellspasing="0" border="0">
...táblázat tartalma...
</table>

 cellpadding: cellák paddingja. Ha 0, akkor nincs

cellspacing: cellák közötti szünet. Ha 0, akkor nincs

border: táblázat kerete, ha 0, akkor nincs

Ha minden érték 0, akkor a táblázat cellái pontosan egymás mellé illeszkednek mindenféle szünet nélkül.

 

Ennyi lett volna a táblázatkód ismertetése, ha elsajátítottad, akkor egyszerű lesz a későbbiekben. Sok sikert hozzá, és ne feledd, bármikor felteheted a kérdéseidet az oldalon.

 


Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *