 |
| Eredmény |
BORDER
A táblázat keretének tulajdonságait adhatjuk meg vele. Azért kell a table elemre és a td elemre is ezeket a tulajdonságokat adni, mert ha csak a table-re rakom, akkor csak külső keret lesz, ha pedig csak a td-re, akkor belső keret lesz.
table, td{
border-width:10px;
border-style:solid;
border-color:yellow;
}
- border-width: a keret vastagságát adhatjuk meg szóval vagy pixellel. Lehetséges értékeit itt megnézhetitek.
- border-style: a keret stílusát adhatjuk meg. Lehetséges értékeit itt kipróbálhatjátok.
- border-color: a keret színét adhatjuk meg a már megtanult módon.
Ennek a három sornak van egy rövidítése is:
table, td{
border: 10px solid yellow;
}
Tehát az értékeket a megadott sorrendben (width, style, color), szóközzel elválasztva adjuk meg. Ez ugyan azt csinálja, mint az előbbi 3 sor.
Felmerülhet a kérdés, hogy mi van akkor, ha nem egyforma keretet akarunk minden oldalra. A megadás módja a következő:
table td{
border-top: 10px solid yellow;
border-right: 5px dotted purple;
border-bottom: 15px dotted blue;
border-left: 120px dotted green;
}
Ha csak az egyik tulajdonságot szeretnénk megváltoztatni, akkor a 4 sort lerövidíthetjük:
table, td{
border-width: 10px 5px 15px 120px;
}
Tehát az értékeket a meghatározott sorrendben (felső, jobb, alsó, ball <-- óramutató járása), szóközzel elválasztva adjuk meg. Ez ugyan azt csinálja mint ez:
table, td{
border-top: solid yellow;
border-left: dotted purple;
border-bottom: dotted blue;
border-right: dotted green;
border-width: 10px 5px 15px 120px;
}
COLLAPSE:
Nehéz megmagyarázni, hogy mit csinál, de megpróbálom. Szóval ha az értéke collapse, akkor a cellák összeérnek, ha pedig separate, akkor nem. De ha megnézitek a két képet, mindjárt érthetőbb lesz:
 |
| collapse |
 |
| separate |
TÁBLÁZAT MÉRETEZÉSE:
Táblázatot is ugyan úgy méretezhetünk mint a legtöbb elemet. A width értéke a szélességet, a height pedig a magasságot adja meg. Már említettem, hogy vannak relatív és abszolút értékek. Ha a width-nek mondjuk 500pixelt adunk meg, akkor az minden képernyőméreten és felbontáson 500pixel lesz, azonban ha mondjuk 100%-ot, akkor az a képernyő méretétől és felbontásától függetlenül kitölti a teljes széleséget.
table{
width:500px;
height:300px;
}
 |
| Eredmény (bordert és collapse-t változtattam a jobb láthatóság érdekében) |
SZÖVEGIGAZÍTÁSOK A TÁBLÁZATON BELÜL:
Lehetőségünk van (úgy mint a HTML-kódban is) a szöveg vízszintes igazítására a cellán belül. Ezt a text-align segítségével tehetjük meg. A függőleges igazítás pedig a vertical-align segítségével valósítható meg.
td{
taxt-align:center;
vertical-align:center;
}
ELTARTÁS:
 |
| Eredmény (borderen és collapse-n állítottam még) |
A doboz modellnél fogjuk részletesen tanulni, de táblázatokhoz is hozzátartozik az eltartás. Az eltartás a szöveg távolsága a kerettől a cellán belül. Tehát a szöveg nem pont a cella szélénél kezdődik, hanem a megadott értékkel odébb.
td{
padding:15px;
}
Itt is lehetőség van különböző eltartások megadására a különböző oldalakon:
td{
padding-top:15px;
padding-right:10px;
padding-bottom:20px;
padding-left:5px;
}
Ez megfelel (mint az előbb) a következő sornak:
td{
padding:15px 10px 20px 5px;
}
TÁBLÁZAT SZÍNEZÉSE:
Lehetőségünk van a táblázat elemeinek színezésére is a background-color (háttérszín) és a color értékének megadásával.
td{
background-color: yellow;
color:green;
}
Ilyenkor a háttérszíne a celláknak sárga, a betűszín pedig zöld.
Ennyit kell tudnunk a táblázatokról egyelőre. Hétfőn elkezdjük a doboz modellt megismerni. Jó hétvégét mindenkinek :D
Szia :)
VálaszTörlésAzt szeretném megkérdezni, hogy hogy tudok a css-ben egy-egy cellára hivatkozni, pl ha csak az egyik cellának a background-color tulajdonságát akarom módosítani? Illetve ezt a táblázat css-én kívül kell e végrehajtani?
Nem 100% de ha a html-ben az adott cellának a tag-jébe egy id="megjelolt" -et írsz lezárás előtt, majd erre a css-file-ban a .megjelolt- el tudsz rá hivatkozni ,és így formázhatod, remélem tudtam segíteni.
VálaszTörlésKöszönöm a segítséget!
VálaszTörlés