Практическая работа №3 Тема: «Использование таблиц в веб-приложениях»
Работа с таблицами в Visual studio
Рассмотрим работу с серверным элементом управления Table. Так как он относится к разряду серверных элементов, им, возможно, управлять в коде приложения, добавляя и удаляя строки и столбцы, а также изменяя их содержимое. Эти же операции можно проделать и в процесс разработки с использованием стандартных средств визуального редактирования Visual Studio.
Для добавления элементов (столбцов и строк) к элементу Table в процессе разработки необходимо выполнить следующие операции:
Добавить элемент Table на страницу.
В панели Properties выбрать пункт Rows и нажать кнопку
.В открывшемся окне TableRow Collection Editor добавить новую строку, нажав на кнопку Add (рис. 5.4).
Рис. 5.4. Окно редактирования элементов строки таблицы
В свойствах строки при необходимости добавить столбцы, выбрав пункт Cells.
Отредактировать свойства строк и столбцов, установив необходимые параметры.
Например, для создания таблицы следующего вида:
Номер |
Наименование |
Цена |
1 |
Бумага писчая |
50 |
2 |
Картон |
70 |
3 |
Бумага офисная |
100 |
Необходимо установить значения свойств объекта Table, как показано ниже. После того, как таблица добавлена на страницу, а в нее добавлены три строки, в каждую из которых добавлено по три столбца, а в свойства Text каждого столбца введены значения, как показано в примере, таблица в окне браузера будет выглядеть следующим образом (рис. 5.5):
Рис. 5.5. Результат отображения таблицы в окне браузера
Как видно, у данной таблицы отсутствуют как внешние, так и внутренние рамки, разделяющие ячейки. Создание рамок будет происходить в несколько этапов.
Для создания рамки, обрамляющей всю таблицу, необходимо установить значения для следующих свойств всей таблицы:
BorderColor=Black
BorderStyle=Solid
BorderWidth=1
В результате таблица приобретает контур, представляющий собой сплошную линию черного цвета толщиной один пиксель.
Теперь нужно создать рамки для ячеек таблицы. Для этого необходимо выполнить следующие действия. Установить свойства
GridLines=Both
CellPadding=1
CellSpacing=0
Открыть окно TableRow Collection Editor, затем открыть окно установки свойств ячеек строки и для каждой ячейки установить следующие свойства:
BorderColor=Black
BorderStyle=Solid
BorderWidth=1
Еще один возможный вариант работы с таблицами.
Добавить элемент Table на страницу. Воспользуемся одним из возможных способов: в главном меню выберем пункт Таблица/Добавить таблицу. В открывшемся окне (рисунок 5.4.) установим размеры таблицы и нажмем Ок.
Рисунок 5.4.
Например, для создания таблицы следующего вида:
Номер |
Наименование |
Цена |
1 |
Бумага писчая |
50 |
2 |
Картон |
70 |
3 |
Бумага офисная |
100 |
После того, как таблица добавлена на страницу, а в нее добавлены три строки, в каждую из которых добавлено по три столбца, а в свойства Text каждого столбца введены значения, как показано в примере, таблица в окне браузера будет выглядеть следующим образом (рис. 5.5):
Рис. 5.5. Результат отображения таблицы в окне браузера
Как видно, у данной таблицы уже присутствуют рамки обозначенные пунктиром, но в окне браузера они видны не будут! Следует заметить, что работать с такой таблице можно, как и с любой другой таблице Word или Excel, т.е. вставлять, удалять, вырезать и объединять ячейки, строки и столбцы.
Создадим рамки для таблицы.
Для этого можно либо выделить всю таблицу, либо устанавливать рамки для каждой ячейки в отдельности.
Выделим всю таблицу и на панели Свойства выберем Style. В открывшемся окне Изменения стиля представлены категории для работы с таблицей и образец применения изменений к таблице. Рисунок5.6.
Рисунок 5.6.
Выберем категорию Границы и установим один из предложенных значений. Так же поступим с остальными интересующими нас категориями. После манипуляций таблица будет иметь вид как на образце рисунок 5.7.
Рисунок 5.7.
Запустим приложение на выполнение. Рисунок 5.8.
Рисунок 5.8.