Уважаемый посетитель!
Здесь Вы можете
узнать как научиться
делать свои
сайты.

Сайт

Уроки сайтостроения
Сайт Строим сайт Скрипты Книги

Создаем свой сайт.

Как покрасить таблицу?



     Открываем созданный на прошлом занятии файл с именем sait1.htm в папочке "проба" в программе FrontPage и перед нами откроется такое окно с таблицей и текстом в ней:



     Переходим в режим «конструктора». Перед нами код таблицы:

 

<div align="center">
<table cellpadding="10" cellspacing="10" border="1" width="750" id="table1">
<tr>
<td colspan="3">
<h1 align="center">Самый лучший сайт</h1>
</td>
</tr>
<tr>
<td width="25%">
<p>&nbsp;&nbsp;&nbsp;&nbsp; <b>Меню сайта</b><br>
1. Главная страница <br>
2. Вторая страница <br>
3. Третья страница </p>
</td>
<td width="50%">
<p>&nbsp;&nbsp;&nbsp;&nbsp; Зима. По календарю она длится три месяца: декабрь январь и февраль,
но чаще всего в центральной и более северной России зима тянется с ноября
по март месяц. Погода зимой бывает разная, изменчивая, как цены на нефть,
как курс рубля к главным валютам мира. Но, россияне не боятся ни зимы,
ни ни колебаний цен на нефть, ни изменчивость рублевого курса.
Курс у нас у всех один - поиск своего места в жизни и
обретение семейного уюта и счастья...</p>
</td>
<td>
<p><b> &nbsp;&nbsp;&nbsp;&nbsp; Сегодня в мире:</b><br>
Цена на нефть - 35 дол. за барель <br>
1 доллар - 75 рублей <br>
1 евро - 82 рубля </p>
</td>
</tr>
<tr>
<td colspan="3">
<h3 align="center">Автор сайта - Петров Сидор Иванович</h3>
</td>
</tr>
</table>
</div>
 

     Для того, чтоб создать цветной фон той или иной ячейки таблицы надо в коде ячейки <td colspan="3">  установить курсор после "3" и нажать пробел. Перед Вами высветиться меню с перечнем атрибутов, которые можно использовать для этой (и других тоже) ячейки. Выбираем  bgcolor, ставим после него знак = и ", то есть у нас получится  bgcolor=". После чего программа предлагает нам выбрать цвет из своей панели. Выбираем, например, бирюзовый и закрываем свой выбор кавычкой. В итоге получаем весь код ячейки таковой: <td colspan="3" bgcolor="#33CCFF">.

      Похожие операции проделываем и с остальными ячеками. Для боковых ячеек определяем бледно бирюзовый цвет bgcolor="#99FFCC">, для средней бледно светло зеленый

bgcolor="#CCFF99", а для нижней зеленый bgcolor="#33CC33".

       В итоге, после этого код нашей таблицы становится таким:

 

<div align="center">
<table cellpadding="10" cellspacing="10" border="1" width="750" id="table1">
<tr>
<td colspan="3" bgcolor="#33CCFF">
<h1 align="center">Самый лучший сайт</h1>
</td>
</tr>
<tr>
<td width="25%" bgcolor="#99FFCC">
<p>&nbsp;&nbsp;&nbsp;&nbsp; <b>Меню сайта</b><br>
1. Главная страница <br>
2. Вторая страница <br>
3. Третья страница </p>
</td>
<td width="50%" bgcolor="#CCFF99">
<p>&nbsp;&nbsp;&nbsp;&nbsp; Зима. По календарю она длится три месяца: декабрь январь и февраль,
но чаще всего в центральной и более северной России зима тянется с ноября
по март месяц. Погода зимой бывает разная, изменчивая, как цены на нефть,
как курс рубля к главным валютам мира. Но, россияне не боятся ни зимы,
ни ни колебаний цен на нефть, ни изменчивость рублевого курса.
Курс у нас у всех один - поиск своего места в жизни и
обретение семейного уюта и счастья...</p>
</td>
<td bgcolor="#99FFCC">
<p><b>&nbsp;&nbsp;&nbsp;&nbsp; Сегодня в мире:</b><br>
Цена на нефть - 35 дол. за барель <br>
1 доллар - 75 рублей <br>
1 евро - 82 рубля </p>
</td>
</tr>
<tr>
<td colspan="3" bgcolor="#33CC33">
<h3 align="center">Автор сайта - Петров Сидор Иванович</h3>
</td>
</tr>
</table>
</div>
 

      А таблица примет такой вот вид:

 

 

       Но кроме самой таблицы и ее ячеек, можно также подкрасит и фон самой страницы. Для чего в теге <body> устанавливаем для контраста желтый цвет bgcolor="#FFFF66". Но после этого все просветы между ячейками также станут желтыми чего бы не хотелось.

       Поэтому в теге <table>  еще и атрибут bgcolor="#FFFFFF", то есть общий фон самой таблицы оставляем белым.

       Теперь общий код нашей страницы будет выглядеть так:

 

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Новая страница 1</title>
</head>

<body bgcolor="#FFFF66">
<div align="center">
<table cellpadding="10" cellspacing="10" border="1" width="750" id="table1" bgcolor="#FFFFFF">
<tr>
<td colspan="3" bgcolor="#33CCFF">
<h1 align="center">Самый лучший сайт</h1>
</td>
</tr>
<tr>
<td width="25%" bgcolor="#99FFCC">
<p>&nbsp;&nbsp;&nbsp;&nbsp; <b>Меню сайта</b><br>
1. Главная страница <br>
2. Вторая страница <br>
3. Третья страница </p>
</td>
<td width="50%" bgcolor="#CCFF99">
<p>&nbsp;&nbsp;&nbsp;&nbsp; Зима. По календарю она длится три месяца: декабрь январь и февраль,
но чаще всего в центральной и более северной России зима тянется с ноября
по март месяц. Погода зимой бывает разная, изменчивая, как цены на нефть,
как курс рубля к главным валютам мира. Но, россияне не боятся ни зимы,
ни ни колебаний цен на нефть, ни изменчивость рублевого курса.
Курс у нас у всех один - поиск своего места в жизни и
обретение семейного уюта и счастья...</p>
</td>
<td bgcolor="#99FFCC">
<p><b>&nbsp;&nbsp;&nbsp;&nbsp; Сегодня в мире:</b><br>
Цена на нефть - 35 дол. за баррель <br>
1 доллар - 75 рублей <br>
1 евро - 82 рубля </p>
</td>
</tr>
<tr>
<td colspan="3" bgcolor="#33CC33">
<h3 align="center">Автор сайта - Петров Сидор Иванович</h3>
</td>
</tr>
</table>
</div>
</body>

</html>
 

       А сама таблица на фоне страницы так:

 

     

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

      Удачи Вам в обучении!

Динамичный сайт

Птицы мира

Звери мира Антилопа, волк, заяц, еж, лиса, медведь, тигр и другие...

Рыбы мира Белуга, Вьюн, Вобла, Горбуша, Голавль, Кета, Карась, Окунь, Пескарь и другие...

Новый эконом

Космос, вселенная Земля, Солнце, Луна, звезды, планеты, спутники и другое...

Растения мира, флора Акация, Астра, Аир, Анчар, Береза, Белена, Багульник и другие...

Легкая атлетика

Наша природа Объекты природы, явления природы, понятия природы и другое...

Здоровая пища
Анонсы, Абрикосы, Бананы, Виноград, Капуста, Картофель, Лук, Морковь и другие ...

Газета А589

Физкультура
Ходьба, бег, гинатика и другое для поддержания здоровья...

Здорово!
Состояние здоровья, поддержание и улучшение здоровья, лечение...

Работа, дело

Свой сайт
Изучение языков HTML, CSS, JavaScript, создание и размещение своего сайта...

Кафе "Одесса" Ярославль Завтраки, обеды, свадьбы, юбилеи, встречи друзей, поминки и другое...

Ярославские свадьбы Свадьбы в Ярославле, традиции, места проведения и другое...


Отряды птиц
Воробьиные, Веслоногие, Буревестники, Куриные...

Макроэкономика
Экономика государства, бюджет, налоги, пенсии, инфляция...

Школа спринта
Учись быстро бегать, тренировки...

Птицы на А и Б
Аист, Альбатрос, Авдотка, Бекас, Баклан, Буревестник...

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

Школа метателя
Техника, физиология, этапы и периоды подготовки, структура и примеры тренировок...

Основы экономики
Понятия, Законы, Аксиомы, Производство, Разделение труда, Обмен, Прибыль...

Школа прыгуна
Прыжок в длину, тройной, прыжок в высоту...

Работа
Выбор профессии, обучение, поиск, собеседование, карьерный рост...

Птицы на В и Г
Варакушка, Воробей, Ворона, Грач, Гриф, Гусь...

Школа многоборца
Виды легкой атлетики, этапы и периоды подготовки, структура и примеры тренировок...

Своё дело
Теория, практика, учет, финансы...


Эмблема сайта Сайт Строим сайт Скрипты Книги
счетчик посещений Рейтинг@Mail.ru Почта: nashocag@yandex.ru sait.a589.ru © 2017 "Сайт"