CSS Jednoduchá tabulka
Pruhovaná tabulka
U tabulek s pruhovanými řádky je použit selektor nth-child() a přidá barvu pozadí do všech sudých (nebo lichých) řádků tabulky.
| Jméno | Příjmení | Naspořeno v Kč |
|---|---|---|
| Petr | Novák | 100 |
| Petra | Nováková | 180 |
| Jan | Novák | 250 |
| Jana | Nováková | 320 |
Kód:
<style>
table.mojetabulka {
border-collapse: collapse;
width: 70%;
font-family: arial, sans-serif;
}
table, td, th {
border: 1px solid;
border-color: #eee;
}
th {
text-align: center;
padding: 5px;
background: #555;
color: white;
}
td {
text-align: left;
padding: 5px;
padding-left: 10px;
}
tr:nth-child(odd) {background-color: #f8f8f8;}
tr:hover {background-color: #f2f2f2;}
</style>
<table class="mojetabulka">
<tr>
<th>Jméno</th>
<th>Příjmení</th>
<th>Naspořeno v Kč</th>
</tr>
<tr>
<td>Petr</td>
<td>Novák</td>
<td style="text-align: center;">100</td>
</tr>
<tr>
<td>Petra</td>
<td>Nováková</td>
<td style="text-align: center;">180</td>
</tr>
<tr>
<td>Jan</td>
<td>Novák</td>
<td style="text-align: center;">250</td>
</tr>
<tr>
<td>Jana</td>
<td>Nováková</td>
<td style="text-align: center;">320</td>
</tr>
</table>