Tamás Ferenc: Weblapkészítés HTML alapokon – 9. rész
CSS alapismeretek 4. rész
23.1. fejezet: CSS alapismeretek – Táblázatok
Táblázatot a HTML nyelv segítségével elég egyszerűen hozhatunk létre, de a CSS segítségével már elég változatossá is tehetjük. Ez a leírás csak pár fontos tulajdonságot ír le.
Táblázat határa: Ez a szokásos border tulajdonság, amit alkalmazhatunk a táblázat minden lényeges elemére (table, th, tfoot, td, tr). Példa:
table, th, td {
border: 1px solid black;
}
Megjegyzés: ezzel a kódrészlettel dupla vonalas táblázatot hozunk létre, mivel keretet adunk egyrészt a táblázat egyes celláinak (td), illetve magának a táblázatnak (table) is.
Teljes kód: htmlpelda39.html.
Táblázat határainak egyszerűsítése: ha a fenti problémát szeretnénk elkerülni, akkor érdemes ezt a tulajdonságot befűzni, így már csak sima vonalas lesz a táblázatunk. Példa:
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
Teljes kód: htmlpelda40.html.
Megjegyzés: ha csupán a táblázat körül szeretnénk keretet, akkor elegendő a table tagnek megszabni a tulajdonságait.
Magasság és szélesség: ezek a megszokott width, illetve height elemek. Példa:
table {
width: 100%;
}
th {
height: 50px;
}
Vízszintes rendezettség: ez is a máshol már megismert tulajdonság. Lehetséges értékei: left, right, center, Szokásos előfordulási helyei: th, td. Példa:
td {
text-align: right;
}
Függőleges rendezettség: lehetséges értékei: top, bottom, middle. Szokásos előfordulási helyei: th, td. Példa:
td {
height: 50px;
vertical-align: bottom;
}
Helyhagyás: (padding) a táblázat egyes elemei körül mekkora üres hely legyen. Érdemes figyelni a táblázat egyes celláinak értékeire! Szokásos előfordulási helyei: th, td. Példa:
th, td {
padding: 15px;
text-align: left;
}
Táblázat színei: az egyes elemeket a szokásos módon lehet színezni. A lenti példában a táblázat fejléce zöld háttérszínű lesz fehér karakterekkel:
th {
background-color: #4CAF50;
color: white;
}
A fejezet leghitelesebb forrása: https://www.w3schools.com/css/css_table.asp
- Előző
- Következő >>