Podíváme se jak funguje element <th> a jak se dělá styl pro tabulky.

Tabulka s elementem <th>

Tabulka s hlavičkou v prvním řádku
<table>
    <tr>
        <th>Hlavička řádek 1 sloupec 1</th>
        <th>Hlavička řádek 1 sloupec 2</th>
        <th>Hlavička řádek 1 sloupec 3</th>
    </tr>
    <tr>
        <td>Normální řádek 2 sloupec 1</td>
        <td>Normální řádek 2 sloupec 2</td>
        <td>Normální řádek 2 sloupec 3</td>
    </tr>
    <tr>
        <td>Normální řádek 3 sloupec 1</td>
        <td>Normální řádek 3 sloupec 2</td>
        <td>Normální řádek 3 sloupec 3</td>
    </tr>
</table>
Hlavička řádek 1 sloupec 1 Hlavička řádek 1 sloupec 2 Hlavička řádek 1 sloupec 3
Normální řádek 2 sloupec 1 Normální řádek 2 sloupec 2 Normální řádek 2 sloupec 3
Normální řádek 3 sloupec 1 Normální řádek 3 sloupec 2 Normální řádek 3 sloupec 3
Tabulka s hlavičkou v prvním sloupci
<table>
    <tr>
        <th>Hlavička sloupec 1</th>
        <td>Normální sloupec 2</td>
        <td>Normální sloupec 3</td>
    </tr>
    <tr>
        <th>Hlavička sloupec 1</th>
        <td>Normální sloupec 2</td>
        <td>Normální sloupec 3</td>
    </tr>
    <tr>
        <th>Hlavička sloupec 1</th>
        <td>Normální sloupec 2</td>
        <td>Normální sloupec 3</td>
    </tr>
</table>
Hlavička sloupec 1 Normální sloupec 2 Normální sloupec 3
Hlavička sloupec 1 Normální sloupec 2 Normální sloupec 3
Hlavička sloupec 1 Normální sloupec 2 Normální sloupec 3

Styly tabulky

Tabulka se stylem okraje
<!DOCTYPE html>
<html lang="cs">
    <head>
	<title>Výuka html.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style> (1)
        table, th, td {
            border: 1px solid black;
        }
    </style> (2)
    </head>
    <body>
        <table style="width:100%"> (3)
        <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 Začátek stylu v hlavičce.
2 Konec definice stylu.
3 Styl přímo v html elementu (zde tabulka).

Výsledek nelze vložit přímo do stránky, proto je zde. Dvojitý okraj se nám moc nelíbí, šířka na celou stránku také ne, uděláme to lépe.

Tabulka s lepším stylem okraje
<!DOCTYPE html>
<html lang="cs">
    <head>
	<title>Výuka html.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
        table, th, td {
            border: 1px solid black;    (1)
            border-collapse: collapse;  (2)
        }
    </style>
    </head>
    <body>
        <table style="width:50%"> (3)
        <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 Čára okraje tlustá 1 pixel (bod) černá.
2 Okraj kolabuje a proto vidíme jednu čáru a ne dvě.
3 Styl přímo v elementu.

Výsledek nelze vložit přímo do stránky, proto je zde.

Teď si můžeme trochu hrát.

Tabulka s barvou pozadí
<!DOCTYPE html>
<html lang="cs">
    <head>
	<title>Výuka html.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            background-color: #96D7D7; (1)
        }
    </style>
    </head>
    <body>
        <table style="width:50%">
        <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 Barva pozadí.

Výsledek nelze vložit přímo do stránky, proto je zde.

Další styly si můžete vyzkoušet sami.

Kulaté rohy
table, th, td {
  border: 1px solid black;
  border-radius: 10px;
}

výsledek

Kulaté rohy jenom u vnitřku tabulky
th, td {
  border: 1px solid black;
  border-radius: 10px;
}

výsledek

Tečkovaná čára okraje
table, th, td {
  border-style: dotted;
}

výsledek

Tabulka 1. border-style může být:
styl význam

dotted

tečkovaná čára

dashed

čátkovaná čára

solid

plná čára

double

dvojitá čára

groove

ridge

outset

none

žádná čára

hidden

skrytá čára

Tyhle legrace si můžete vyzkoušet sami.

Barva okraje
th, td {
    border: 1px solid;
    border-color: #96d4d4;
}

výsledek

To samé můžeme udělat takto:
th, td {
    border: 1px solid #96d4d4;
}

Další styly tabulky