Loading

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

Уроки HTML для начинающих.
Таблица HTML (урокN6)


В этом уроке(N6) мы с Вами рассмотрим как сделать вложенные таблицы


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

Пример:
Здесь я выделила вложенную таблицу bgcolor="#FFFF00"- жёлтым цветом ячейки

1 ячейка 2 ячейка
3 яйейка 4 яйейка
5 яйейка 6 яйейка
7 яйейка 8 яйейка 9 яйейка

Вот код

<table border="5">
<tr>
<td>1 ячейка</td>
<td>2 ячейка</td>
<td><table border="1" bgcolor="#FFFF00">
<tr>
<td>3 яйейка</td>
<td>4 яйейка</td>
</tr>
<tr>
<td>5 яйейка</td>
<td>6 яйейка</td>
</tr>
</table></td>
</tr>
<tr>
<td>7 яйейка</td>
<td>8 яйейка</td>
<td>9 яйейка</td>
</tr>
</table>


Вот ещё один пример:


Здесь будет Ваш текст!А это от меня совет:В вложенных таблицах ни чего сложного нет! Возьмите мой код вставьте в HTML редактор и поиграйте с атрибутом bgcolor="#",меняйте цвет на свой и тогда сразу всё будет понятно где какая ячейка.Я так училась,чтобы быстрее понять))
 
Вот таблица, которая показует голосование в блоге
Пробуйте и всё получится!



отлично проголосовало...%
понятно проголосовало...%
плохо проголосовало...%



Вот и всё.

Итак, перед нами таблица из одного ряда, с тремя ячейками (столбцами), в третьей ячейке нельзя не заметить вложенную таблицу (с голосованием). Теперь код:

<table border="5">
<tr>
<td width="200" valign="top" bgcolor="#FFFF00" align="center"><br />
Здесь будет Ваш текст!</td>
<td width="10" bgcolor="FFFFFF">&nbsp;</td>
<td width="300" valign="top" bgcolor="#FFFF00" align="center"><br />
голосование в блоге<table cellspacing="3"><tr>
<td width="150" bgcolor="#FFFFFF">отлично</td>
<td bgcolor="#FFFFFF">проголосовало...%</td>
</tr>
<tr>
<td width="150" bgcolor="#FFFFFF">понятно</td>
<td bgcolor="#FFFFFF">проголосовало...%</td>
</tr>
<tr>
<td width="150" bgcolor="#FFFFFF">плохо</td>
<td bgcolor="#FFFFFF">проголосовало...%</td>
</tr>
</table><br><br><br />
Вот и всё.</td>
</tr>
</table>


На этом урок заканчивается))Что не понятно пишите,будем разбираться вместе.

Атрибуты таблицы. ЗДЕСЬ.
Все цвета интернета ЗДЕСЬ
Подобрать HTML код в ручную ЗДЕСЬ





Понравился пост - добавь в закладки, чтобы не потерять:

Похожие по тематике посты - еще почитать:

Комментариев нет:

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

Подпишитесь на инфо-БУМ по е-мейл здесь