Основы работы с HTML



секундомер соспр |

Компоновка HTML - использование таблиц - часть 2


<html> <body> <p>Часть этой страницы отформатирован с помощью двух столбцов, как газетная страница, и общего заголовка. Все что находиться ниже этого текста располагается в трех ячейках таблицы, причем для верхней ячейки указан атрибут colspan="2". Как можно видеть, есть левый столбец и правый столбец, а также общий заголовок. Для каждой ячеки указан свой цвет фона.</p> <table border="0" width="100%" cellpadding="0" cellspacing="0"> <tr height="150px"><td width="100%" valign="top" colspan="2" bgcolor="#cccccc"> Этот текст выводится в верхней ячейке таблицы.</td></tr> <tr height="500px"><td width="20%" valign="top" bgcolor="#dddddd"> Этот текст выводится в левом столбце. Ширина этого столбца 20%</td><td width="80%" valign="top" bgcolor="#eeeeeee">А этот текст выводится в правом столбце. Ширина столбца 80%</td></tr> </table> </body> </html>

Пример выполнения данного HTML-кода

Этот же эффект можно получить и применив две таблицы вложенных одна в другую.

<html> <body> <p>Часть этой страницы отформатирован с помощью двух столбцов, как газетная страница, и общего заголовка. Все что находиться ниже этого текста располагается в ячейках таблицы, причем здесь применяется вложенностть одной таблицы в другую. Как можно видеть, есть левый столбец и правый столбец, а также общий заголовок. Для каждой ячеки указан свой цвет фона.</p>

<table border="0" width="100%" cellpadding="0" cellspacing="0"> <tr height="150px"><td width="100%" valign="top" bgcolor="#cccccc"> Этот текст выводится в верхней ячейке таблицы.</td></tr>

<tr height="500px"><td width="100%"> <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0"> <tr><td width="20%" valign="top" bgcolor="#dddddd"> Этот текст выводится в левом столбце. Ширина этого столбца 20%</td><td width="80%" valign="top" bgcolor="#eeeeeee"> А этот текст выводится в правом столбце. Ширина столбца 80%</td></tr></table> </td></tr> </table>

</body> </html>

Пример выполнения данного HTML-кода

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




Содержание  Назад  Вперед