Помоги проекту - поделись книгой:
<li>одежда, обувь</li>
<li>детские игрушки</li>.
</ul>
<h2>Услуги:</h2>
<ol>
<li>грузоперевозки</li>
<li>ответственное хранение</li>
<li>юридическое консультирование</li>
</ol>
Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.
</body>
</html>
Теперь сохраним выполненные изменения и откроем страницу в окне Интернет-обозревателя – результат показан на рис. 2.19.
Рис. 2.19. Формирование заголовков второго уровня
Далее мы рассмотрим, каким образом можно представить данные на веб-странице в табличном виде.
Представление данных в табличном виде
В рассматриваемом примере мы оформим в виде таблицы перечни товаров и услуг. Для этого изменим программный код таким образом, чтобы они отображались не в виде маркированного и нумерованного списков, а в виде одной таблицы.
Напомним, что для создания таблицы используются теги <table> </table>, <tr> </tr> и <td> </td>. Теперь отредактируем программный код так, как показано в листинге 1.6.
Листинг 1.6. Представление данных в табличном виде
<html>
<head>
<title>Компания "Торговый мир"</title>
</head>
<body>
<h1>Добро пожаловать!</h1>
<i>Мы рады приветствовать вас на сайте нашей компании ООО «Мир торговли»</i>. Уже более <u>пяти лет</u> мы занимается продажей товаров и оказанием услуг. <b>Ниже представлены списки основных позиций, которые мы рады предложить</b>.<br>
<table>
<tr>
<td>Товары</td>
<td>Услуги</td>
</tr>
<tr>
<td>промтовары</td>
<td>грузоперевозки</td>
</tr>
<tr>
<td>стройматериалы</td>
<td>ответственное хранение</td>
</tr>
<tr>
<td>одежда, обувь</td>
<td>консультирование</td>
</tr>
<tr>
<td>детские игрушки</td>
<td>кредитование</td>
</tr>
</table>
Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.
</body>
</html>
Теперь сохраним выполненные изменения с помощью команды главного меню Файл ► Сохранить либо нажатием комбинации клавиш Ctrl+S, и откроем веб-страницу в окне Интернет-обозревателя. Результат выполненных действий представлен на рис. 2.20.
Рис. 2.20. Представление данных в табличном виде
Как видно на рисунке, информация, которая ранее была оформлена в виде маркированного и нумерованного списков, теперь представлена в табличном виде. Перечень товаров содержится в столбце Товары, а перечень услуг – в столбце Услуги.
Однако получившаяся таблица выглядит недостаточно эргономично. В частности, ее неплохо было бы заключить в рамки, а заголовки столбцов каким-то образом выделить.
Первая задача решается с помощью атрибута border тега <table>. Что касается выделения заголовков столбцов, то просто напишем их полужирным шрифтом, а сами эти ячейки выделим желтым цветом.
Для этого нам необходимо отредактировать программный код веб-страницы так, как показано в листинге 1.7.
Листинг 1.7. Форматирование таблицы
<html>
<head>
<title>Компания "Торговый мир"</title>
</head>
<body>
<h1>Добро пожаловать!</h1>
<i>Мы рады приветствовать вас на сайте нашей компании ООО «Мир торговли»</i>. Уже более <u>пяти лет</u> мы занимается продажей товаров и оказанием услуг. <b>Ниже представлены списки основных позиций, которые мы рады предложить</b>.<br>
<table border="2">
<tr>
<td bgcolor="yellow"><b>Товары</b></td>
<td bgcolor="yellow"><b>Услуги</b></td>
</tr>
<tr>
<td>промтовары</td>
<td>грузоперевозки</td>
</tr>
<tr>
<td>стройматериалы</td>
<td>ответственное хранение</td>
</tr>
<tr>
<td>одежда, обувь</td>
<td>консультирование</td>
</tr>
<tr>
<td>детские игрушки</td>
<td>кредитование</td>
</tr>
</table>
Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.
</body>
</html>
Теперь сохраним выполненные изменения с помощью команды главного меню Файл ► Сохранить либо нажатием комбинации клавиш Ctrl+S, и откроем веб-страницу в окне Интернет-обозревателя. Результат выполненных действий представлен на рис. 2.21.
Поделиться книгой: