Ez a tanulmány útmutatást ad a táblák CSS-sel történő stílusához.
Hogyan alakítsunk ki táblázatot CSS-sel?
Ahhoz, hogy stílusokat alkalmazhassunk a táblázatban, az alábbi lépéseken megyünk keresztül.
1. lépés: Hozzon létre egy táblázatot HTML-ben
< asztal >
< felirat > Diákok információi < / felirat >
< thead >
< tr >
< th > Név < / th >
< th > Tanfolyam < / th >
< th > Marks < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > Vilmos < / td >
< td > Hálózatépítés < / td >
< td > 89 < / td >
< / tr >
< tr >
< td > Jack < / td >
< td > Bevezetés a C++-ba < / td >
< td > 97 < / td >
< / tr >
< tr >
< td > József < / td >
< td > Bevezetés a Java-ba < / td >
< td > 77 < / td >
< / tr >
< / tbody >
< / asztal >
Táblázat létrehozásához HTML-ben a következő HTML elemeket kell használni:
- '
” elem egy táblázat létrehozására szolgál HTML-ben. - '
” elemet arra használjuk, hogy feliratot adjunk a táblázathoz. - ' ” a táblázat fejlécének megadására szolgál, amely általában tartalmazza a címsorokat.
- '
” sor hozzáadására szolgál. - '
” adja meg a címsor tartalmát. - ' ” a táblázat törzsrészét határozza meg.
A létrehozott táblázat jelenleg így néz ki:
Lássuk, hogyan alakítsuk ki ezt a táblázatot.
2. lépés: A „test” elem stílusa
test {
font-család: Verdana, Genf, Tahoma, sans-serif;
háttér- szín : rgb ( 233 , 233 , 233 ) ;
}A
elem a következő CSS stílustulajdonságokkal kerül alkalmazásra:- ' betűtípus család ' ingatlan ' értékkel' Verdana, Genf, Tahoma, sans-serif ” a böngésző által támogatott betűtípus alkalmazására szolgál. Ha a böngésző nem támogatja az első betűstílust, a másikat fogja használni.
- ' háttérszín ” tulajdonság beállítja az elem háttérszínét.
3. lépés: A „felirat” elem stílusa
felirat {
betűtípus- méret : 25 képpont;
szöveg- igazítsa : középen;
háttér- szín : #1C6758;
szín : kukoricaselyem;
}A
elem stílusa a következő: - ' betűméret ” tulajdonságot használjuk a betűméret beállításához.
- ' szöveg igazítás ” tulajdonság határozza meg az elem szövegének igazítását.
- ' szín ” tulajdonság az elem betűszínére utal.
Íme a fent megadott kód kimenete:
4. lépés: Szegély hozzáadása a táblázathoz
Az ' határ ” tulajdonság segítségével szegélyt adunk az elem köré. Ez egy gyorsírási tulajdonság, amely meghatározza a szegély szélességét, stílusát és színét.Alkalmazzuk a szegélyt, a kitöltéssel és a margót a táblázatra:
táblázat, th, td {
határ : 2px tömör #1C6758;
padding: 1px 6px;
margó: auto;
}Itt:
- ' határ ” tulajdonság beállítja a szegélyt a táblázat körül a szegély szélességének, a keret stílusának és a szegély színének megadásával.
- ' párnázás ” az elem tartalma körüli teret határozza meg, ahol az első érték a felső-alsó teret határozza meg, a második érték pedig a tartalom jobb és bal oldalán.
- ' árrés ' ingatlan ' értékkel' auto ” egyenlő helyet ad az elem körül.
Kimenet
jegyzet : Ha nem szeretnénk szóközöket a táblázat szegélyei között, használjuk a border-collapse tulajdonságot.
5. lépés: Szegélytávolság összecsukása a táblázatból
border-collapse: összeomlás;
A táblázatszegélyek közötti szóközök a „ határ-összeomlás ” tulajdonság „összeomlás” értékkel:
6. lépés: Állítsa be az asztal méretét
thead th {
Nézzük meg, hogyan állíthatjuk be a táblázat méretét:
szélesség : 160 képpont;
}A hozzáadott ' szélesség ” tulajdonság a
elemmel automatikusan ennek megfelelően módosítja a táblázat méretét:: 
Stílusokat is alkalmazhatunk az adott táblázatcellára. Beszéljük meg őket!
7. lépés: Stílus specifikus táblázatcellák
< td osztály = 'Kiemel' > 99 < / td >
Az adott táblázatcella stílusához adja meg az adott cella osztálynevét. Például az alábbi kód azt jelzi, hogy a második sor harmadik cellájához osztálynév van rendelve ' Kiemel ”:Most nyissa meg a cellát a CSS-fájlban található osztálynévvel:
.Kiemel {
háttér- szín : #0f90d5;
}Az ' .Kiemel ” a
elem osztálykiemelésére utal. Ezt az elemet a ' háttérszín ” tulajdonság a háttér színének megadásához. Amint látjuk, a megadott táblázatcella stílusa sikeresen megtörtént:
8. lépés: Állítsa be a betűtípuscsaládot és a táblázat méretét
asztal {
font-family: cursive;
betűtípus- méret : 18px;
szöveg- igazítsa : középen;
}A következő CSS-tulajdonságok kerülnek alkalmazásra a táblázatelemre:
- ' betűtípus család ” tulajdonság beállítja az elem betűstílusát.
- ' betűméret ” tulajdonságot használják az elem betűtípusának beállítására.
- ' szöveg igazítás ” tulajdonság a szövegigazítás beállítására szolgál.
Íme a kimenet:
9. lépés: Színezze ki a sorokat sorrendben
\
Ezenkívül megengedett a stílusok alkalmazása bizonyos sorokra vagy oszlopokra. Például a páros sorok stílusa az alábbi formátum szerint történik:
tbody tr:nth-child ( még ) {
háttér- szín : #FFB200;
}Itt:
- Az ' :n-edik gyerek(páros) ” pszeudo szelektor egy argumentum felvételére szolgál, amely meghatározza azt a mintát, amelyen a stílust alkalmazni kell.
- ' háttérszín ” tulajdonságot használják az elem háttérszínének beállítására.
Megfigyelhető, hogy a háttérszínt sikeresen alkalmazzák a páros sorokra:
Ez a táblák CSS-sel történő stílusozásáról szólt
Következtetés
A táblázatok fontos eszközök az adatok rendszerezésére. A táblázat a HTML
,
, és további elemek használatával hozható létre. Számos CSS-tulajdonságot használnak a táblázat stilizálására, mint például a keret, a háttérszín tulajdonság, a font-család tulajdonság és még sok más. A jobb megértés érdekében ez az írás lépésről lépésre ismerteti a táblázat stílusának CSS-sel történő kialakítását. - '