double arrow

Характеристики гостиниц

Название Адрес Тип номера Цена за день

Центральная

Пр. Мира, д. 4

Люкс одноместный $150
Люкс двухместный $250
Одноместный $80

Спортивная

Бульвар Профсоюзов, д. 15

Одноместный $50
Двухместный $80
Вокзальная Привокзальная пл., д. 3 Четырехместный $50

 

1. Подготовьте бланк для HTML-документа.

2. Введите в созданный документ стандартные теги:

<HTML>

<HEAD>

<TITLE> Таблица ФИО </TITLE>

</HEAD>

<BODY>

…………..

</BODY>

</HTML>

Вместо ФИО в контейнере < TITLE >, естественно, должна стоять Ваша фамилия. Теги набираются в английском регистре. Для ускорения и облегчения набора желательно активно пользоваться командами копирования и переноса информации.

3. Внутри контейнера <BODY> вставьте скелетные теги таблицы:

<TABLE>

<CAPTION>

                                               Характеристики гостиниц

                                                           </CAPTION>

<TR>

</TR>

<TR>

</TR>

……..

<TR>

</TR>

</TABLE>  

Количество контейнеров для строк рассчитывается так же, как в редакторе Word (по самому мелкому дроблению). В нашем примере – 7.

Отцентрируйте заголовок таблицы. Расположите ее на цветном фоне. Выберите цвет для шрифта.

4. Заполните первую строку таблицы. Так как это «шапка» с названиями столбцов, для ячеек используйте контейнеры <TH> … </TH>. Окончательно контейнер первой строки выглядит так:

<TR>

<TH> Название </TH> <TH> Адрес </TH>
<TH>
Тип номера </TH> <TH> Цена за день </TH>

</TR>

5. Заполните вторую строку таблицы. Так как это уже содержание таблицы, для ячеек используйте контейнеры <TD> … </TD>. Первая и вторая ячейки по высоте занимают 3 строки. Чтобы объединить их, добавьте атрибуты ROWSPAN=3. Окончательно контейнер второй строки выглядит так:

<TR>

<TD ROWSPAN=3 > Центральная </TD>
<TD ROWSPAN=3>
Пр. Мира, д. 4 </TD>
<TD>
Люкс одноместный </TD> <TD> $150 </TD>

</TR>

6. Заполните контейнер третьей строки таблицы. Для ячеек по-прежнему используйте контейнеры <TD> … </TD>. Первая и вторая ячейки входят в объединенные раньше блоки, их объявлять не надо. А третья и четвертая ячейки содержат новую информацию. Скопируйте контейнеры соответствующих ячеек из второй строки и поменяйте в них содержимое. Окончательно контейнер этой строки выглядит так:

<TR>

<TD > Люкс двухместный </TD> <TD> $250 </TD>

</TR>

7. Аналогично п. 6 заполните контейнер четвертой строки. Сохраните документ и просмотрите его через Explorer. В таблице пока нет разлиновки, но, если все сделано правильно, структура расположения информации должна просматриваться. Если нет – исправляйте ошибки.

8. Добавьте в таблицу сведения о гостинице Спортивная. Они располагаются в пятой и шестой строках. Похожие строки находятся во второй и третьей строках таблицы, и теги, создающие их, уже сформированы. Скопируйте теги из второй и третьей строк соответственно в контейнеры пятой и шестой строк, замените содержание ячеек. Так как здесь первая и вторая ячейки по высоте занимают только 2 строки, поменяйте значение атрибута ROWSPAN. Получаем для новых строк:

<TR>

<TD ROWSPAN=2> Спортивная </TD>

<TD ROWSPAN=2>  Бульвар Профсоюзов, д. 15 </TD>

<TD> одноместный </TD> <TD> $50 </TD>

</TR>

<TR>

<TD> двухместный </TD> <TD> $80 </TD>

</TR>

9. Добавьте в таблицу сведения о гостинице Вокзальная. Они располагаются в седьмой строке. В ней нет объединения ячеек, все четыре ячейки содержат новую информацию. Можно скопировать теги второй строки, убрать в них атрибуты ROWSPAN и просто заменить информацию в контейнерах ячеек:

<TR>

<TD >  Вокзальная </TD>

<TD>  Привокзальная пл., д. 3 </TD>

<TD> Четырехместный </TD> <TD> $50 </TD>

</TR>


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями: