Live
x
<html> <head> <title>Tabele</title> <style> table { border-collapse: collapse; margin: 20px; } td, th { border: 1px solid black; padding: 10px; } /* Cień, czcionka oraz dolny "border" */ .better { box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2); font-family: sans-serif; border-bottom: 2px solid #079968; } /* Jaśniejsze obramowanie tabeli */ .better td, .better th { border: 1px solid #bdbdbd; } /* Wyróżniający się nagłówek */ .better thead { background-color: #079968; color: white; } /* Równa szerokość kolumn */ .better th { width: 150px; } /* Wyrównanie tekstu w kolumnach "do środka" */ .better td { text-align: center; } /* Zmiana tła "co drugiego" elementu poprawia czytelność */ .better tbody tr:nth-child(odd) { background-color: #f1f1f1; } /* Tekst na którym nie znajduje się kursor ma jaśniejszą czcionkę */ .better tbody tr { color: rgba(0, 0, 0, 0.5); } /* "Podświetlenie" elementu nad któym znajduje się kursor myszy */ .better tbody tr:hover { background-color: #d7faee; color: black; } </style> </head> <body> <h4>Wersja podstawowa tabeli:</h4> <table> <thead> <tr> <th>Imię</th> <th>Nazwisko</th> <th>Kraj</th> <th>Miasto</th> </tr> </thead> <tr> <td>Elisabeth</td> <td>Windsor</td> <td>Anglia</td> <td>Londyn</td> </tr> <tr> <td>Julia</td> <td>Schimidt</td> <td>Niemcy</td> <td>Auerbach in der Oberpfalz</td> </tr> <tr> <td>Mario</td> <td>Bagiloatelli</td> <td>Włochy</td> <td>Guidonia Montecelio</td> </tr> <tr> <td>Klaudia</td> <td>Jaskólska</td> <td>Polska</td> <td>Warszawa</td> </tr> </table> <h4>Tabela z odrobiną CSS:</h4> <table class="better"> <thead> <tr> <th>Imię</th> <th>Nazwisko</th> <th>Kraj</th> <th>Miasto</th> </tr> </thead> <tr> <td>Elisabeth</td> <td>Windsor</td> <td>Anglia</td> <td>Londyn</td> </tr> <tr> <td>Julia</td> <td>Schimidt</td> <td>Niemcy</td> <td>Auerbach in der Oberpfalz</td> </tr> <tr> <td>Mario</td> <td>Bagiloatelli</td> <td>Włochy</td> <td>Guidonia Montecelio</td> </tr> <tr> <td>Klaudia</td> <td>Jaskólska</td> <td>Polska</td> <td>Warszawa</td> </tr> </table> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.