Výplň buněk je prostor mezi okraji buňky a obsahem buňky.

Ve výchozím nastavení je výplň nastavena na 0.

Chcete-li přidat odsazení do buněk tabulky, použijte vlastnost odsazení (padding) CSS:

<!DOCTYPE html>
<html lang="cs">
    <head>
	<title>Výuka html.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
        th, td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 15px; (1)
        }
    </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 Výplň u buněk tabulky nastavena na 15 bodů absolutně.

Výsledek tabulka13.html

Porovnání výplně (padding) a mezery (spacing)

Výplň (padding) je volné místo mezi okrajem buňky a obsahem buňky.

Mezera (spacing) je volné místo mezi buňkami.

Ve stylu budeme používat nový zápis začínající tečkou ., čili .jméno_třídy, který bude platit jenom pro prvky dokumentu označené atributem class="jméno_třídy". Ve zdrojáku je to zvýrazněno modrou barvou.

Dále budeme používat nové prvky <tbody>, který ohraničuje obsah (tělo) tabulky a <caption>, který má význam nadpisu svázaného s tabulkou.

<!DOCTYPE html>
<html lang="cs">
    <head>
	<title>Tabulky: padding a spacing</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
        table, th, td {             (1)
            border: 1px solid;
        }
        .table_padding td, .table_padding th {  (2)
            padding: 10px;
        }
        .table_spacing {            (3)
            border-spacing: 15px;
        }
    </style>
    </head>
    <body>
        <h1>Tabulka s výplněmi</h1>
        <table class="table_padding">
        <caption>Výplň (padding)</caption>
        <tbody>
            <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>
        </tbody>
        </table>

        <h1>Tabulka s mezerami</h1>
        <table class="table_spacing">
        <caption>Mezery (spacing)</caption>
        <tbody>
            <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>
        </tbody>
        </table>

    </body>
</html>
1 Tabulky, buňky tabulek a buňky záhlaví tabulky budou mít okolo sebe čáru o velikosti 1 bod
2 Buňky tabulek a buňky záhlaví tabulky, která je označena atributem class="table padding", budou mít výplň 10 bodů.
3 Buňky tabulek a buňky záhlaví tabulky, která je označena atributem class="table_spacing", budou mít okolo sebe mezery o velikosti 15 bodů.

Výsledek tabulka14.html