Задание №7
Работа с таблицами в HTML.
Используя таблицы, можно создавать такие эффекты, как верстка в несколько колонок, применение эффектов состыковки картинки и фона, тонкие линии на всю ширину или высоту странички и т.д.
Таблица начинается открывающимся тегом <TABLE> и завершается закрывающимся </TABLE>. Тег <TABLE> может включать следующие атрибуты:
-
WIDTH="n"
Определяет ширину таблицы в пикселях или процентах, по умолчанию ширина таблицы определяется содержимым ячеек.
BORDER="n"
Устанавливает толщину рамки. По умолчанию n=0 - таблица рисуется без рамки.
BORDERCOLOR="#FFFFFF"
Устанавливает цвет окантовки, где #FFFFFF (белый) - шестнадцатеричное значение цвета.
BGCOLOR="#FFFFFF"
Устанавливает цвет фона для всей таблицы, где #FFFFFF - шестнадцатеричное число.
BACKGROUND="image.gif"
Заполняет фон таблицы изображением.
CELLSPACING="n"
Определяет расстояние между рамками ячеек таблицы в пикселях.
CELLPADDING="n"
Определяет расстояние в пикселях между рамкой ячейки и текстом.
ALIGN=LEFT
Определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения аттрибута: LEFT (слева), CENTER (по центру страницы) и RIGHT (справа).
FRAME="значение"
Управляет внешней окантовкой таблицы, может принимать следующие значения: VOID - окантовки нет (значение по умолчанию). ABOVE - только граница сверху. BELOW - только граница снизу. HSIDES - границы сверху и снизу. VSIDES - только границы слева и справа. LHS - только левая граница. RHS - только правая граница. BOX - рисуются все четыре стороны. BORDER - также все четыре стороны.
RULES="n"
Управляет линиями, разделяющими ячейки таблицы. Возможные значения (n): NONE - нет линий (значение по умолчанию). GROUPS - линии будут только между группами рядов. ROWS - только между рядами. COLS - только между колонками. ALL - между всеми рядами и колонками.
Таблица может включать заголовок, который располагается между тегами <CAPTION></CAPTION>. Он должен быть непосредственно после тега <TITLE>. К заголовку возможно применение атрибута ALIGN, определяющего его положение относительно таблицы:
TOP - значение по умолчанию, заголовок над таблицей по центру. LEFT - заголовок над таблицей слева. RIGHT - заголовок над таблицей справа. BOTTOM - заголовок под таблицей по центру.
Теперь о строках и ячейках таблицы. Строки таблицы начинаются открывающимся тэгом <TR> и завершаются закрывающимся </TR>, а каждая ячейка таблицы начинается тегом <TD> и завершается </TD>. Данные теги могут иметь такие атрибуты:
-
Следующие атрибуты могут применяться для строк и ячеек.
ALIGN=LEFT
Устанавливает горизонтальное выравнивание текста в ячейках строки. Может принимать значение LEFT (выравнивание влево), CENTER (выравнивание по центру) и RIGHT (вправо).
VALIGN=CENTER
Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: TOP (выравнивание по верхнему краю), CENTER (выравнивание по центру - это значение принимается по умолчанию), BOTTOM (по нижнему краю).
BGCOLOR="#FFFFFF"
Устанавливает цвет фона строки или ячейки.
BACKGROUND="image.gif"
Заполняет фон строки или ячейки изображением.
Следующие атрибуты могут применятся только для ячейек.
WIDTH="n"
Определяет ширину ячейки в n пикселях.
HEIGHT="n"
Определяет высоту ячейки в n пикселях.
COLSPAN="n"
Растягивание ячейки по горизонтали. Например, <TD COLSPAN="2"> означает, что ячейка будет растянута на 2 колонки.
ROWSPAN="n"
Растягивание ячейки по строке. Например, <TD ROWSPAN="2" означает, что ячейка будет растянута на две строки таблицы.
NOWRAP
Присутствие этого атрибута показывает, что текст должен размещаться в одну строку
BACKGROUND="image.gif"
Заполняет фон ячейки изображением.
Кроме этого, любая ячейка таблицы может быть определена не тегами <TD></TD>, а тегами <TH></TH> - Table Header (заголовок таблицы). В принципе, это обычная ячейка, но текст внутри этих тегов будет выделен полужирным шрифтом и отцентрирован.
Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект (non-breaking space - неразрывающий пробел). Ячейка по-прежнему будет пуста, а рамка вокруг нее будет ( - обязательно должен набираться строчными буквами и закрываться точкой с запятой).
И еще - имейте ввиду, что теги, устанавливающие шрифт (<B>, <I>, <FONT SIZE="n", FONT COLOR="#FFFFFF"), необходимо повторять для каждой ячейки.
Создайте новый HTML документ.
Создайте пустую таблиц, нажав кнопку Insert Table вкладки Common панели объектов. Также вы можете выбрать пункт Table меню Insert или нажать комбинацию клавиш <Ctrl>+<Alt>+<T>. В любом случае на экране появится диалоговое окно Insert Table, показанное ниже.
В поле ввода Width задается ширина таблицы. Возможно задание ширины как в пикселах, так и в процентах от ширины родителя. В раскрывающемся списке, расположенном справа от этого поля ввода, вы должны будете выбрать пункт Percent (проценты) или Pixels (пикселы).
Задайте значения в полях ввода как показано на рисунке, нажмите кнопку ОК. Мы не будем говорить, что именно вам нужно вводить — поэкспериментируйте сами. Так или иначе, наша первая таблица будет чисто учебной. Во всяком случае, у вас должно получиться что-то похожее на рисунок ниже. Теперь поставьте текстовый курсор в любую ячейку таблицы и наберите какой-нибудь текст. Повторите то же самое с любыми другими ячейками. В одну из ячеек можете вставить любое графическое изображение. Вы даже можете вставить в ячейку таблицы другую таблицу. Попробуйте - и это получится!
Сохраните эту таблицу в файле d007_1.html.
Предположим, вам необходимо добавить новую строку или новый столбец. Для этого поместите текстовый курсор в ячейку строки, над которой будет добавлена новая, и выберите пункт Insert Row в подменю Table меню Modify или контекстного меню. Также вы можете нажать комбинацию клавиш <Ctrl>+<M>. Для добавления столбца поставьте текстовый курсор в ячейку, справа от которой будет добавлен новый столбец, и выберите пункт Insert Column в подменю Table меню Modify или контекстного меню. Если вы привыкли работать с клавиатурой, нажмите комбинацию клавиш <Ctrl>+<Shift>+<A>. Это простейшие и наиболее быстрые команды вставки строки или столбца.
Для того чтобы разделить ячейку таблицы, нажмите кнопку разделения ячейки, находящуюся в нижнем левом углу редактора свойств.
Вы также можете выбрать пункт Split Cell в подменю Table меню Modify или контекстного меню либо нажать комбинацию клавиш <Ctrl>+<Alt>+<S>. В любом из этих случаев на экране появится диалоговое окно Split Cell.
Добавьте в таблицу несколько рядов или столбцов, внесите в них необходимые данные.
Объедините некоторые ячейки в таблице.
Сохраните документ под именем d007_2.html.
Чтобы добраться до параметров ячейки, совсем не обязательно ее выделять. Просто поставьте в нее текстовый курсор, и редактор свойств тотчас предложит вам задать ее параметры.
Раскрывающийся список Horz позволяет задать горизонтальное выравнивание содержимого ячейки. Здесь доступны четыре пункта:
Default — выравнивание по умолчанию, обычно по левому краю, в некоторых случаях — по центру;
Left — выравнивание по левому краю;
Center — по центру;
Right — по правому краю.
Аналогично раскрывающийся список Vert задает вертикальное выравнивание содержимого ячейки. Здесь доступно пять пунктов:
Default — выравнивание по умолчанию, обычно посередине;
Тор — выравнивание по верху;
Middle — посередине;
Bottom — по низу;
Baseline — по базовой линии.
В полях ввода W и Н вводятся, соответственно, величины ширины ячейки и высоты строки, в которой она находится. Вы можете задать их в пикселах или процентах от ширины таблицы. Во втором случае просто добавьте после цифр знак процента. Если вы ничего не введете в это поле ввода, то ячейка займет все свободное пространство.
Флажок No Wrap запрещает перенос строк внутри ячейки. В этом случае ячейка растягивается по ширине, чтобы вместить весь имеющийся в ней текст, который в этом случае будет "вытянут" в одну строку. Обычно Web-обозреватель растягивает ячейку по ширине только в самом крайнем случае, если в тексте встретится очень длинное слово, а вместо этого растягивает ее по вертикали и переносит текст по строкам. Используйте этот параметр только для декоративных целей и с большой осторожностью, иначе ваша таблица может оказаться столь широкой, что пользователю придется прокручивать ее по горизонтали.
Создайте таблицу, показанную на рисунке ниже. Для этого создайте новый HTML документ.
Сохраните документ, содержащий таблицу под именем d007_3.html.
В левом нижнем углу редактора свойств есть группа из шести кнопок, управляющих значениями ширины и высоты ячеек и строк таблицы.
Каждая из этих кнопок позволит вам изменить способ работы с размерами ячеек таблицы (пикселы, проценты).
Создайте новый HTML документ.
Создайте таблицу по аналогии с таблицей, показанной ниже.
Сохраните документ под именем d007_4.html.