Пример таблицы
В этом примере мы создадим таблицу, демонстрирующую клиентам разные тарифные планы на услуги размещения сайта на сервере (хостинг).
Первая строка и первый столбец таблицы представляют собой заголовки.
Несмотря на то, что верхняя левая ячейка не содержит информации, для нее все равно создан отдельный элемент <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>