CSS - intermediate - Lecke száma 7
Táblázatok formázása
Ebben a leckében táblázatokat formázunk. Ehhez újabb HTML címkét, CSS tulajdonságokat és egy új szelektort is megismerünk. A táblázat keretezése az eddig tanult szövegkeretezéssel azonos módon történik, de szükség van a cellák és a táblázat kereteink összeolvasztására. A keretezés mellett a körvonalat is kipróbáljuk, ez nemcsak táblázatokra használható, akárcsak a függőleges igazítás. Megtanulunk formázni sorokat és oszlopokat külön a táblázaton belül.
Új HTML címkék ebben a leckében:
<col> - ez a címke arra alkalmas, hogy egy táblázat oszlopait különbözőképpen formázhassuk. Nem kell zárócímke.
<colgroup> - ezt a címkét több <col> címke összefogására használjuk.
Új CSS kulcsszavak ebben a leckében:
outline – ez a tulajdonság alkalmas arra, hogy a kereten kívül körvonalat húzhassunk. Ugyanúgy működik nagyjából mint a keret. Az outline tulajdonságnak (a border-hez hasonlóan) megadhatjuk a vastagságot, színt és típust. Pontosíthatunk, ha az outline-style (stílus/típus), outline-color (körvonal színe), outline-width (körvonal vastagsága), outline-offset (körvonal távolsága a kerettől).
border-collapse – ez a tulajdonság alkalmas arra, hogy az egymás melletti kereteket összevonja.
vertical-align – ez függőleges igazítást jelent, nem csak táblázatok esetén lehet használni. Néhány lehetséges érték: middle (közép), top (fel), bottom (le).
Új CSS szelektor ebben a leckében:
:nth-of-type(…) – ezt a szelektort egy HTML címkéhez rendelhetjük a CSS fájlban, így csak bizonyos előfordulásait színezve. A zárójelbe írhatunk számot, képletet vagy az odd (páratlan) vagy az even(páros) szavakat. Például az even értékre minden második előfordulását formázzuk az adott címkének.
Kiegészítések:
Példa körvonalra:
Új HTML címkék ebben a leckében:
<col> - ez a címke arra alkalmas, hogy egy táblázat oszlopait különbözőképpen formázhassuk. Nem kell zárócímke.
<colgroup> - ezt a címkét több <col> címke összefogására használjuk.
Új CSS kulcsszavak ebben a leckében:
outline – ez a tulajdonság alkalmas arra, hogy a kereten kívül körvonalat húzhassunk. Ugyanúgy működik nagyjából mint a keret. Az outline tulajdonságnak (a border-hez hasonlóan) megadhatjuk a vastagságot, színt és típust. Pontosíthatunk, ha az outline-style (stílus/típus), outline-color (körvonal színe), outline-width (körvonal vastagsága), outline-offset (körvonal távolsága a kerettől).
border-collapse – ez a tulajdonság alkalmas arra, hogy az egymás melletti kereteket összevonja.
vertical-align – ez függőleges igazítást jelent, nem csak táblázatok esetén lehet használni. Néhány lehetséges érték: middle (közép), top (fel), bottom (le).
Új CSS szelektor ebben a leckében:
:nth-of-type(…) – ezt a szelektort egy HTML címkéhez rendelhetjük a CSS fájlban, így csak bizonyos előfordulásait színezve. A zárójelbe írhatunk számot, képletet vagy az odd (páratlan) vagy az even(páros) szavakat. Például az even értékre minden második előfordulását formázzuk az adott címkének.
Kiegészítések:
- A körvonal lehetséges típusa megegyezik a keret lehetséges típusaival. Néhány lehetséges érték: solid (egyszerű), dotted (pontozott), dashed (szaggatott vonal), double (duplavonal).
- A körvonal vastagsága nem számítódik bele az objektumok közötti távolságba.
- A táblák tartalma HTML-ben alapból sorokra van megadva, a formázásuk is cella vagy sorokra történik. A címkét használhatjuk, ha oszloponként szeretnénk formázást alkalmazni, de csak néhány tulajdonság adható meg: keret (border), háttérszín (background-color), szélesség (width) és láthatóság (visibility). Ha oszlop- és sorformázást alkalmazunk egyszerre, próbáljuk elkerülni az egymásnak ellentmondó utasításokat.
- Az :nth-of-type szelektort nemcsak táblázat esetén használhatjuk. Például egy szövegrész minden második bekezdését, egy lista minden második elemét is ugyanúgy formázhatjuk, mint egy táblázat minden második sorát. Nemcsak az even és odd értékeket adhatjuk, konkrét számokat is használhatunk. Például a tr:nth-of-type(2) esetén a táblázat második sorára alkalmazza a formázást a böngésző.
Példa körvonalra:
A fenti példán megfigyelhető az egypixeles kék kereten (border) kívül kétpixeles világoskék pontozott körvonal (outline) látható. Ez a körvonal „nem tolja” el a keretet és az esetleges szomszédos objektumokat, míg a keret igen.
Mivel a keretet a cellára és a táblázatra is alkalmaztuk a stílusfájlban, külön keretet húz a cella és a táblázat köré is, ezért van látszólag dupla keret.
Példa keret összevonásra:
A fenti képen a táblázat az előzőhöz képest össze vannak vonva a keretek, ez a border-collapse tulajdonsággal van megoldva.
A cellák tartalma függőlegesen (vertical-align) és vízszintesen is (text-align) középre van igazítva.
A táblázat szélessége 50%, ami azt jelenti, hogy a böngésző ablak szélességének felét tölti ki (függetlenül az ablak méretétől) a magassága 70 pixel, így jobban látszik a függőleges igazítás.
Példa páros és páratlan sorok formázására:
A fenti példában a páros sorokra világoskék hátteret, a páratlan sorokra szürke hátteret használunk.
Példa oszlopok formázására:
Feladatok
1. Honlapunkhoz három htmldokumentumunk van (toplangs.html, aspect.html, tips.html). Alkalmazon minden táblázatra, táblázat fejlécre, egy folyamatos színes, 1 pixel szélességet, egyenletlen szegélyt. Legyen10 pixel távolság a cellák és a szegély között. Alkalmazon továbbá egy 20 px távolságot a táblázat és az azt őt körülvevő többi elemtől.
Tekintsd meg az eredményt
2. Érd el a toplangs.html-be toplangs.html fájlban a táblázat sorainak színezést. Ehhez azonosítót kell adnunk az adott táblázatnak, el kell távolítanunk a régi sorokat, amelyeket sornak nevezünk, és használjuk az újonnan tanult CSS választót.
Tekintsd meg az eredményt
3. A tips.html fájlban, alkamazza az alábbi beállításokat helyileg (a HTML-címkék belsejében) az alábbi táblázatba: válassz egy háttérszínt az első oszlopnak, a második oszlopnak 6 cm szélesnek kell lennie.
Tekintsd meg az eredményt
4. Ugyanabba a html. a toplangs.html fájlból állítson be egy 2 pixel szélességű, szaggatott vonalat, amely ugyanolyan színű mint a szegély.
Tekintsd meg az eredményt
Kérdőív
1. Mely CSS tulajdonság nem alkalmazható a táblázatok oszlopaira (a < col > tagek használatával)?
2. Melyik nem egy outline típus?
3. Hogyan befolyásolják az alábbi CSS-beállítások a táblázatot?
CSS:
td:nth-of-type(2){
background-color:lightgray;
}
HTML:
<table>
CSS:
td:nth-of-type(2){
background-color:lightgray;
}
HTML:
<table>
<tr> <th>Nr.</th><th>Browser</th><th>Editor</th> </tr>
<tr> <th>1</th> <td>Mozilla Firefox</td> <td>Notepad++</td> </tr>
<tr> <th>2</th> <td>Google Chrome</td> <td>Atom</td> </tr>
</table>4. Mekkora a két bekezdés közötti távolság, ha a következő CSS-stílusuk van?
p {
border: 2px solid red;
outline: 5px solid;
margin: 10px;
}
p {
border: 2px solid red;
outline: 5px solid;
margin: 10px;
}
Kiegészítő információk
https://www.w3schools.com/css/css_outline.asp,
https://www.w3schools.com/css/css_border.asp,
https://www.w3schools.com/css/css_table.asp,
https://www.w3schools.com/css/css_pseudo_elements.asp,
https://www.w3schools.com/tags/tag_col.asp,
https://www.w3.org/TR/CSS21/tables.html#columns,
https://www.w3schools.com/cssref/pr_pos_vertical-align.asp.
https://www.w3schools.com/css/css_border.asp,
https://www.w3schools.com/css/css_table.asp,
https://www.w3schools.com/css/css_pseudo_elements.asp,
https://www.w3schools.com/tags/tag_col.asp,
https://www.w3.org/TR/CSS21/tables.html#columns,
https://www.w3schools.com/cssref/pr_pos_vertical-align.asp.
