ЛР_№3 Таблицы HTML. Лабораторная работа 3. Создание таблиц на webстранице
 Скачать 151.5 Kb.
|
Тег <tr>
...
Тег задает в таблице строку ячеек. Строка таблицы, ограниченная тегами , не имеет никакого содержания, кроме совокупности ячеек таблицы (
Ter плюс свои.
Атрибуты:
background = ur1
Определяет изображение, которое должно использоваться в качестве фона в ячейке.
colspan = число
Задает количество столбцов, которые будет объединять данная ячейка. Значение по умолчанию 1.
height = число, проценты
Задает высоту ячейки в пикселях или в процентах от высоты таблицы. Высота, заданная в первой ячейке, будет использована для остальных ячеек строки.
nowrap
Отменяет автоматическое обтекание текста для данной ячейки. Окончания строк должны быть дополнены тегами <�р> или
.
rowspan = число
Задает количество строк, объединяемых данной ячейкой. .Значение по умолчанию равно 1.
width = число
Задает ширину ячейки в пикселях.
Тег
Атрибуты:
align = left | center | right
Задает способ выравнивания текста (или других элементов) в ячейках текущей строки.
valign = top | middle | bottom
Задает способ вертикального выравнивания текста (или других элементов) в ячейках текущей строки. Значение по умолчаниюmiddle.
colspan = число
Задает количество столбцов, которые будет объединять данная ячейка. Значение по умолчанию 1.
rowspan = число
Задает количество строк, объединяемых данной ячейкой. Значение по умолчанию равно 1.
width = число
Задает ширину ячейки в пикселах.
bgcolor = "#rrggbb" или название цвета.
Задает цвет, используемый в строке. Значение цвета, заданного для фона строки, перекрывает значение, заданное для таблицы в целом.
Простые таблицы – довольно большая редкость. Гораздо чаще встречаются сложные таблицы, в которых ячейки располагаются одновременно в нескольких соединениях столбцах или строках. Ниже приведём пример (см. пример 9), который демонстрирует таблицу 3х3 с заголовками, различными видами разбиения таблицы на ячейки и заданной рамкой. Для объединения ячеек используются атрибуты colspan и rowspan. Атрибут colspan сообщает программе просмотра, что нужно раздвинуть клетку таблицы на несколько столбцов. Например, в нашем примере 9 ячейку А нужно растянуть на ячейку одного столбца и на две строки, для этого задаём colspan=1, а rowspan=2, а ячейку F нужно растянуть на ячейки трёх столбцов и на одну строку, следовательно, colspan=3, а rowspan=1. В данном примере используется атрибут border =8. Он устанавливает ширину рамки таблицы и может принимать любое значение от 0 до 10. Если данный атрибут не указать или задать равным нулю, то у таблицы будет отсутствовать рамка, такая таблица приведена ниже на рисунке 6.
Пример 9:
Обычная таблица 3х3 с заголовками
и различными видами разбиения ячеек и рамкой шириной равной 8
|
Лабораторная работа №3. Создание таблиц на web-странице Цель работы: Научиться создавать таблицы различных форматов и размещать в них любую информацию. Таблицы являются стандартом HTML. В первом приближении таблица Web-страницы – это сетка для показа данных в строках и столбцах. Однако таблицы можно применять как средство обхода ограничений HTML. Например, в HTML нельзя точно разместить элементы по горизонтали, но используя таблицы, можно добавлять столбцы для перемещения элементов. Создание таблиц вручную – одна из наиболее сложных задач в HTML. Сначала формируете таблицу, затем первую строку, затем каждую ячейку с её содержанием. Каждый элемент требует открывающего и закрывающего тегов документа. Если вы забыли один – единственный текстовый маркер, то страницу никто не сможет прочитать. Некоторые Web-редакторы умеют создавать таблицу командами меню и способны изменить размер ячейки, её ширину, размер края и выравнивание содержимого с помощью диалоговой панели свойств. Таблица данных Это пример таблицы в самом основном понимании (именно на него изначально ориентировались создатели HTML) — как строк и столбцов с текстовыми данными. Выравнивание текста Таблицы часто используют, чтобы более наглядно представить выводимый текст за счет создания эффектов, принятых в обычных печатных изданиях: разделения на столбцы, выступающие строки, интервалы. Шаблон страницы Многие Web-дизайнеры используют большие таблицы в качестве контейнеров для задания структуры страницы. Одной из известных конфигураций является создание узких столбцов для пунктов навигации. Контейнер для большого изображения Таблицы могут использоваться для сборки больших изображений, которые предварительно были разделены на несколько частей, что бывает необходимо для получения анимационных эффектов, сменных изображений и т. д. Базовая структура таблицы В своей основе таблицы представляют собой ячейки, объединенные в строки и столбцы. Вы имеете возможность управлять характеристиками вывода на уровне всей таблицы, уровне строки и каждой отдельной ячейки. Минимальный набор тегов для описания таблицы включает <tab1e>, <tr> и <td>. Приводимый ниже код HTML демонстрирует базовую структуру таблицы с четырьмя ячейками:
Teг <table> определяет содержимое таблицы. Каждая строка задается тегом <tr> и состоит из множества ячеек данных (или заголовков). Количество столбцов определяется количеством ячеек в строке. Ячейки с данными обозначаются тегом <td>. Ячейка таблицы может содержать любые данные, пригодные для вывода HTML-документом (форматированный текст, изображения, мультимедийные элементы и даже другие таблицы). Тег Тег таблицы <table> определяет начало и конец таблицы. Закрывающий тег обязателен. Его отсутствие может привести к неверной обработке таблицы некоторыми браузерами. Атрибуты: align = left | right | center Задает выравнивание таблицы в текстовом потоке (аналогично атрибуту выравнивания в теге изображения background = url Определяет изображение, которое будет служить фоном для таблицы. bgcolor = "#rrggbb" или название цвета Задает цвет фона для всей таблицы. border = число Задает ширину (в пикселях) границы вокруг таблицы и ее ячеек. Задание border=0 полностью отменяет появление границы. Значение по умолчанию равно 1. Добавление атрибута border без значения приводит к появлению границы шириной один пиксель. cellpadding = число Задает размер интервала (в пикселах) между границей ячейки и ее содержимым. Значение по умолчанию равно 1. cellspacing = число Задает (в пикселах) размер интервала между ячейками таблицы. Значение по умолчанию равно 2. Если значение атрибута границы (border) больше нуля, то по умолчанию frame использует это значение, пока не установлено другое. height = число, проценты Задает высоту всей таблицы. Значение может быть в пикселях или в процентах от размера окна браузера. hspace = число Содержит размер интервала (в пикселях) слева и справа от выровненной таблицы. (Атрибут аналогичен hspace для тега <img>.) vspace = число Задает размер (в пикселях) свободного пространства над и под выровненной таблицей (аналогично vspace для тега <img>). width = число, проценты Задает общую ширину таблицы. Может быть задан в пикселях или процентах от размера окна браузера. bordered or = “#rrggbb” или название цвета Определяет цвет главной центральной части границы таблицы. bordercolordark = "#rrggbb" или название цвета Задает цвет темной тени, используемой для создания эффекта трехмерного изображения. Тег <caption> название таблицы </</b>caption>. У тега |
||||
| ). Завершающий тег не является обязательным. Атрибуты: align = left | center | right Задает способ выравнивания текста (или других элементов) в ячейках текущей строки. bgcolor = "#rrggbb" или название цвета. Задает цвет, используемый в строке. Значение цвета, заданного для фона строки, перекрывает значение, заданное для таблицы в целом. valign = top | middle | bottom | baseline Задает способ вертикального выравнивания текста (или других элементов) в ячейках текущей строки. Значение по умолчаниюmiddle. Тег |
... | определяет ячейку данных таблицы. Закрывающий тег не обязателен, но его наличие может предотвратить непредсказуемые сбои при выводе таблицы. В частности, они возможны, если содержимым ячейки является изображение. Атрибуты такие же как у тега | ||
| заголовок | ||||
|---|---|---|---|---|
| Заголовок 1 | Заголовок 2 | Заголовок 3 | ||
colspan=1>ячейка таблицы A |
ячейка таблицы B | ячейка таблицы C | ||
| ячейка таблицы D | ячейка таблицы E | |||
colspan=3>ячейка таблицы F |
Таблица
| Таблица в 50% ширины от экрана. Столбец в 80% ширины таблицы | ячейка 2 |
| ячейка 3 | ячейка 4 |
Выполнение данного примера демонстрирует, сколько места занимают на экране таблица, столбцы и ячейки.
Результат:
Рис.10 Пример использования атрибута Width
Таблицы можно использовать и для форматирования текста. Предположим, что нужно выровнять текст по левой границе и отодвинуть его от края. Для достижения цели можно использовать атрибуты таблицы, не указывая строки и ячейки, но указывая невидимый бордюр (NOBORDER).
Пример 11:
vlink= #ff0000>
cellspacing=”20” width=80%>
 Текст программы обучения детей работе с Интернетом…….. |