Сделаем открытку со стихами. Ввиду того что я ленивый и мне лень искать для примера фоны и текст стихов, я позаимствовал все это у inmira с её поста http://www.liveinternet.ru/users/inmira/post99542587/.

Коды картинок ( видны при редактировании черновика или поста )

Размеры картинок уменьшены что бы они не занимали много места в посте

Сделаем рамку для открытки. Для этого построим таблицу 1х1 - одна строка, один столбец. Для таблицы пропишем background.
В background укажем ссылку на фоновую картинку для рамки

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

Получилось не совсем то что мы хотели. Это потому что мы "забыли" указать отступ от границы таблицы до ячейки таблицы.
Исправим это дописав в тег <table> параметр cellspacing

И все равно ничего не получилось. Все это потому что в дневнике, для таблицы в глобальных стилях указано border-collapse: collape и из-за этого cellspacing игнорируется
Что бы это исправить нужно к <table> добавить стиль style="border-collapse: separate;"

Ура! У нас есть рамка :). Все что нам осталось это вставить в ячейку таблицы рисунок и текст стихов

Весь год, не соврав никому ни на грошь, Мы ждем, как небесную манну, Тот день, когда можно удариться в ложь, Невинно придаться обману! Набрав арсенал завиральный идей, С кощунственным трепетом в теле Мы ловим доверчивых честных людей, Забывших о первоапреле. И мы их находим, смиренных ягнят, Простецки развесивших уши. И стрелы обмана со свистом летят В их светлые, чистые души. Но первоапрельский веселый обман - Сердечная наша потеха. И стрелы не кровь высекают из ран, А добрые искорки смеха. О, как же он весел и как же хорош, Пришедший на смену метелям, Тот праздник, во смех превращающий ложь! Сограждане, с первым апреля!

Не все так просто :). Во первых текст расположен не справа от рисуна, а под ним. Во вторых текст нечитаемый из-за того что цвет текста черный и размер шрифта маленький.
Что бы текст располагался справа от рисунка добавим в код рисунка align="left" в этом случае рисунок будет располагаться слевой стороны ячейки, а текст будет "обтекать" его справа.
Что бы изменить цвет текста и размер шрифта добавим к <td> стиль style="color: #fffcfc; font-size: 18px;". Цвет текста #fffcfc, размер шрифта 18px.

Весь год, не соврав никому ни на грошь, Мы ждем, как небесную манну, Тот день, когда можно удариться в ложь, Невинно придаться обману! Набрав арсенал завиральный идей, С кощунственным трепетом в теле Мы ловим доверчивых честных людей, Забывших о первоапреле. И мы их находим, смиренных ягнят, Простецки развесивших уши. И стрелы обмана со свистом летят В их светлые, чистые души. Но первоапрельский веселый обман - Сердечная наша потеха. И стрелы не кровь высекают из ран, А добрые искорки смеха. О, как же он весел и как же хорош, Пришедший на смену метелям, Тот праздник, во смех превращающий ложь! Сограждане, с первым апреля!

Уже лучше :) Но есть недоработка. Текст заползает под рисунок. Что бы этого не было поместим рисунок текст стихов в тег <div>. со стилем style="float: left" для рисунка и style="float: right" для текста.
Я приведу пример сокрашенного кода что бы было понятнее

Весь год, не соврав никому ни на грошь, Мы ждем, как небесную манну, Тот день, когда можно удариться в ложь, Невинно придаться обману! Набрав арсенал завиральный идей, С кощунственным трепетом в теле Мы ловим доверчивых честных людей, Забывших о первоапреле. И мы их находим, смиренных ягнят, Простецки развесивших уши. И стрелы обмана со свистом летят В их светлые, чистые души. Но первоапрельский веселый обман - Сердечная наша потеха. И стрелы не кровь высекают из ран, А добрые искорки смеха. О, как же он весел и как же хорош, Пришедший на смену метелям, Тот праздник, во смех превращающий ложь! Сограждане, с первым апреля!

Получили практически то что хотели. Осталось привести текст стихов в "божеский" вид. Можно установить галочку "Сохранять переводы строк в тексте.", но я лучше уберу это галочку и добавлю еще один тег <pre>. Все что находится внутри этого тега будет выводится со всеми пробелами и переносами строк.

Вот мы и получили то что хотели.

Весь год, не соврав никому ни на грошь, Мы ждем, как небесную манну, Тот день, когда можно удариться в ложь, Невинно придаться обману! Набрав арсенал завиральный идей, С кощунственным трепетом в теле Мы ловим доверчивых честных людей, Забывших о первоапреле. И мы их находим, смиренных ягнят, Простецки развесивших уши. И стрелы обмана со свистом летят В их светлые, чистые души. Но первоапрельский веселый обман - Сердечная наша потеха. И стрелы не кровь высекают из ран, А добрые искорки смеха. О, как же он весел и как же хорош, Пришедший на смену метелям, Тот праздник, во смех превращающий ложь! Сограждане, с первым апреля!

Разместим в дневнике большое количество небольших по размеру рисунков. Для примера я взял 6 анимированных смыйликов

Для того что бы рисунки располагались горизонтально необходимо убрать галочку с "Сохранять переводы строк в тексте.".

Я специально взял смайлы разного размера. Попробуем теперь сделать вывод рисунков более логичным.
Большие смайлы в одной колонке, маленькие - в другой

Для этого построим таблицу из двух колонок и трех строк ( по количеству смайлов одного размера )

Коды рисунков смайлов ( видны при редактировании черновика или поста )

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

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

Ширина первой и второй колонки не одинаковые что не всегда красиво. Добавим в нашу таблицу еще одну строку Эта строка задаст ширину колонок в 200 пикселей ( можно указать ширину в процентах от общей ширины таблицы )

Что бы не загромождать код я в дальнейшем буду показывать только часть кода где делаем изменения

Осталась самая малость. Разместить рисунки по центру ячеек. Для этого в добавим valign="middle" и align="center"

Подпишем колонки. Для этого добавим вначале еще одну строку в которой вместо пропишем

Большие смалы	Маленькие смайлы

Добавим к каждому смайлу название.

Вид таблицы мягко говоря не очень :)

Большие смалы	Маленькие смайлы
Большой1	Маленький1
Большой2	Маленький2
Большой3	Маленький3

Исправим это добавив еще 2 колонки для названий смайлов

Обратите внимание на то что добавилось еще две строки с и . Даже если в ячейках ничего не выводится количество ячеек в каждой строке должно быть одинаковым!!!!!

Название колонок "Большие смайлы и маленькие смайлы" не совсем правильно расположены

Большие смалы		Маденькие смайлы
	Большой1		Маленький1
	Большой2		Маленький2
	Большой3		Маленький3

Объеденим попарно ячейки с названием колонок.

Большие смалы		Маденькие смайлы
	Большой1		Маленький1
	Большой2		Маленький2
	Большой3		Маленький3

Не нравится мне грозный красный смайл :)). Я его выделю каким то фоном что бы он бросался в глаза :). Добавлю в ячеку с этим смайлом фоновый цвет

Заодно и строку с названием колонок выделю фоном

Большие смалы		Маденькие смайлы
	Большой1		Маленький1
	Большой2		Маленький2
	Большой3		Маленький3

Сделаем этот грозный смайл не таким грозным. Разместим его на этом фоновом рисунке :))

Для этого добавим в ячейку с этим смайлом параметр background

Большие смалы		Маденькие смайлы
	Большой1		Маленький1
	Большой2		Маленький2
	Большой3		Маленький3

Что еще творить с таблицей зависит только от вашей фантазии :)) Можно каждую строку выделить своим цветом добавиви в параметр background. Можно для каждой ячейки или строки задать фоновый рисунок прописав background. Вместо текста в ячейках можно прописать ссылки.

ps: Добавьте в код рисунка title="текст" и при наведении мышки на рисунок будет выскакивать подсказка с текстом

Создадим таблицу 4 строки 2 колонки

В первой строке текст размещен слева, в последней строке - справа, а в централной строке - посредине

Добавим заголовок к нашей таблице. Для этого используем тег . Для этого тега есть два параметра align - задает выравнивание заголовка и valign - определяет вверху таблицы или внизу будет выводится заголовок.

допустим только внутри тега сразу после открывающего тега.

Вид заголовка в зависимости от align будет отличаться в разных браузерах.

• left - В браузере Internet Explorer и Opera располагает заголовок сверху и выравнивает его по левому краю таблицы. В Firefox заголовок располагается слева от таблицы.
• right -В браузере Internet Explorer и Opera располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. В браузере Netscape параметр игнорируется, а в Firefox заголовок располагается от таблицы справа.
• center - Заголовок располагается сверху таблицы по ее центру.
• top - Результат аналогичен действию параметра center, но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами.
• bottom - Заголовок размещается внизу таблицы по ее центру.

Если задать align="bottom" то заголовок будет внизу таблицы

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

Таблица с заголовками

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

Объеденим несколько ячеек таблицы. Для этого в теге нужно указать colspan - объеденяет горизонтальные ячейки, rowspan - вертикальные

Объеденим 2 ячейки первой строки в одну ячейку

Объеденим 2 ячейки первого столбца в одну ячейку

И последнее. Параметры тега cellpadding - отступ от рамки до содержимого ячейки и cellspacing- расстояние между ячейками.

Вот собственно и все :))

• предназначен для создания заголовка к таблице.
• задает ширину и другие атрибуты одной или нескольких колонок таблицы.
• предназначен для задания ширины и стиля одной или нескольких колонок таблицы.
• предназначен для хранения одной или нескольких строк таблицы.
• определяет колонку таблицы.
• определяет строку таблицы.
• предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы.
• предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная.
• предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы.

Построим простейшую таблицу, состоящую из одной строки и двух столбцов.

Добавим рамку к нашей таблице. Для этого нужно в тег добавить border="1" ( Этот параметр определяет ширину рамки таблицы ), если нужна рамка толщиной 1 пиксель то можно написать border без параметров

Рамка появилась, но она какая то мрачная :) Попробуем разукрасить рамку, добавив еще один параметр bordercolor который определяет цвет рамки. Сделаем нашу рамку ядовито-красного цвета :).

Вот наша таблица с красной рамкой

Теперь изменим цвет фона таблицы. Для этого добавим bgcolor

Вот как выглядит наш пример

Сделаем нашу таблицу с фоновым рисунком

Для этого зальем фоновый рисунок в черновик

Код нашего фонового рисунка

Теперь добавим к нашей таблице параметр background и укажем ссылку на наш фоновый рисунок

Наша таблица теперь выглядит повеселее :)

Попробуем теперь использовать для фона таблицы рисунок сравнительно больного размера. Например вот такой веселый цветочек

Код рисунка

Код таблицы будет таким

Фоновый рисунок есть, но он обрезан по размеру таблицы. Что бы это исправить нужно добавить ширину width и высоту height таблицы. Ширину и высоту таблицы сделаем такими же как и ширина и высота фонового рисунка

Вот как будет выглядеть наша таблица

Наша таблица размещается на странице слева, разместим её посредине страницы добавив параметр align. Допустимы значения этого параметра left - слева, right - справа, center - разместить по центру

Вот как это будет выглядеть

Текст с ячейках таблицы расположен слева и по центру вертикали. Оставим первую ячейку без изменения, а во второй ячейке таблицы разместим текст в верхнем правом углу. Для этого добавим к ячейке 2 параметра align - выравнивание по горизонтале и valign - выравнивание по вертикале.

Если расположение текста в ячейках одинаковое то можно добавить тег . Этот тег позволяет задавать вид одной или несколько строк таблицы.

Обратите внимание что значения align и valign теперь прописаны в теге .

Теперь в обеих ячейках таблицы текст располагается вверху и по центру.

valign может принимать значения top - вверху. middle - по центру, bottom - внизу

Рамка таблицы теперь портит весь вид. Уберем её и окончательно получим такую таблицу

Пожалуй пока все. В следущий раз расскажу о других возможностях вывода таблиц