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

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

cellpadding — определяет расстояние между рамкой каждой ячейки html таблицы и содержащемся в ней материалом;
cellspacing – регулирует пространство между ячейками html таблицы.

Теперь давайте вставим все вышеперечисленные атрибуты в нашу таблицу:

<table border="2" bordercolor="#990066" 
bgcolor="#FF9933" cellspacing="5" cellpadding="5">
<tr>
<td height="50" width="200" valign="top" 
align="center" bgcolor="#9999FF" 
colspan="2">строчка1 столбец1</td>
</tr>
<tr>
<td height="100" width="200" valign="middle" 
align="left">строчка 2 столбец1</td> 
<td width="150" valign="middle" align="left" 
rowspan="2" bgcolor="#9999FF">строчка 2 столбец2</td>
</tr>
<tr>
<td height="50" width="200" valign="bottom" 
align="right">строчка 3 столбец1</td> 
</tr>
</table>

посмотреть результат

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

<table border="2" bordercolor="#990066" 
bgcolor="#FF9933" cellspacing="5" cellpadding="5">
<tr>
<td height="50" width="200" valign="top" 
align="center" bgcolor="#9999FF" 
colspan="2">строчка1 столбец1</td>
</tr>
<tr>
<td height="100" width="200" valign="middle" 
align="left">строчка 2 столбец1</td> 
<td width="150" valign="middle" align="left" 
rowspan="2" bgcolor="#9999FF" background="http://rabotalegko.com/fotik/foto-235.gif"></td>
</tr>
<tr>
<td height="50" width="200" valign="bottom" 
align="right">строчка 3 столбец1</td> 
</tr>
</table>

посмотреть результат

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

Пример кода вложенной таблицы:

<table border="2" bordercolor="#990066" 
bgcolor="#FF9933" cellspacing="5" cellpadding="5">
<tr>
<td height="50" width="200" valign="top" 
align="center" bgcolor="#9999FF" 
colspan="2">строчка1 столбец1</td>
</tr>
<tr>
<td height="100" width="200" valign="middle" 
align="left">строчка 2 столбец1</td> 
<td width="150" valign="middle" align="left" 
rowspan="2" bgcolor="#9999FF">

<table cellspacing="5" border="2" bordercolor="#FF0033">
<tr>
<td width="150" height="30" bgcolor="#006666" 
align="center">строка1</td>
</tr>
<tr>
<td width="150" height="30" bgcolor="#006666" 
align="center">строка2</td>
</tr>
<tr>
<td width="150" height="30" bgcolor="#006666" 
align="center">строка3</td>
</tr>
</table>

</td>
</tr>
<tr>
<td height="50" width="200" valign="bottom" 
align="right">строчка 3 столбец1</td> 
</tr>
</table>

посмотреть результат

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

Поделиться в соц. сетях

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

Оставить комментарий

http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Goon Каталог сайтов Рейтинг@Mail.ru Яндекс.Метрика