Перейти к содержанию

Пример таблицы

В этом примере мы создадим таблицу, демонстрирующую клиентам разные тарифные планы на услуги размещения сайта на сервере (хостинг).

Первая строка и первый столбец таблицы представляют собой заголовки.

Несмотря на то, что верхняя левая ячейка не содержит информации, для нее все равно создан отдельный элемент <th>.

Каждая ячейка таблицы должна быть представлена либо элементом <th>, либо <td>.

Для элемента <th> можно установить атрибут scopе, чтобы указать к чему относится данный заголовок: к строке или столбцу.

В последней строке таблицы используется атрибут colspan для объединения всех ее ячеек в одну.

Код
<html>
    <head>
        <title>Таблицы</title>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th></th>
                    <th scope="col">Хостинг "Домашний начальный"</th>
                    <th scope="col">Хостинг "Домашний Премиум"</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">Дисковое пространство</th>
                    <td>1 Гб</td>
                    <td>3 Гб</td>
                </tr>
                <tr>
                    <th scope="row">Трафик</th>
                    <td>15 Гб/мес</td>
                    <td>50 Гб/мес</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td></td>
                    <td colspan="2">Закажи сейчас и сэкономь 10%!</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

Результат