Вложенные таблицы

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

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

Здесь к примеру будет меню сайта
Сюда можно расположить информативную часть
подменю 1
подменю 2
подменю 3
Здесь непосредственно содержание самой страницы. Эту часть можно до отказа забить рекламой, баннерами, новостями и т.д.

Код такой таблицы будет выглядеть следующим образом:

  <table border="1" width="600" height="200" align="center">
<tr>
<td colspan="3" valign="top" height="30"><Center>Здесь к примеру будет меню сайта</Center></td>
</tr>
<tr align="center">
<td valign="top" width="150" height="170">Сюда можно расположить
информативную часть
<br>
<table border="1" width="120">
<tr>
<td>подменю 1</td>
</tr>
<tr>
<td>подменю 2</td>
</tr>
<tr>
<td>подменю 3</td>
</tr>
</table>

</td>
<td width="300">Здесь непосредственно содержание самой страницы.</td>
<td valign="top" width="150">Эту часть можно до отказа забить рекламой, баннерами, новостями и т.д.</td>
</tr>
</table>

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

В данном примере как видите я использовал атрибуты width и height как для самой таблицы так и для ее ячеек размеры заданы в пикселях. Ширина самой таблицы 600 высота 200 пикселей. Для ячеек я задал ширину 150, 300, 150 то есть ширина всех ячеек в сумме получается 600, а высота ячеек была задана 30 и 170 в итоге их сумма равна высоте всей таблицы. А для вложенной таблицы ширина самой таблицы задана 120 пикселей.

Механизм Html дает возможность создания таблиц разной сложности, создать таблицу со многими вложенными таблицами, раскрасить их в разные цвета радуги и т.д. все это не сложно.

Сложность будет заключаться в том, что вы сверстали выглядело бы под разными браузерами одинаково. Опытные WEB мастера стараются просматривать сверстанную ими страницу под разными типами браузеров, так как у каждого браузера есть свои недостатки и капризы. Например вы создали таблицу для разметки своей страницы и решили вложить в нее вложенную таблицу, фон которой должен отличаться от фона основной таблицы. Конечно можно использовать атрибут bgcolor, но не все так просто, если IE (Internet Explorer) отображает атрибут bgcolor для вложенных таблиц, то некоторые другие браузеры просто отказываются отображать этот атрибут для вложенных таблиц, поэтому приходится изыскивать другие пути, используя атрибут background для вложенной таблицы.

На примере это будет выглядеть так:

Здесь к примеру будет меню сайта
Сюда можно расположить информативную часть
подменю 1
подменю 2
подменю 3
Здесь непосредственно содержание самой страницы. Эту часть можно до отказа забить рекламой, баннерами, новостями и т.д.

Фон ячеек вложенной таблицы задан атрибутом background, в качестве картинки использован квадрат 1х1 пикселя определенного цвета, так для первой ячейки я использовал квадрат розового цвета, для средней желтого и для нижнего зеленого.
Запись будет следующего плана.

  <table border="1" width="600" height="200" align="center">
<tr>
<td colspan="3" valign="top" height="30"><Center>Здесь к примеру будет меню сайта</Center></td>
</tr>
<tr align="center">
<td valign="top" width="150" height="170">Сюда можно расположить
информативную часть
<br>
<table border="1" width="120">
<tr>
<td background="Fon1.jpg">подменю 1</td>
</tr>
<tr>
<td background="Fon2.jpg">подменю 2</td>
</tr>
<tr>
<td background="Fon3.jpg">подменю 3</td>
</tr>
</table>
</td>
<td width="300">Здесь непосредственно содержание самой страницы.</td>
<td valign="top" width="150">Эту часть можно до отказа забить рекламой, баннерами, новостями и т.д.</td>
</tr>
</table>

Как я уже говорил, что вашу страничку могут рассматривать под разными браузерами, но еще и с разными разрешениями экрана. На данное время самые используемые разрешения - 800x600, 1024x768, 1280х1024. Никогда не стоит забывать о том, что вашу страницу могут смотреть под большим или меньшим разрешением, и что в один прекрасный момент ваши таблицы не поедут.
На следующей страницы обучения мы рассмотрим как можно создать страницу с таблицами, которую можно будет выложить в Интернет и показать знакомым и друзьям.


Вернуться назад Перейти к следующей странице

2009 - 2018г. andron09_73@mail.ru
  магазин игр