7. Создайте три бегущие строки:
a. убегающий вправо и исчезающий за границей области текст;
b. колеблющуюся на оранжевом фоне последовательность слов и рисунков;
C. движущийся справа налево и останавливающийся по достижению границы текст.
Основы HTML
Как создаются таблицы?
"Скелет" таблицы выглядит следуюшим образом:
| <table> <tr> <td>Содержимое ячейки</td> <td>Содержимое ячейки</td> ... </tr> <tr> <td>Содержимое ячейки</td> <td>Содержимое ячейки</td> ... </tr>... </table> |
Здесь контейнер <tr>...</tr> определяет строку таблицы, контейнер <td>...</td> - ячейку в строке, контейнер <table>...</table> - собственно таблицу.
Например, код:
| определяет вот такую таблицу:
|
Где же таблица? Без рамки она не видна, поэтому такие таблицы удобно использовать для "разметки" страницы, для расположения фрагментов документов в желаемом порядке.
С помощью "мастера таблиц" редактора HomeSite (или других современных HTML-редакторов) таблицы легко создаются в визуальном режиме.
Атрибуты таблиц и их элементов
Тэги <table>, <tr>, <td> допускает использование большого числа атрибутов, с помощью которых можно изменять размеры, положение и другие характеристики таблиц, строк или отдельных ячеек.
Значения большинства атрибутов можно указать непосредственно при создании таблицы с помощью мастера. Как правило, смысл атрибутов интуитивно понятен.
Рассмотрим их применение на простых примерах.
Пример 1.
| Довольно длинный текст | Текст покороче | Текстик |
| Текстик | Довольно длинный текст | Текст покороче |
Эта таблица, в отличие от предыдущей, имеет фон (bgcolor="#f0f8ff") и границу (border="1") указанного цвета (bordercolor="#6495ed"). Расстояние между ячейками составляет 10 пикселов (cellspacing="10"), отступ от границы ячейки до текста, находящегося внутри нее - 5 пикселов (cellpadding="5"). Таблица расположена по центру документа (align="center"). Если мы будеи изменять ширину окна браузера, то таблица будет "приспосабливаться", составляя 90% от ширины (width="90%"). (Если бы мы задали ширину таблицы не в процентах, а в пикселах, например: width="600"), то она не изменялась бы при изменении ширины экрана.
|
|
| Задание 1: Создайте таблицу из 3-х строк и 2-х столбцов. Задайте для нее цвет фона (или фоновый рисунок) и двойной рамки. В клетках таблицы расположите рисунки или тексты. Обеспечьте отступ от границы ячейки до ее содержимого, равный 10 пикселам, расстояние между ячеек сделайте равным 3 пикселам. Таблицу "прижмите" к правой стороне окна браузера. |
Некоторые из атрибутов тэга <table> применимы к отдельным строкам или ячейкам таблицы. Так, например, можно задать свой цвет или фоновый рисунок для отдельных ячеек.
Атрибут align, заданный для отдельной ячейки, определяет горизонтальное положение текста внутри нее, атрибут valign, заданный для ячейки, определяет вертикальное положение ее содержимого (top, middle или bottom).
Пример 2.
| Для этой ячейки атрибут valign не задан |
| Для этой ячейки атрибут valign="top" | 
|
Обратите внимание на значение атрибутов align для ячеек этой таблицы. Кроме того, здесь граница выполнена в двух цветах - это достигается за счет использования атрибутов bordercolorlight и bordercolordark.
|
|
"Неправильные" таблицы
В таблицах, которые мы рассмотрели, число ячеек в каждой строке было одинаковым. Но как построить вот такую например таблицу?
| 
| 
| 
|
| ЭТО ЖИВОТНЫЕ | ЭТО ФРУКТ |
Казалось бы, нужно в первой строке создать 4 ячейки, а во второй - всего 2. Но тогда получается вот что:
|
|
|
|
| Это животные | Это фрукт |
Чтобы первая ячейка "растянулась" на 3 ячейки, нужно добавить к ее коду атрибут colspan:
| <td colspan=3><font size="+2"><b>ЭТО ЖИВОТНЫЕ</b></font></td> |
Вторая ячейка должна остаться без изменений.
Аналогично, если ячейка должна "охватить" несколько строк, нужно добавить к ее коду атрибут rowspan.
С помощью colspan 'ов и rowspan 'ов можно создавать сколь угодно сложные таблицы, например, вот такую:
| 
| 
| 
|
| 
| ||
| 
| ||
|
|
| 
|
|
|
|
| Задание 2: Создайте таблицу из 4-х строк и 4-х столбцов. С помощью атрибутов colspan и rowspan объедините отдельные ячейки. В объединенные ячейки разместите текст или изображение так, чтобы они располагались посередине ячейки и по горизонтали и по вертикали. |
| Задание 3: С помощью таблицы (без рамки) расположите текст в окне браузера в две колонки, над которыми имеется один общий фрагмент. |
Теперь Вы сможете выполнить задание 1 из раздела "Создание таблиц".
Создание таблиц
1. Создайте таблицу 3 х 4 клетки, расположенную по центру экрана. Задайте цвет фона или фоновый рисунок, цвет и толщину границы таблицы. Клетки таблицы должны содержать гиперссылки (текст, рисунки или кнопки) на соответствующие документы.
|
|
2. С помощью таблицы, занимающей 80% ширины экрана и 70% его высоты, разместите на странице следующие элементы: