A későbbi fejezetben a CSS dobozmodelljével részletesebben foglalkozunk. Most elöljáróban ismerkedjünk meg pár olyan beállítással, amit a táblázatok formázásánál kihasználhatunk.
Szegélyt a border attribútummal állíthatunk be. A paraméter után meg kell adnunk a szegély méretét, a stílusát és a színét. Például:
Ha a <table> tagre állítunk be szegély, akkor az csak a táblázat körül fog megjelenni. Ha belső szegélyt is szeretnénk, akkor a <td> és <th> elemekre is be kell állítanunk azt!
Példa - Táblázat külső szegély beállítása
Mivel a szegélyt a table szelektorra vonatkozóan adtuk meg, csak a táblázat körül van szegély.
Példa - Táblázat külső és belső szegélyének beállítása
Most a table,td,th szelektort használtuk, ezért a táblázat körül és az adat- és fejléc cellák körül is megjelenik a szegély. Viszont az egyes cellák között üres hely van.
A border-collapse tulajdonság segítségével a celláink körüli szegély megjelenítését befolyásolhatjuk.
Értékek:
Példa - Táblázatszegély összevonása
A table szelektorra megadott border-collapse:collapse; definíció miatt a szegélyek összevonásra kerülnek.
Szebben tagolt táblázatot kapnánk, ha a cellák tartalma és a szegély között nagyobb távolság lenne. Ezt a padding tulajdonsággal állíthatjuk be. A padding:5px; egy 5 képpont vastag belső kitöltést ad a celláknak.
A border tulajdonsággal részletesebben foglalkozunk később a stíluslapokról szóló fejezetben.
Példa - Táblázat szegély és belső kitöltés
A táblázat most áttekinthetőbb, mert az adat- és fejléccellákra egy belső kitöltést (padding) is beállítottunk.
  |
 |
 |
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.