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