Название | Адрес | Тип номера | Цена за день |
Центральная | Пр. Мира, д. 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>