Сложные таблицы – это таблицы, в которых ячейки спаренные (строенные и т.д.) по строкам или столбцам. Иногда нужны и такие таблицы. Здесь показаны три таблицы и HTML-разметка к ним.

Таблица 1

[400x150]
[600x100]

<center>
<table width="600" cellpadding="5" border="3">
    <caption>Таблица 1</caption>
    <tbody>
        <tr>
            <td><img width="400" height="150" alt="Если рисунка нет, я не виноват." src="http://img1.liveinternet.ru/images/attach/c/0//53/186/53186022_1262357304_ris01.jpg" /></td>
            <td><img width="200" height="150" alt="Если рисунка нет, я не виноват." src="http://img0.liveinternet.ru/images/attach/c/0//53/186/53186024_1262357340_ris02.jpg" /></td>
        </tr>
        <tr>
            <td colspan="2"><img width="600" height="100" alt="Если рисунка нет, я не виноват." src="http://img1.liveinternet.ru/images/attach/c/0//53/186/53186026_1262357372_ris03.jpg" /></td>
        </tr>
    </tbody>
</table>
</center>

Где

<center>... </center> - выравнивание таблицы по центру.

<table width="600" cellpadding="5" border="3">...  </table> - тэги таблицы. Атрибуты в открывающем тэге:

width="600" - ширина таблицы.

cellpadding="5" - расстояние от границ рисунка до внутренних раниц ячейки.

border="3" -толщина рамки таблицы. Эта опция в журнале почему-то не работает.

<caption>Таблица 1</caption>- заголовок таблицы.

<tbody>... </tbody> - тэги внутреннего содержания таблицы.

<tr>... </tr> - тэги строки таблицы.

<td>... </td> - тэги колонок таблицы.

<td colspan="2">- атрибут colspan="2" объединяет две колонки в одну строку.

Черным показаны тэги вставки рисунков. Цифры показывают размеры рисунков в пикселях.

Таблица 2

		[300x200]
[600x200]
	[100x400]	[300x100]
[200x300]		[300x300]

<center>
<table width="600" cellpadding="5" border="3">
    <caption>Таблица 2</caption>
    <tbody>
        <tr>
            <td><img width="200" height="200" src="http://img0.liveinternet.ru/images/attach/c/0//53/187/53187801_1262360274_ris04.jpg" alt="Если рисунка нет, я не виноват." /></td>
            <td><img width="100" height="200" src="http://img1.liveinternet.ru/images/attach/c/0//53/187/53187803_1262360326_ris05.jpg" alt="Если рисунка нет, я не виноват." /></td>
            <td><img width="300" height="200" src="http://img0.liveinternet.ru/images/attach/c/0//53/187/53187805_1262360359_ris06.jpg" alt="Если рисунка нет, я не виноват." /></td>
        </tr>
        <tr>
            <td colspan="3"><img width="600" height="200" src="http://img1.liveinternet.ru/images/attach/c/0//53/187/53187807_1262360398_ris07.jpg" alt="Если рисунка нет, я не виноват." /></td>
        </tr>
        <tr>
            <td><img width="200" height="100" src="http://img0.liveinternet.ru/images/attach/c/0//53/187/53187809_1262360440_ris08.jpg" alt="Если рисунка нет, я не виноват." /></td>
            <td rowspan="2"><img width="100" height="400" src="http://img1.liveinternet.ru/images/attach/c/0//53/187/53187811_1262360477_ris09.jpg" alt="Если рисунка нет, я не виноват." /></td>
            <td><img width="300" height="100" src="http://img0.liveinternet.ru/images/attach/c/0//53/187/53187813_1262360519_ris10.jpg" alt="Если рисунка нет, я не виноват." /></td>
        </tr>
        <tr>
            <td><img width="200" height="300" src="http://img1.liveinternet.ru/images/attach/c/0//53/187/53187815_1262360558_ris11.jpg" alt="Если рисунка нет, я не виноват." /></td>
            <td><img width="300" height="300" src="http://img0.liveinternet.ru/images/attach/c/0//53/187/53187817_1262360598_ris12.jpg" alt="Если рисунка нет, я не виноват." /></td>
        </tr>
    </tbody>
</table>
</center>

Отличительные особенности от Таблицы1.

Во второй строке мы объединили все три колонки.

        <tr>
            <td colspan="3"><img width="600" height="200" src="http://img1.liveinternet.ru/images/attach/c/0//53/187/53187807_1262360398_ris07.jpg" alt="Если рисунка нет, я не виноват." /></td>
        </tr

Атрибут объединяющий колонки colspan="3" в открывающем тэге колонки <td>.

В третьей и четвертых строках внутренние колонки объединены в одну.

        <tr>
            <td><img width="200" height="100" src="http://img0.liveinternet.ru/images/attach/c/0//53/187/53187809_1262360440_ris08.jpg" alt="Если рисунка нет, я не виноват." /></td>
            <td rowspan="2"><img width="100" height="400" src="http://img1.liveinternet.ru/images/attach/c/0//53/187/53187811_1262360477_ris09.jpg" alt="Если рисунка нет, я не виноват." /></td>
            <td><img width="300" height="100" src="http://img0.liveinternet.ru/images/attach/c/0//53/187/53187813_1262360519_ris10.jpg" alt="Если рисунка нет, я не виноват." /></td>
        </tr>
        <tr>
            <td><img width="200" height="300" src="http://img1.liveinternet.ru/images/attach/c/0//53/187/53187815_1262360558_ris11.jpg" alt="Если рисунка нет, я не виноват." /></td>
            <td><img width="300" height="300" src="http://img0.liveinternet.ru/images/attach/c/0//53/187/53187817_1262360598_ris12.jpg" alt="Если рисунка нет, я не виноват." /></td>
        </tr>

Сделано это так.

• В третьей строке первая колонка прописывается нормально - <td>... </td>.
• Вторая колонка пишется с объединяющим строки (третьей и четвертой строки) атрибутом - <td rowspan="2">... </td>.
• Третья колонка этой строки пишется нормально - <td>... </td>.
• В четвертой строке пишутся нормально первая и третья колонки - <td>... </td>, а второй колонки нет совсем (она уже прописана в предыдущей строке).

В разметке хорошо видно, что в третьей строке написаны три колонки, а в четвертой только две.

Таблица 3

[250x300]		[350x100]
		[350x650]
[250x150]

<center>
<table width="600" cellpadding="5" border="3">
    <caption>Таблица 3</caption>
    <tbody>
        <tr>
            <td rowspan="2" colspan="2"><img width="250" height="300" alt="Если рисунка нет, я не виноват." src="http://img0.liveinternet.ru/images/attach/c/0//53/190/53190304_1262364334_ris13.jpg" /></td>
            <td><img width="350" height="100" alt="Если рисунка нет, я не виноват." src="http://img1.liveinternet.ru/images/attach/c/0//53/190/53190306_1262364389_ris14.jpg" /></td>
        </tr>
        <tr>
            <td rowspan="4"><img width="350" height="650" alt="Если рисунка нет, я не виноват." src="http://img0.liveinternet.ru/images/attach/c/0//53/190/53190308_1262364637_ris20.jpg" /></td>
        </tr>
        <tr>
            <td colspan="2"><img width="250" height="150" alt="Если рисунка нет, я не виноват." src="http://img1.liveinternet.ru/images/attach/c/0//53/190/53190310_1262364439_ris15.jpg" /></td>
        </tr>
        <tr>
            <td><img width="100" height="200" alt="Если рисунка нет, я не виноват." src="http://img1.liveinternet.ru/images/attach/c/0//53/187/53187803_1262360326_ris05.jpg" /></td>
            <td><img width="150" height="200" alt="Если рисунка нет, я не виноват." src="http://img0.liveinternet.ru/images/attach/c/0//53/190/53190312_1262364511_ris17.jpg" /></td>
        </tr>
        <tr>
            <td><img width="100" height="100" alt="Если рисунка нет. я не виноват." src="http://img1.liveinternet.ru/images/attach/c/0//53/190/53190315_1262364550_ris18.jpg" /></td>
            <td><img width="150" height="100" alt="Если рисунка нет, я не виноват." src="http://img1.liveinternet.ru/images/attach/c/0//53/190/53190318_1262364581_ris19.jpg" /></td>
        </tr>
    </tbody>
</table></center>

Здесь у нас в левом верхнем углу объединены две колонки первой строки с двумя колонками второй строки. Одновременно использованы атрибуты объединения строк и колонок - <td rowspan="2" colspan="2">.

В третьей колонке второй строки объединениы четыре нижележащие строки - <td rowspan="4">.

И в третьей строке объединены первый две колонки - <td colspan="2">.

Принцип описания следующий:

• тэгов строк <tr>... </tr> пишется столько, сколько всего строк (не больше и не меньше). У нас здесь пять строк - пять раз использованы тэги <tr>... </tr>.
• атрибуты объединения (colspan="" - для колонок и rowspan="" - для строк) пишутся только в открывающем тэге строк <td>.
• последующие тэги колонок пишутся в соответствии с наличием описания колонок в предыдущих строках.
  • Всего колонок три.
  • Но в первой строке описывается только две колонки, поскольку две первые объединены.
  • Во второй строке описывается только одна колонка, поскольку первые две уже описаны в предыдцщей строке объединением строк.
  • В третьей строке описывается  тоже только одна колонка, так как первые две объединяются, а третья описана в предыдущей строке.
  • В четвертой и пятой строках описываются по две колонки, потому что их третьи колонки уже объединены в столбец во второй строке.

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