Обтекание графики текстом в документе html

Если хотите, чтобы графический рисунок органически вписывался в дизайн Вэб-страницы, то нужен атрибут ALIGN тэга <IMG>.Этот атрибут допускает задание двух значений - left right.Значение left заставляет браузер помещать изображение слева от текста, а right - справа от него. Если надо, чтобы форматированию подвергался только определенный фрагмент текста, следует применить тэг BR с атрибутом CLEAR, указывающими позицию в тексте, начиная с которой действие механизма обтекания графики текстом отменяется. Значения left, right, all атрибута CLEAR позволяют определить, с какой стороны - левой, правой, обеих - текст далее будет свободен от графики.Следует заметить, что если атрибут ALIGN уже был применен для выравнивания текста относительно графики в пределах конкретной Вэб-страницы, установить параметр обтекания графики текстом не удастся.Атрибут ALIGN дает возможность разместить текст между двумя графическими изображениями. В этом случае тэги, описывающие изображения, должны быть расположены над текстом, который будет заключен между ними.

Н-р:HTML-код:<img src="img/majak.jpg" align="left">

Этот маяк расположен на берегу моря и служит кораблям для ориентира. Он очень помогает морякам в плохую погоду.

<br><br>

<img src="img/sea.jpg" align="right">

Это небольшая яхта.

<br clear="right">

Я люблю море, но не умею плавать.

<br><br>

<img src="img/majak.jpg" align="left">

<img src="img/sea.jpg" align="right">

Море, море - мир безбрежный

Создание таблы: Для создания таблы служит тэг <TABLE>. Табла состоит из строк, а строки из ячеек. Для определения строк служит тэг <TR>, для создания ячеек - <TH>, <TD>.Тэг <TH> используется для создания ячеек с заголовками.Тэг <TD> - для обыкновенных ячеек с данными. Содержание ячеек заголовков отображается полужирным шрифтом и выравнивается по центру.Используя таблицы, можно сделать аккуратную компоновку информации в пределах Вэб-страницы, добиться точного расположения того или иного фрагмента страницы, будь то текст, графика или гиперссылка. Н-р, используя таблицу, можно легко добиться отображения текста в нескольких колонках, подобно газетной публикации.

Пример:

HTML-код:

<table border="1">

<tr>

<td>1</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>5</td>

<td>6</td>

</tr>

</table>

Обрамление таблы: Для того, чтобы сделать видимой границы таблицы, служит атрибут BORDER тэга <TABLE>.Определяя рамку таблицы, надо указать толщину ее внешних линий в пикселях. Чтобы задать толщину разграничивающих линий внутри таблицы, необходимо воспользоваться атрибутом CELLSPACING.По умолчанию браузер отображает рамку таблицы темно-серым цветом. Чтобы изменить цвет рамки надо применить атрибут BORDERCOLOR.

Пример:

HTML-код:

<table border="2" cellspacing="5" bordercolor="#0ff00f">

<tr>

<td>1</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>5</td>

<td>6</td>

</tr>

</table>

Группирование строк:

Для группирования строк таблицы служат тэги <THEAD>, <TBODY>, <TFOOT>.

<THEAD> - нужен для создания группы заголовков для столбцов таблицы. Этот дескриптор допускается использовать в пределах таблицы только одни раз.

<TBODY> - применяется для создания одной или нескольких групп строк таблицы, содержащих основные данные.

<TFOOT> - позволяет создать группу строк для представления информации о суммах или итогах, располагаемую в нижней части таблицы. Этот дескриптор допускается использовать в пределах таблицы только одни раз. Вовсе не обязательно создавать группы строк таблицы всех трех типов.

Пример:

HTML-код:

<table border="1">

<thead style="color:green">

<tr>

<th>Товар</th>

<th>Цена</th>

<th>Кол-во</th>

</tr>

</thead>

<tr>

<th>Гайка</th>

<td>20р</td>

<td>50</td>

</tr>

<tr>

<th>Болт</th>

<td>30р</td>

<td>80</td>

</tr>

<tfoot>

<tr>

<td colspan="3" align="center">Итоговая строка</td>

</tr>

</tfoot>

</table>

Поиск по сайту: