CSS táblázat formázás (CSS table)

Egy létrehozott HTML táblázat még nem néz ki valami jól, de szerencsére lehetőségünk van CSS-el nagyon jól megformázni.

CSS táblázat formázás (CSS table)

Arról már tanultunk korábban, hogy hogyan lehet létrehozni egy táblázatot HTML nyelvben, most pedig jöjjön az, hogy ezt a létrehozott táblázatot hogyan formázhatjuk CSS segítségével.

Formázatlan táblázat

Ha szimplán mindenféle CSS formázás nélkül létrehozunk egy táblázatot, akkor az így néz ki:

HTML kód

<table> <tr> <th>Első címsor</th> <th>Második címsor</th> </tr> <tr> <td>1.1 cella</td> <td>1.2 cella</td> </tr> <tr> <td>2.1 cella</td> <td>2.2 cella</td> </tr> </table>
Code language: HTML, XML (xml)

Eredmény

Első címsorMásodik címsor
1.1 cella1.2 cella
2.1 cella2.2 cella

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Valljuk be nem a legszebb látvány, nem is igazán hasonlít egy táblázatra, inkább hasonlít egy szimplán begépelt szövegre. Azért van szükség a táblázat formázására, hogy a táblázat egy szokványosabb kinézetet kapjon, sokkal jobban hasonlítson arra, amit elvárunk egy táblázattól.

Táblázat keret

Első lépésként adjunk a táblázatnak egy szegélyt, keretet. Már ez is sokat dob az összképen. Ezt így tehetjük meg:

table, th, td { border: 1px solid black; }
Code language: CSS (css)

Ezzel a kóddal egy 1 pixeles folytonos fekete vonalat állítunk be a táblázatnak, a th-nak és a td-nek. Ebből kifolyólag dupla vonal fog keletkezni a táblázatunkban, amelyet ezzel a kóddal szüntethetünk meg:

border-collapse: collapse;
Code language: HTTP (http)

Példa

HTML kód

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <table> <tr> <th>Első címsor</th> <th>Második címsor</th> </tr> <tr> <td>1.1 cella</td> <td>1.2 cella</td> </tr> <tr> <td>2.1 cella</td> <td>2.2 cella</td> </tr> </table> </body> </html>
Code language: HTML, XML (xml)

Eredmény

Első címsorMásodik címsor
1.1 cella1.2 cella
2.1 cella2.2 cella

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Táblázat fejléc

Kezd egész jól kinézni a táblázatunk, de még ne álljunk itt meg. Próbáljuk ki most azt, hogy megváltoztatjuk a táblázatunk fejlécének kinézetét: adjunk neki egy háttérszínt, esetleg egy szövegszínt és tegyük vastagabbá a betűket.

A fejlécre a th-val hivatkozhatunk:

th { background-color: yellow; font-weight: bold; }
Code language: CSS (css)

Példa

HTML kód

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th { background-color: yellow; font-weight: bold; } </style> </head> <body> <table> <tr> <th>Első címsor</th> <th>Második címsor</th> </tr> <tr> <td>1.1 cella</td> <td>1.2 cella</td> </tr> <tr> <td>2.1 cella</td> <td>2.2 cella</td> </tr> </table> </body> </html>
Code language: HTML, XML (xml)

Eredmény

Első címsorMásodik címsor
1.1 cella1.2 cella
2.1 cella2.2 cella

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Sorok elkülönítése

Bár most nekünk nagyon kevés sorunk van, de ez a funkció igazán hasznos, ha sok sor van a táblázatunkban. Segít, hogy könnyebben átlátható legyen a táblázat. Nézzük miről van szó:

tr:nth-child(even) { background-color: #e6e6e6;; }

Ezzel a kis kóddal azt tudjuk beállítani, hogy minden páratlan tr-nek más legyen a háttérszíne.

Példa

HTML kód

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th { background-color: yellow; font-weight: bold; } tr:nth-child(even) { background-color: #e6e6e6;; } </style> </head> <body> <table> <tr> <th>Első címsor</th> <th>Második címsor</th> </tr> <tr> <td>1.1 cella</td> <td>1.2 cella</td> </tr> <tr> <td>2.1 cella</td> <td>2.2 cella</td> </tr> <tr> <td>3.1 cella</td> <td>3.2 cella</td> </tr> </table> </body> </html>
Code language: HTML, XML (xml)

Eredmény

Első címsorMásodik címsor
1.1 cella1.2 cella
2.1 cella2.2 cella
3.1 cella3.2 cella

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Kijelölt sor

Utolsó módosításként állítsuk be, hogy történjen valamiféle kiemelés azon a soron, amelyiken éppen tartózkodik az egér.

tr:hover { background-color: pink; }
Code language: CSS (css)

Ezzel a kóddal rózsaszínre változtatjuk annak a tr-nek a hátterét, amelyiken éppen van az egér.

Példa

HTML kód

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th { background-color: yellow; font-weight: bold; } tr:nth-child(even) { background-color: #e6e6e6;; } tr:hover { background-color: pink; } </style> </head> <body> <table> <tr> <th>Első címsor</th> <th>Második címsor</th> </tr> <tr> <td>1.1 cella</td> <td>1.2 cella</td> </tr> <tr> <td>2.1 cella</td> <td>2.2 cella</td> </tr> <tr> <td>3.1 cella</td> <td>3.2 cella</td> </tr> </table> </body> </html>
Code language: HTML, XML (xml)

Eredmény

Első címsorMásodik címsor
1.1 cella1.2 cella
2.1 cella2.2 cella
3.1 cella3.2 cella

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!