Урок 8. Таблицы. Продолжение.

Сегодня мы займемся сложными таблицами. Иногда нам просто
необходимо объединить какие-то ячейки. Возьмем таблицу из
шестого урока.

⟨TABLE⟩       ⟨TR⟩       ⟨TD⟩.. ⟨/TD⟩     ⟨TD⟩.. ⟨/TD⟩     ⟨TD⟩.. ⟨/TD⟩   ⟨/TR⟩           ⟨TR⟩       ⟨TD⟩.. ⟨/TD⟩     ⟨TD⟩.. ⟨/TD⟩     ⟨TD⟩.. ⟨/TD⟩   ⟨/TR⟩           ⟨TR⟩       ⟨TD⟩.. ⟨/TD⟩     ⟨TD⟩.. ⟨/TD⟩     ⟨TD⟩.. ⟨/TD⟩   ⟨/TR⟩   ⟨/TABLE⟩

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

Например

⟨TABLE⟩       ⟨TR⟩       ⟨TD⟩.. ⟨/TD⟩     ⟨TD rowspan="2"⟩.. ⟨/TD⟩     ⟨TD⟩.. ⟨/TD⟩   ⟨/TR⟩           ⟨TR⟩       ⟨TD⟩.. ⟨/TD⟩     Здесь был код ячейки     ⟨TD⟩.. ⟨/TD⟩   ⟨/TR⟩           ⟨TR⟩       ⟨TD⟩.. ⟨/TD⟩     ⟨TD⟩.. ⟨/TD⟩     ⟨TD⟩.. ⟨/TD⟩   ⟨/TR⟩   ⟨/TABLE⟩

Если нас интересует объединение ячеек в строке, то все происходит
точно так же, только применяется параметр colspan.

Например:

⟨TABLE⟩       ⟨TR⟩       ⟨TD⟩.. ⟨/TD⟩     ⟨TD colspan="2"⟩.. ⟨/TD⟩     Здесь был код ячейки   ⟨/TR⟩           ⟨TR⟩       ⟨TD⟩.. ⟨/TD⟩     ⟨TD⟩.. ⟨/TD⟩     ⟨TD⟩.. ⟨/TD⟩   ⟨/TR⟩           ⟨TR⟩       ⟨TD⟩.. ⟨/TD⟩     ⟨TD⟩.. ⟨/TD⟩     ⟨TD⟩.. ⟨/TD⟩   ⟨/TR⟩   ⟨/TABLE⟩

Как видите, все очень просто, надо только внимательно один
раз разобраться.

Еще одно очень нужное свойство таблиц. Их можно вкладывать
одна в другую. Просто в код нужной ячейки вставляем код таблицы.

⟨TD⟩ ⟨TABLE⟩С
этой таблицей можем делать все, что и с основной⟨/TABLE⟩⟨/TD⟩

Рисовать еще один пример, мне кажется,
нет смысла. Потренируйтесь это делать сами. Вложенными таблицами
Вы будете пользоваться очень часто.

И еще два полезных тега для таблиц.

Иногда бывает нужно, чтобы ячейки не смыкались, а располагались
на некотором расстоянии одна от другой. Это достигается применением
тега cellspacing, приравненного к величине расстояния между
ячейками в пикслелах.

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

Например:

От границы до текста 5 px

⟨TABLE cellspacing="5" cellpadding="5"⟩       ⟨TR⟩       ⟨TD⟩ От границы до текста 5 px⟨/TD⟩     ⟨TD⟩.. ⟨/TD⟩     ⟨TD⟩.. ⟨/TD⟩   ⟨/TR⟩           ⟨TR⟩       ⟨TD⟩.. ⟨/TD⟩     ⟨TD⟩.. ⟨/TD⟩     ⟨TD⟩.. ⟨/TD⟩   ⟨/TR⟩           ⟨TR⟩       ⟨TD⟩.. ⟨/TD⟩     ⟨TD⟩.. ⟨/TD⟩     ⟨TD⟩.. ⟨/TD⟩   ⟨/TR⟩   ⟨/TABLE⟩

В следующем выпуске научимся вставлять картинки.

Урок 9. Вставляем картинки.

Для вставки картинок предназначен непарный тег ⟨img⟩
с обязательным атрибутом src, указывающий путь к картинке:
⟨img src="risunok.jpg"⟩ . Здесь
Вам придется вспомнить то, о чем мы говорили в 4-ом уроке,
когда разбирали ссылки на документы. Здесь все то же самое.
Атрибут src может
указывать путь к картинке, лежащей в этой же папке, в другой
папке или вообще на другом сайте. Например:

⟨img src="../risunok.jpg"⟩


⟨img src="http://www.activegrow.ru/img/risunok.jpg"⟩

Если Вы вставите рисунок в таком виде, как мы только что
сделали, он по умолчанию будет расположен с левой стороны
и все, что Вы будете печатать дальше, разместится ниже этого
рисунка, только первая строчка как бы продолжит рисунок. Получается
не очень красиво. Для того, чтобы последующий текст рисунок
обтекал , нужно применить уже знакомый нам атрибут выравнивания
align.

⟨img src="risunok.jpg"
align="left"⟩ - рисунок слева, текст
обтекает его справа,

⟨img src="risunok.jpg"
align="right"⟩ - рисунок справа, текст
обтекает его слева.

С помощью так же знакомого нам атрибута border мы можем определить
рамку рисунка, ее цвет и толщину, точно так, как мы это делали
в таблицах. Вы уже достаточно опытны и можете проделать это
вполне самостоятельно, без моих примеров.

Иногда пользователи отключают картинки в своих браузерах,
и нам нужно показать им, что на этом месте находится картинка.
Для этого мы вставляем альтернативный текст, который будет
высвечиваться при наведении курсора на место картинки. Делается
это при помощи атрибута alt.

⟨img src="risunok.jpg"
alt="Здесь находится рисунок"⟩. В этом
примере при наведении курсора мы увидим надпись: "Здесь
находится рисунок".

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

Размеры картинки задаются атрибутами width - ширина и height
- высота в пикселах.

⟨img src="risunok.jpg"
align="right" width="300" height="250"⟩

У тега ⟨img⟩ много
атрибутов, но я расскажу Вам еще только о двух. Нам ведь не
хочется, чтобы текст прилегал прямо к границам картинки. Отодвинуть
его мы можем с помощью атрибутов hspase - расстояние до текста
по горизонтали в пикселах и vspase - расстояние по вертикали.

⟨img src="risunok.jpg"
align="right" hspase="10" alt="Здесь
находится рисунок"⟩

Вот, пожалуй, и все. Этих знаний Вам достаточно для начала.
Принцип построения html-документа Вам уже примерно понятен.
Таблицы тегов вещь доступная, просматривайте их, нужные Вам
теги и их атрибуты записывайте. Постепенно Ваши знания будут
расширяться.

Если у кого-то возникнут вопросы по html, то я буду делать
дополнения к урокам. А пока этот урок по очень краткому
курсу html был последним.

Для тех, кто хотел бы все нужное для строительства сайта
освоить быстрее: курс по html на диске "Все
Технические Моменты Онлайн Бизнеса в Видеоформате" занимает
3 часа 46 минут, содержит гораздо больше информации и все
показано в видеоформате.

А мы с Вами со следующего выпуска начнем знакомиться с каскадными
таблицами стилей (CSS). Без них приступать к созданию сайта
неразумно.

Я желаю Вам удачи.