| « Поставить закладку » « Сделать стартовой » | |||
|
|||
|
Создание таблиц - приемы и хитрости
Прежде чем преступить к изучению приемов и хитростей создания таблиц, остановимся вкратце на том, как вообще создать таблицу в HTML. Если вы уже умеете создавать простые таблицы в HTML, то можете смело пропустить эту часть. Итак, прежде чем рассматривать теги HTML, которые принимают участие в создании таблиц, давайте сначала уясним общую схему создания. Любая таблица создается по следующей схеме: <ОТКРЫВАЮЩИЙ ТЕГ ТАБЛИЦЫ><ОТКРЫВАЮЩИЙ ТЕГ РЯДА> <ОТКРЫВАЮЩИЙ ТЕГ ЯЧЕЙКИ> Текст,картинки или таблицы <ЗАКРЫВАЮЩИЙ ТЕГ ЯЧЕЙКИ> <ЗАКРЫВАЮЩИЙ ТЕГ РЯДА> </ЗАКРЫВАЮЩИЙ ТЕГ ТАБЛИЦЫ> Давайте рассмотрим создание таблиц на простом примере. Наша таблица будет состоять из трех рядов, в каждом ряде будет три ячейки (столбца). Первый столбец будет называться "Товар", второй - "Цвет", а третий - "Цена". Вот как может выглядеть наша таблица:
Давайте посмотрим на прокомментированный HTML код, который создает эту таблицу (черный текст - это комментарии к каждой строке HTML кода данного примера):
Как вы уже поняли, открывающим и закрывающим тегами таблицы являются теги <TABLE> и </TABLE>, открывающим и закрывающим тегами ряда являются теги <TR> и </TR>, а открывающим и закрывающим тегами ячейки (колонки) таблицы являются теги <TD> и </TD> Как видно из комментария к примеру в первой строке открывается таблица, а во второй строке открывается первый ряд таблицы. Далее идут три строки представляющие три ячейки таблицы. В каждой строке открывается ячейка таблицы, затем идет содежание этой ячейки и в конце ячейка закрывается. В шестой строке HTML кода закрывается первый ряд таблицы. Затем все повторяется еще два раза - открытие ряда (7 строка), три ячейки с содержимым (8-10 строки), закрытие ряда (11 строка) и т.д. В последней строке HTML кода таблица закрывается. Прежде чем усложнять примеры и изучать приемы использования таблиц, применяемые при создании HTML страниц, давайте рассмотрим основные параметры тегов <TABLE>, <TR> и <TD> Существует ряд параметров, которые идентичны во всех трех тегах с той лишь разницей, что область их действия распространяется на всю таблицу, при применении данного параметра в теге <TABLE>, на ряд таблицы при применении в теге <TR> и на отдельную ячейку при применении в теге <TD>. (если вы знакомы с параметрами тегов таблицы, можете пропустить эту часть) Вот эти параметры и их описание: <TABLE>, <TR> и <TD>
<TABLE>
Результат:
Итак, создавать простые таблицы вы уже научились. Есть еще несколько параметров тега <TD>, с помощью которых можно добиться интересных результатов (если вы знакомы с параметрами COLSPAN и ROWSPAN можете пропустить эту часть). Предположим вам нужно создать следующую таблицу:
Последний ряд таблицы состоит из одной ячейки. Но как же так, вы ведь уверены, что все ряды должны состоять из одинакового количества ячеек. На самом деле так оно и есть. Просто три ячейки последнего ряда объединены в одну. Это делается с помощью параметра COLSPAN тега <TD>.
Теперь, как вы могли уже догадаться, мы рассмотрим пример объединения нескольких ячеек таблицы по вертикали. Вот пример таблицы с объединением ячеек по вертикали (в столбце):
Последние ячейки четырех рядов таблицы объединены между собой. Объединение осуществляется с помощью параметра ROWSPAN тега <TD>. Этот параметр аналогичен параметру COLSPAN с той лишь разницей, что он объединяет ячейки по вертикали.
Как видно из приведенного HTML кода, первый ряд таблицы состоит из четырех тегов <TD>, а остальные из трех. На самом деле все четыре ряда таблицы состоят из четырех ячеек, просто последние ячейки объединены в одну вертикальную ячейку, в которой написано товары. Объединение ячеек таблицы по вертикали происходит сверху вниз. То есть объединяется n-ное число ячеек, начиная от той, в которой использован параметр ROWSPAN. Давайте еще раз посмотрим повнимательнее на фрагмент HTML кода ячейки в которой происходит объединение:
В четвертой ячейке происходит объединение четырех (ROWSPAN=4) ячеек в столбце. В результате три последующих ряда таблицы должны содержать только три ячейки (четвертая объединена в первом ряду), как и показано в нашем примере. Теперь вы познакомитесь с некоторыми приемами, которые наиболее часто используются в создании HTML страниц для размещения текста, картинок и других элементов на странице. Во всех случаях используется одна или несколько таблиц. Вариантов применения таблиц для размещения информации на странице бесконечное количество, но мы остановимся на основных приемах изучив которые вы сможете сами придумывать способы размещения информации. Для начала рассмотрим прием, проиллюстрированный следующей таблицей:
Посмотрите внимательно на таблицу, которая находится в центре экрана. Фон таблицы желтый, а бордюр таблицы черный. Такого эффекта можно добиться применением дополнительных параметров тега <TABLE>, но мы этот вариант рассматривать не будем, так как бордюры таблиц в разных броузерах неодинаковы, да и выглядят они не лучшим образом. Вместо этого мы рассмотрим пример, который позволит вам лучше понять использование таблиц. Аккуратный бордюр шириной в 1 пиксел черного цвета вокруг таблицы. Как добиться такого результата. Все достаточно просто.
Далее приводится HTML код нашего примера:
Более темным фоном выделен HTML код второй таблицы, которая вставлена в ячейку первой таблицы. Чтобы регулировать внешний вид вашей мнимой таблицы, используйте: Если вы не хотите сами разбираться в принципе создания сложных таблиц и вложенных таблиц, то можете просто скопировать HTML код нашего примера на свою страницу и изменять его по своему усмотрению. Вы уже знаете достаточно много о таблицах, чтобы создавать собственные сложные таблицы и вставлять их на страницу. В заключении этого большого раздела вы узнаете еще несколько приемов применяемых при создании профессиональных страниц в Интернет. Давайте посмотрим на следующий пример. Предположим, вам нужна страница, состоящая из трех колонок. Колонка слева будет содержать навигационное меню по сайту, и по ширине должна составлять 150 пикселов (точек монитора). Колонка справа должна занимать 100 пикселов, а колонка в центре должна занимать все оставшееся пространство, независимо от разрешения монитора у того, кто просматривает страницу. Цвет левой колонки должен быть темно-синим. Представьте что таблица, расположенная ниже представляет экран монитора, тогда ваш сайт должен выглядеть следующим образом:
Прежде чем создавать любую сложную таблицу, нужно ее хорошенько спланировать. Можете сначал нарисовать требуемую структуру ячеек тыблицы на бумаге, чтобы постоянно видеть ее. Так вам будет намного легче создать и редактировать требуемую таблицу. Для того, чтобы увидеть страницу, которую мы создаем в нашем примере, нажмите сюда. Страница будет открыта в новом окне вашего броузера После того, как вы представили требуемую структуру таблицы на бумаге, можно приступать к созданию вашей таблицы: Первый шаг - создание внешней таблицы
Здесь находится страница, которая отображает результат приведенного выше HTML кода. Как видно из HTML кода вся таблица состоит из одного ряда, в котором находится 5 ячеек. Общая ширина таблицы задана равной 100% (WIDTH=100%). Далее применяется следующий прием. Ширина каждой ячейки задается в процентах, при чем сумма параметров WIDTH всех ячеек должна равняться 100%. В противном случае не во всех броузерах будет одинаковым результат. Хитрость заключается в том, чтобы задать заведомо больший размер в процентах для центральной колонки (третья ячейка), и заведомо меньший размер левой и правой колонок (первая и последняя ячейки ряда), а затем вставить в первую и последнюю ячейку так называемую "распорку". Роль распорки выполняет прозрачная картинка размером в один пиксел. <IMG SRC=p.gif WIDTH=150 HEIGHT=1 ALT=""> Вы можете сохранить прозрачную картинку на свой компьютер и использовать ее на своих HTML страницах. Для этого нажмите правой кнопкой мыши здесь и выбрав пункт всплывающего меню "Сохранить ссылку как" ("Save link as") в броузере Netscape Navigator или "Сохранить объект как" ("Save object as") в броузере Internet Explorer. Обратите внимание на то, что значение параметра VALIGN (вертикальное выравнивание внутри ячейки) задано top. Это сделано для того, чтобы текст во всех трех колонках начинался от самого верхнего края ячейки. Каркас вашей страницы готов. Осталось сделать красивое оформление рекламного блока в правой колонке страницы. Для этого в последнюю ячейку нашей внешней таблицы вместо слова 'Реклама:' нужно вставить другую таблицу. Здесь приводится только HTML код этой таблицы. Вы должны уже уметь разбираться в HTML коде и понять как построена таблица. Считайте это практическим заданием. Более подробно о создании подобной таблицы вы можете прочесть еще раз здесь.
Теперь остается только убрать бордюр нашей внешней таблицы (BORDER=0), чтобы получилась наша страница. Последний штрих, это задание фона страницы так, чтобы по краям таблицы не было белых промежутков. Это можно сделать задав параметр BACKGROUND тега <BODY> в виде картинки, левая часть шириной в 150 пикселов которой темно синяя, а правая часть картинки шириной в 1500 пикселов - серая. Почему именно 1500 пикселов? Наибольшее разрешение монитора обычно не превышает 1624 пиксела. Поэтому картинка, которая заполнит фон страницы должна быть шире 1624 пикселов, чтобы темно-синяя полоса не повторялась. Вы можете сохранить картинку для фона на свой компьютер и использовать ее, чтобы создать рассматриваемый нами пример. Для этого нажмите правой кнопкой мыши здесь и выбрав пункт всплывающего меню "Сохранить ссылку как" ("Save link as") в броузере Netscape Navigator или "Сохранить объект как" ("Save object as") в броузере Internet Explorer. Окончательный результат нашего примера можно посмотреть здесь. Ширину первой и последней колонок нашей страницы можно регулировать при помоши значения параметра WIDTH прозрачных картинок (распорок) в первой и последней ячейках нашей внешней таблицы (каркаса). Все что добавлено в этом последнем примере, это <BODY BACKGROUND=back.gif> вместо просто <BODY>. Как видно на окончательной странице, вторая ячейка заползает на левую темно-синюю колонку. Для того, чтобы избавиться от этого, достаточно немного увеличить ширину прозрачной картинки (распорки), которая вставлена в первую ячейку внешней таблицы (каркаса). Например, вместо WIDTH=150 поставить WIDTH=160 и убрать параметры BGCOLOR из пяти ячеек внешней таблицы, так как больше эти параметры не нужны (их заменяет картинка фона страницы). Вот окончательный HTML код, который составляет страницу:
Внутренняя сложная таблица, состоящая из двух таблиц и создающая табличку с рекламой в правой колонке нашей страницы выделена более темным фоном. Автор: Анатолий Курушин Рубрика: Html
HTML 5: пять вещей вызывающих особый интер....
HTML 5 — это грядущее обновление гипертекстового языка разметки, основного способа создания контента для размещения его во всемирной паутине. Разработка HTML остановилась в 1999 году, на версии HTML 4.01 и с тех пор web-содержимое изменилось так, что текущие спецификации HTML перестали соответствовать сегодняшним требованиям. HTML 5 нацелен на то, чтобы увеличить функциональную совместимость HTML и соответствовать растущим требованиям разнообразного и смешанного web-контента. HTML 5 так же нацелен на устранение недостатков четвертой версии. В этой статье мы взглянем на 5 новых интересных вещей в HTML 5.
Подробнее... |
Рубрика: Html
| Добавлено: 22.12.2008
asp.net: ListView с разных сторон.
Элемент управления ListView был представлен в .Net Framework 3.5 как замена устаревшему GridView. Новый элемент имеет более расширенный функционал, чем его предшественник, но в тоже время лишен некоторых внутренних механизмов, что впрочем целиком следствие из расширенной универсальности ListView. Среди отличий ListView и GridView можно назвать и гибкую настройку разметки, что позволяет выводить данные не только в табличном виде, но и вообще в любом каком пожелает программист. Благодаря шаблонам ItemTemplate, EditItemTemplate, InsertItemTeplate можно настроить внешний вид при любом из состояний ListView: редактировании или выборе элемента.
Подробнее... |
Рубрика: .NET компоненты
| Добавлено: 22.12.2008
Создание кросс-таб отчета в Stimulsoft Rep....
Компания Стимулсофт предоставляет для разработчиков мощный набор инструментов для создания отчетов для Microsoft Visual Studio .Net 2005 и 2008; эти инструменты доступны как для Windows Forms, так и для Web Forms. Это генератор отчетов Stimulsoft Reports.Net. Генератор отчетов Stimulsoft Reports.Net имеет ряд особенностей: простая работа с дизайнером отчетов, полная поддержка экспорта в PDF, Word, Excel и многие другие форматы. Crystal Report и Microsoft Reporting Service – очень хорошие программные продукты для повседневной работы, но, если Вам необходимо создать отчеты с поддержкой кросс-табов, drill down, Ajax, штрих-кодов и возможностью подключения одновременно более одного источника данных, то Stimulsoft Reports.Net поможет Вам сэкономить массу времени. Также, данный генератор отчетов позволяет пользователям создавать свои собственные отчеты любой сложности. И все эти особенности делают Stimulsoft Reports.Net хорошим выбором в сфере программных продуктов для Business Intelligence.
Подробнее... |
Рубрика: .NET компоненты
| Добавлено: 22.12.2008
Остальные статьи: |
Цитата дня (все,добавить):
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Realcoding.NET
© 2003-2008 |
Контакты |
Реклама на сайте
|