Понедельник, 21.08.2017
Игры проги фильмы софт Трафик для мегалайнеров не учитыва...
Меню сайта
Категории раздела
Уроки Photoshop [0]
Photoshop [0]
Кисти для Photoshop [0]
Стили для Photoshop [2]
Рабочий стол [0]
Плагины для Photoshop [3]
Остальное [0]
Софт [0]
Фильмы скачать [0]
Игры [0]
Windows 7 [4]
Статьи [0]
Заработок [1]
Про Ucoz [11]
Про DLE [0]
Вебмастерам [4]
Клипарты [0]
Мини-чат
Наш опрос
Ваш интерес
Всего ответов: 296
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Форма входа
Главная » Файлы » Про Ucoz

Основы html: Как создать таблицу - знать обязательно!!!!
27.04.2011, 17:48
Теперь давайте разберем такой базовый момент, как создание таблицы. Дело в том, что структура дизайна любого сайта представляет собой либо таблицу, либо блоки div. О блоках div я расскажу позднее, а сейчас остановимся на таблицах. Работа с ними позволяет решать нам практические любые вопросы. Давайте рассмотрим этот сайт. По сути от состоит из 2 таблиц . Первая таблица - это шапка, а вторая - это три столбца: боковые блоки и середина. Все остальное уже внутренняя начинка.
Но как же все это организовывается? - спросите Вы. На самом деле все просто. Используется для создания таблицы всего три html-кода:
table - сама таблица
tr - строка
td - столбец
Удивлены? - но это действительно так.
Так структура этого сайта имеет следующий html-код:
<table>
<tr><td>Шапка</td></tr>
</table>
<table>
<tr><td>Блок слева</td><td>Центральная часть</td><td>Блок справа</td></td>
</table>
Вот и все.
Теперь давайте добавим настройку ширины. Шапку делаем по ширине страницы - 100% , блоки слева и справа - по 200 px
<table width="100%">
<tr><td>Шапка</td></tr>
</table>
<table width="100%">
<tr><td width="200px">Блок слева</td><td>Центральная часть</td><td width="200px">Блок справа</td></td>
</table>
Сейчас наша таблица во всю ширину сайта.
Точно так же мы могли указать и фиксированную ширину нашего сайта, и более узкую в %-ах.
Теперь решим следующую проблему. Код, который я написала выше отобразит содержимое Ваших блоков вертикально по центру, а обычно требуется, чтобы выравнивание по вертикали было по верху. Поэтому добавим еще один параметр valign:
<table width="100%">
<tr><td>Шапка</td></tr>
</table>
<table width="100%">
<tr><td width="200px" valign="top">Блок слева</td><td valign="top">Центральная часть</td><td width="200px" valign="top">Блок справа</td></td>
</table>
Вот теперь, все красиво. И можно заниматься наведением красоты.
Для начала отмечу следующий важный момент, который часто забывают новички, но о котором нужно помнить всегда. Все теги, которые Вы открываете, всегда должны быть закрыты, иначе полетит весь Ваш дизайн.
Если Вы написали <table>, то обязательно сразу напишите </table> , написали <tr> - не забудьте про </tr> . Казалось бы простые истины, но у 99% начинающих вебмастеров, если посмотреть исходный код страницы, обязательно можно найти тег, который они не закрыли. Кстати. в любом html-редакторе, в том числе на Ucoz , Вам сразу теги, которые окажутся не к месту, выделят красным. А не к месту они , скорее всего окажутся, именно потому, что Вы забыли какой-то закрывающий тег. Зайдите к себе в шаблон сайта и посмотрите внимательно, все ли ваши теги закрыты.
Теперь по поводу украшательства. Задать фон для ячейки, цвет и размер шрифта и тому подобное, можно сделать прямо в приведенном выше коде, но давайте будем делать все красиво и не загружать код "украшательствами". Вынесем весь внешний вид в CSS. А делается это очень просто. Например, Вы хотите, чтобы фон блока слева был зеленый.
Тогда делаем так. Создаем класс для блока слева leftgreen (обозвать Вы его можете как угодно). Прописываем его в коде
<td width="200px" valign="top" class="leftgreen">Блок слева</td>
А теперь идем в таблицу стилей CSS и там добавляем код:
td.leftgreen {background:#00ff00;}
Все. После этих действий, фон левого блока будет зеленый.
Аналогично можно использовать color - цвет шрифта, font-size - размер шрифта и множество других стилей, с которыми Вы постепенно познакомитесь.
Категория: Про Ucoz | Добавил: daukebak
Просмотров: 1929 | Загрузок: 0 | Комментарии: 2 | Рейтинг: 0.0/0
Всего комментариев: 1
Комментарий #1
Написал: paytightihos   |   05.03.2012

hi
0  
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Block title
Валюта
Поиск
Друзья сайта
Copyright MyCorp © 2017