HTML tabulky mohou mít buňky, které se roztahují přes více sloupců nebo více řádků.

Buňku roztaženou přes více sloupců uděláme pomocí atributu colspan="počet sloupců".

Buňku roztaženou přes více řádků uděláme pomocí atributu rowspan="počet řádků".

<!DOCTYPE html>
<html lang="cs">
    <head>
	<title>Buňka přes více sloupců</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;
        }
    </style>
    </head>
    <body>
        <table>
        <tr>
            <th colspan="2">Jméno a příjmení</th> (1)
            <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 Tato buňka se roztáhne přes dva sloupce.

Výsledek tabulka16.html

<!DOCTYPE html>
<html lang="cs">
    <head>
	<title>Buňka přes více řádků</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;
        }
    </style>
    </head>
    <body>
        <table>
        <tr>
            <th>Pozice</th>
            <th colspan="2">Jméno a příjmení</th> (1)
            <th>Věk</th>
        </tr>
        <tr>
            <th>ředitel</th>
            <td>Josef</td>
            <td>Novák</td>
            <td>50</td>
        </tr>
        <tr>
            <th rowspan="2">technici</th> (2)
            <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 Tato buňka se roztáhne přes dva sloupce.
2 Tato buňka se roztáhne přes dva řádky.

Výsledek tabulka17.html

Domácí úkol

Napište tabulku, kde budete mít buňku roztaženou přes více řádů i sloupců.