Для розміщення на веб-сторінці і малюнка та підпису до нього найзручніше скористатися таблицею. В цьому випадку можна задати колір облямівки навколо малюнка, її колір, ширину, а також місце розташування тексту (рис. 1).
Приклад місці біля ілюстрації
Приклад місці біля ілюстрації
Мал. 1. Варіанти розміщення місці біля ілюстрації
Приклад 1. Створення місці біля ілюстрації за допомогою таблиці
| Приклад місці біля ілюстрації |
Приклад місці біля ілюстрації
Приклад 2. Створення відступів вкладеними таблицями
|
Застосування вкладених таблиць пов'язане з певними складнощами - це і великий обсяг кінцевого коду, і незручність редагування даних. Тому спростимо собі задачу і скористаємося стилями. Створення полів навколо картинки відбувається за допомогою параметра padding. а відступи від тексту задаються атрибутом margin. Вирівнювання картинки по лівому або правому краю задається властивістю float (приклад 3).
Приклад 3. Використання стилів для створення місці біля ілюстрації
Вінні-Пух в гостях у Кролика
- Ну, - зам'явся Пух, - я міг би побути ще трохи, якби ти. якби у тебе. - запинався він і при цьому чомусь не зводив очей з буфета.
- По правді кажучи, - сказав Кролик, - я сам збирався піти погуляти.
- А-а, ну добре, тоді і я піду. Всього доброго.
- Ну, бувайте здорові, якщо ти більше нічого не хочеш.
- А хіба ще що-небудь є? - з надією запитав Пух, знову пожвавлюючись. Кролик зазирнув у всі каструлі і банки і, зітхнувши, сказав:
- На жаль, зовсім нічого не залишилося!
- Я так і думав, - співчутливо сказав Пух, похитавши головою. - Ну, до побачення, мені пора йти.
У прикладі показано створення місці біля ілюстрації внизу картинки. Малюнок розміщується по лівому краю вікна браузера, текст обтікає його справа. Відступ від тексту встановлено 10 пікселів по правому і нижньому краю через універсальний параметр margin.