Атрибут style — оформление изображения

Указание размеров изображения — один из редких случаев, когда атрибут style полезен. В случае, если изображение не будет отображено, вместо него отобразится блок указанного размера. Это помогает избежать «расползания» верстки в случае отключения изображений или во время загрузки.

Таблицы

Таблицы в HTML — очень мощный инструмент. Они используются как для представления табличных данных, так и для верстки. Таблица в HTML обозначается элементом table. Он имеет тип отображение table: ведет себя как блочный элемент, но занимает не всю доступную ширину, а только необходимую для отображения содержимого.

Обязательным элементом таблиц является элемент tr — строка таблицы. А обязательными элементами для элемента tr являются ячейки: th — заголовочная ячейка и td — обычная. Пример простой таблицы:

<table>

<tr>

<th>ФИО</th>

<th>Должность</th>

</tr>

<tr>

<td>Иван Иванов</td>

<td>Генеральный директор</td>

</tr>

<tr>

<td>Василий Пупкин</td>

<td>Менеджер</td>

</tr>

</table>

Атрибуты colspan и rowspan — объединение ячеек

При необходимости ячейки таблиц можно объединять. Для этого существуют атрибуты colspan — горизонтальное объединение и rowspan — вертикальное. Например, так можно объединить две ячейки в соседних столбцах:

<td colspan=”2”>Объединение</td>

Как можно догадаться, количество объединяемых ячеек указывается как значение атрибута. Если происходит одновременное объединение по горизонтали и по вертикали, то результатом будет прямоугольная область, занимающая высоту и ширину объединенных ячеек.

Таблицы с дополнительными элементами

Когда необходимо получить больше возможностей для оформления таблиц можно использовать расширенный набор структурных элементов.

Во-первых, таблицу можно разделить на структурные части: «шапку», «подвал» и основную часть. Для этого служат три элемента: thead (шапка), tfoot (подвал) и tbody (основная часть). Эти элементы должны быть дочерними для таблицы. В них включаются строки (элементы tr) и за счет этого происходит группировка.

Элементы thead и tfoot можно использовать как вместе, так и по отдельности. Однако, если использован хоть один из этих элементов, то строки основной части таблицы должны быть заключены в элемент tbody. Элемент tbody можно использовать и сам по себе, но это не имеет смысла, а только увеличивает вложенность кода.

Если используется элемент tfoot, он должен находиться в коде перед элементом tbody, хотя будет отображаться после него. Это правило введено для того, чтобы браузер мог отобразить подвал таблицы, даже если основная часть еще не загрузилась.

Во-вторых, бывает необходимо особым образом оформить колонку или группу колонок таблицы. Для этого предназначены элементы col (колонка) и colgroup (группа).

Если используются элементы col, то они должны быть дочерними либо к элементу table, либо к элементу colgroup. Если элементы col вкладываются непосредственно в таблицу, то они должны располагаться после элемента caption, но перед любым tr. Элемент col является пустым, т.е. состоит из одного тега.

Элементы colgroup также должны быть дочерними по отношению к table и располагаться после элемента caption, но до любого элемента tr. Их содержанием могут быть только элементы col. Если содержания нет, то colgroup охватывает одну графу.

У элементов col и colgroup может применяться атрибут span, значение которого указывает на количество охватываемых элементом колонок. Не путайте его с атрибутом colspan, который указывает количество объединяемых ячеек.

<colgroup><col /><col span=”2” /></colgroup><col /><col />

В-третьих, для таблицы можно задать заголовок. Это позволяет сделать элемент caption. Если он используется, то он должен быть первым дочерним элементом по отношению к table. Содержанием этого элемента могут быть любые строчные элемента и символьные данные.

Пример таблицы с дополнительными элементами:

<table>

<caption>Поддержка в IDE</caption>

<col></col><colgroup><col></col><col /></colgroup><col />

<thead>

<tr>

<th></th>

<th>HTML</th>

<th>CSS</th>

<th>JavaScript</th>

<th>PHP</th>

</tr>

</thead>

<tfoot>

<tr>

<td colspan="3">Работает</td>

<td rowspan="2">Не работает</td>

</tr>

</tfoot>

<tbody>

<tr>

<th>Aptana</th>

<td>Да</td>

<td>Да</td>

<td>Да</td>

<td>Через плагин</td>

</tr>

<tr>

<th>NetBeans</th>

<td>Да</td>

<td>Да</td>

<td>Нет</td>

<td>Да</td>

</tr>

<tr>

<th>PDT</th>

<td>Да</td>

<td>Да</td>

<td>Да</td>

<td>Да</td>

</tr>

</tbody>

</table>