Podíváme se na stylování tabulky jako celku.
Budeme používat konstrukci :nth-child(even) nebo :nth-child(odd), které se říká selektor. Hodnota even je pro sudé prvky a odd pro liché prvky tabulky.
Selectro funguje tak, že daný styl se aplikuje pouze na selectrorem vybrané provky.
Podle toho jak selektor použijeme, aplikuje se buď na celé řádky a nebo na sloupce
selektor pro řádky
<style> ....
tr:nth-child(even) {
background-color: #d7eeff; (1)
}
tr:nth-child(odd) {
background-color: #aae1f0; (2)
}
</style>| 1 | Změna barvy pozadí na #d7eeff bude fungovat jenom pro sudé řádky tabulky. |
| 2 | Změna barvy pozadí na #aae1f0 bude fungovat jenom pro liché řádky tabulky. |
selektor pro liché sloupce sloupce
<style> ....
td:nth-child(even), th:nth-child(even) { (1)
background-color: #d7eeff;
}
</style>Vodorovná zebra
Změna pozadí na sudých řádcích
<!DOCTYPE html>
<html lang="cs">
<head>
<title>Stylování tabulky</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
}
tr:nth-child(even) { (1)
background-color: #d7eeff;
}
</style>
</head>
<body>
<table>
<tr>
<th>Jméno</th>
<th>Příjmení</th>
<th>Věk</th>
</tr>
<tr>
<td>Josef</td>
<td>Novák</td>
<td>50</td>
</tr>
<tr>
<td>Karel</td>
<td>Procházka</td>
<td>24</td>
</tr>
<tr>
<td>Jiří</td>
<td>Drahokoupil</td>
<td>38</td>
</tr>
</table>
</body>
</html>| 1 | Tento styl (jiné pozadí) bude aplikován pouze na sudé řádky. |
Výsledek tabulka18.html
Změna pozadí na lichých i sudých řádcích
<!DOCTYPE html>
<html lang="cs">
<head>
<title>Stylování tabulky</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
}
tr:nth-child(odd) { (1)
background-color: #aae1f0;
}
tr:nth-child(even) { (2)
background-color: #d7eeff;
}
</style>
</head>
<body>
<table>
<tr>
<th>Jméno</th>
<th>Příjmení</th>
<th>Věk</th>
</tr>
<tr>
<td>Josef</td>
<td>Novák</td>
<td>50</td>
</tr>
<tr>
<td>Karel</td>
<td>Procházka</td>
<td>24</td>
</tr>
<tr>
<td>Jiří</td>
<td>Drahokoupil</td>
<td>38</td>
</tr>
</table>
</body>
</html>| 1 | Tento styl (tmavě modré pozadí) bude aplikován pouze na liché řádky. |
| 2 | Tento styl (světle modré pozadí) bude aplikován pouze na sudé řádky. |
Výsledek tabulka19.html
Svislá zebra
Změna pozadí na lichých a sudých sloupcích
<!DOCTYPE html>
<html lang="cs">
<head>
<title>Stylování tabulky</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
}
td:nth-child(even), th:nth-child(even) { (1)
background-color: #d7eeff;
}
td:nth-child(odd), th:nth-child(odd) { (2)
background-color: #aae1f0;
}
</style>
</head>
<body>
<table>
<tr>
<th>Jméno</th>
<th>Příjmení</th>
<th>Věk</th>
</tr>
<tr>
<td>Josef</td>
<td>Novák</td>
<td>50</td>
</tr>
<tr>
<td>Karel</td>
<td>Procházka</td>
<td>24</td>
</tr>
<tr>
<td>Jiří</td>
<td>Drahokoupil</td>
<td>38</td>
</tr>
</table>
</body>
</html>| 1 | Tento styl (barva pozadí) bude aplikován pouze na sudé sloupce. |
| 2 | Tento styl (barva pozadí) bude aplikován pouze na liché sloupce. |
Výsledek tabulka20.html
Kombinovaná zebra
Zde použijeme ještě jeden styl, zadáme barvu pozadí a současně transparentnost, k tomu použijeme konstrukci rgba().
Kombinovaná zebra
<!DOCTYPE html>
<html lang="cs">
<head>
<title>Stylování tabulky</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
}
tr:nth-child(even) { (1)
background-color: rgba(150, 212, 212, 0.4);
}
td:nth-child(even), th:nth-child(even) { (2)
background-color: rgba(150, 212, 212, 0.4);
}
</style>
</head>
<body>
<table>
<tr>
<th>Jméno</th>
<th>Příjmení</th>
<th>Věk</th>
</tr>
<tr>
<td>Josef</td>
<td>Novák</td>
<td>50</td>
</tr>
<tr>
<td>Karel</td>
<td>Procházka</td>
<td>24</td>
</tr>
<tr>
<td>Jiří</td>
<td>Drahokoupil</td>
<td>38</td>
</tr>
</table>
</body>
</html>| 1 | Tento styl (barva pozadí s transparentností) bude aplikován pouze na sudé sloupce. |
| 2 | Tento styl (barva pozadí s transparentností) bude aplikován pouze na sudé řádky. |
Výsledek tabulka21.html
Horizontální oddělení
Oddělení řádků čárou
<!DOCTYPE html>
<html lang="cs">
<head>
<title>Stylování tabulky</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
table, th, td {
border-collapse: collapse;
padding: 10px;
}
tr { (1)
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<table>
<tr>
<th>Jméno</th>
<th>Příjmení</th>
<th>Věk</th>
</tr>
<tr>
<td>Josef</td>
<td>Novák</td>
<td>50</td>
</tr>
<tr>
<td>Karel</td>
<td>Procházka</td>
<td>24</td>
</tr>
<tr>
<td>Jiří</td>
<td>Drahokoupil</td>
<td>38</td>
</tr>
</table>
</body>
</html>| 1 | border-bottom: 1px solid #ddd; nám nakreslí pod každým řádkem čáru. |
Výsledek tabulka22.html
Efekt změny barvy řádku při najetí myší
K tomu použijeme selektor :hover na řádek tabulky tr. Není k tomu potřeba žádný javascript.
Změna pozadí řádků při najetí myší.
<!DOCTYPE html>
<html lang="cs">
<head>
<title>Stylování tabulky</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
table, th, td {
border-collapse: collapse;
padding: 10px;
}
tr {
border-bottom: 1px solid #ddd; (1)
}
tr:hover { (2)
background-color: #777777;
}
</style>
</head>
<body>
<table>
<tr>
<th>Jméno</th>
<th>Příjmení</th>
<th>Věk</th>
</tr>
<tr>
<td>Josef</td>
<td>Novák</td>
<td>50</td>
</tr>
<tr>
<td>Karel</td>
<td>Procházka</td>
<td>24</td>
</tr>
<tr>
<td>Jiří</td>
<td>Drahokoupil</td>
<td>38</td>
</tr>
</table>
</body>
</html>| 1 | border-bottom: 1px solid #ddd; nám nakreslí pod každým řádkem čáru. |
| 2 | Bude měnit pozadí, ale jenom při najetí myší na řádek. |
Výsledek tabulka23.html
Domácí úkol
Vymyslete tabulku, která bude mít pro záhlaví jednu barvu pozadí (třeba šedou), a pro sudé řádky světle modrou a pro liché řádky tmavěji modrou. Při najetí myší na řádek se barva pozadí změní na světle oranžovou.