4. Táblázatok

Html-ben a táblázatok három elemből épülnek fel: table (maga a tábla), tr (sorok), td (oszlopok).

Táblázat használata az oldalon előnyös rendezés szempontjából, vagy akármire amit táblázat szerűen szeretnénk megjeleníteni.

Alapvetően így épül fel:

<table>

<tr>

<td>

</td>

</tr>

</table>

Ez egy egy sorral és egy oszloppal rendelkező táblázat. Attól függően hogy mennyi sort vagy oszlopot szeretnénk, annyival kell megtoldani a kódot.

<table>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

Ez a táblázat egy sorral, és három oszloppal rendelkezik.

<table>

<tr>

<td></td><td></td>

</tr>

<tr>

<td></td><td></td>

</tr>

</table>

Ennek a táblázatnak két sora és két oszlopa van.

Táblázatnak ugyanúgy lehet kinézetet adni mint egy div-nek, vagy p-tag-nek. Vagy a html kódban manuálisan írunk bele mindent az adott helyre style=”” megoldással, vagy adunk neki egy class elnevezést, és majd később a css kódban adjuk meg a kinézetét. Utóbbit ajánlanám, az a legegyszerűbb ha mindennek aminek stílust akarunk adni, annak adunk egy id-t vagy egy class-t, mert ha később ugyanazt a stílust át szeretnénk vinni jelen esetben pl egy másik táblázatra, akkor nem kell az egész style=”” részt kimásolni, ami ha már csak egy háttérszínt, betűméretet, betűszínt teszünk bele szép hosszú lesz, és ezt másolgatni minden táblázatba a megfelelő helyre, hanem csak a class/id nevét kell beírni oda, ahol azt a kinézetet szeretnénk használni.

Erre a hosszú-rövid módszerre példa:

Hosszú verzió:

<table style=”background-color:#cdcdcd; font-size:15px; color:#000000; font-family: times new roman;”>

<tr>

<td></td>

</tr>

</table>

Rövid verzió:

<table class=”tablazat”>

<tr>

<td></td>

</tr>

</table>

css oldala:

.tablazat{

background-color:#cdcdcd;

font-size:15px;

color:#000000;

font-family: times new roman;

}

Utóbbinál .tablazat {} segítségével tudjuk a css kódban ugyanaz megadni neki, amit fent a hosszabb módszernél, viszont itt akármelyik táblázatnál akarjuk használni ezt a stílust nem azt a hosszú kódot kell másolgatni a html fájlunkban, hanem csak a class=”tablazat” részt.

Megjegyzés: szabadság az egészben, hogy stílust tudsz adni az egész táblázatra vonatkozóan ha a table tag-be szúrod be, tudsz egyenként minden sorra külön kinézetet szabni ha a tr tag-be szúrod be, és oszloponként is ha a td tag-be szúrod be. Csili-vili, minden sor és oszlop különböző színűre beállítását is meg lehet csinálni 🙂

<table border=1 width=100 height=100>
<tr>
<td style=”background:#85E456;”></td><td style=”background:#569FE4;”></td><td style=”background:#E456C4;”></td>
</tr>
<tr>
<td style=”background:#E4565D;”></td><td style=”background:#56E4C8;”></td><td style=”background:#E4DF56;”></td>
</tr>
<tr>
<td style=”background:#56E485;”></td><td style=”background:#E47756;”></td><td style=”background:#6A56E4;”></td>
</tr>
</table>

Ha minden igaz ilyen végeredményt kellett kapnotok:

kocka

És talán a legjobb példa a táblázatra, egy órarend 🙂

<table border=1>
<tr>
<td></td><td>Hétfő</td><td>Kedd</td><td>Szerda</td><td>Csütörtök</td><td>Péntek</td>
</tr>
<tr>
<td>1. óra</td><td>Matematika</td><td>Történelem</td><td>-</td><td>Testnevelés</td><td>Osztályfőnöki</td>
</tr>
<tr>
<td>2. óra</td><td>Nyelvtan</td><td>Rajz</td><td>Irodalom</td><td>Angol</td><td>Német</td>
</tr>
<tr>
<td>3. óra</td><td>Irodalom</td><td>Informatika</td><td>Nyelvtan</td><td>Matematika</td><td>Irodalom</td>
</tr>
<tr>
<td>4. óra</td><td>-</td><td>Földrajz</td><td>Ének</td><td>Történelem</td><td>Nyelvtan</td>
</tr>
<tr>
<td>5. óra</td><td>Testnevelés</td><td>Angol</td><td>Matematika</td><td>-</td><td>Angol</td>
</tr>
</table>

orarend