b{}xm{}dels.toxin.hu

Témához kapcsolódó előző bejegyzésben szerepelő statikus blokk elemeknek egyik hátrányos tulajdonsága volt, hogy tartalomszélesre nem lehetett őket méretezni, emlékezzünk tartalmazóelem szélesek(width:auto) vagy fix szélességűek(width:+ÉRTÉK) voltak. Hasonló problémák merülnek fel az inline elemekkel kapcsolatban is, méretezni a normál szövegfolyamban ezeket nem lehet, csak ha pozicionáljuk vagy úsztatjuk őket. Előbbi szempontból vizsgálva, az e bejegyzés témáját adó, tábla elem a legrugalmasabb, lévén jobbra-balra-középre igazíthatjuk, méretezhetjük, tartalmazó vagy tartalomszélesre is állíthatjuk őket. Esetleg érdemes e pontban áttekinteni a boxmodellek és a width CSS tulajdonság kapcsolatát elemző bejegyzést is.

A bejegyzéshez tartozó minta, nagyon hasonló a statikus blokkoknál alkalmazotthoz, lássuk is…

HTML minta

<table><tr><td>TARTALOM</td></tr></table>

CSS minta

Balra-igazított Tartalomszéles Statikus Tábla

SZELEKTOR { position:static;
width:auto; margin-left:0; margin-right:auto; }

Középre igazított Tartalomszéles Statikus Tábla

SZELEKTOR { position:static;
width:auto; margin-left:auto; margin-right:auto; }

Jobbra-igazított Tartalomszéles Statikus Tábla

SZELEKTOR { position:static;
width:auto; margin-left:auto; margin-right:0; }

Tartalmazóelem széles Statikus Tábla

SZELEKTOR { position:static;
width:100%; margin-left:0; margin-right:0; }

Balra-igazított Sized Statikus Tábla

SZELEKTOR { position:static;
width:+VALUE; margin-left:0; margin-right:auto; }

Középre igazított Méretezett Statikus Tábla

SZELEKTOR { position:static;
width:+ÉRTÉK; margin-left:auto; margin-right:auto; }

Jobbra-igazított Méretezett Statikus Tábla

SZELEKTOR { position:static;
width:+ÉRTÉK; margin-left:auto; margin-right:0; }

A fenti minta táblaelemeken alkalmazható, különösebb probléma nincs vele, igazítás után, hasonlóan a statikus blokkokékhoz, eltolás is lehetséges. A fentebb írtak megtekinthetőek a példafájl segítségével is.