14119

ТАБЛИЦЫ. Создание таблицы

Конспект урока

Информатика, кибернетика и программирование

УРОК 9 ТАБЛИЦЫ Таблицы содержат информацию расположенную по строкам и столбцам играют большую роль в организации Web страницы. Создание таблицы Таблица задается командой TABLE/TABLE тег TR описывает строку таблицы а тег позволяют задавать ячейки внутри стр

Русский

2013-05-21

9.51 MB

4 чел.

УРОК 9

ТАБЛИЦЫ

Таблицы содержат информацию, расположенную по строкам и столбцам, играют большую роль в организации Web- страницы.

Создание таблицы

Таблица задается командой <TABLE>…</TABLE>, тег <TR> описывает строку таблицы, а тег <TD> и <TH> позволяют задавать ячейки внутри строки.

Таким образом, таблица описывается по строкам.

Пример задания таблицы:

Описание таблицы в HTML-коде

Вид таблицы в окне браузера

<table border="1" align="center">

<tr>

<td>текст ячейки (1,1)</td>

<td>текст ячейки (1,2)</td>

 <td>текст ячейки (1,3)</td>

</tr>

<tr>

<td>текст ячейки (2,1)</td>

<td>текст ячейки (2,2)</td>

<td>текст ячейки (2,3)</td>

</tr>

</table>

Таблицы могут применяться для форматирования текста в несколько колонок, как в газетах. Например, чтобы отобразить текст в три колонки, можно задать таблицу с одной строкой и тремя столбцами:

Описание таблицы в HTML-коде

Вид таблицы в окне браузера

<table border="0">

<tr valign="top">

<td>Чтобы использовать таблицу в качестве средства компоновки данных для отображения в несколько колонок, создайте таблицу с одной строкой и поместите в каждую ее ячейку данные, отвечающие определенной колонке.</td>

<td>Ячейка должна содержать информацию одной колонки. Например, можно в одну колонку поместить изображение, а в две другие - сопроводительный текст.</td>

<td>Браузер воспроизведет введенную в ячейки информацию в нескольких колонках. Ширина каждого столбца построенной таблицы определяется текущей шириной окна браузера.</td>

</tr>

</table>


Атрибуты команды
<TABLE>

Атрибуты

Назначение и описание атрибутов

align

Выравнивание таблицы относительно соседних элементов документа. Возможные варианты: align=center (расположение таблицы по центру окна документа), align=left(по левому краю), align=right(по правому краю).

border

bordercolor

bordercolordark

bordercolorlight

frame

rules

Обрамление таблицы. При воспроизведении таблицы в окне браузера ее столбцы и строки будут отделены друг от друга линиями указанной ширины.

С помощью атрибутов bordercolor, bordercolordark, bordercolorlight  можно изменить цвет рамки. Например, строка

<TABLE border="2" bordercolordark="#c0c0c0" bordercolorlight="#0000ff">

задает рамку толщиной 2 пикселя, сверху и слева рамка  синяя, а снизу и справа  серебристая.

Атрибут frame указывает тип внешнего обрамления, rules  внутреннего.

width

height

Размеры таблицы. Задаются числом пикселей или процентами (от ширины окна). Если атрибут не задан, таблица принимает минимальные размеры по размерам внесенных данных.

<TABLE width="200">

<TABLE width="100%">

bgcolor

background

Оформление фона таблицы (bgcolor изменяет цвет фона, background  заливает фон картинкой). Например:

<TABLE border="1" width=70% bgcolor="#FFFF5B">

<TABLE border="1" width=70% background="pic/fon.jpg">

cellpadding

cellspacing

cellpadding=n : задает расстояние между содержимым ячейки и рамкой в пикселях

cellspacing=m :задает расстояние между ячейками таблицы в пикселях

Форматирование элементов таблицы

Фон

Атрибут bgcolor позволяет менять цвет фона не только для всей таблицы, но и для отдельных ячеек (в тегах <TD> <TH>) и строк (в теге <TR>).

Заливку фоновой картинкой можно выполнить только для отдельной ячейки или таблицы целиком с помощью атрибута background.

Размеры

Возможность изменения размеров ячейки (<TD>) с помощью атрибутов width и height позволяет наилучшим способом осуществить ее компоновку. Ширину и высоту ячейки можно задавать в пикселях или процентах относительно габаритов таблицы. Причем, при изменении ширины ячейки все ее "соседи" в пределах того же столбца будут отображаться с учетом нового значения ширины. А изменение высоты автоматически распространяется на остальные ячейки данной строки таблицы.

Выравнивание

Выравнивание данных в ячейках таблицы устанавливается с помощью атрибутов align (по горизонтали) и valign (по вертикали). Если все ячейки одной строки имеют одинаковое выравнивание данных, то удобнее прописать соответствующие значения атрибутов align и valign только для тега <TR>. В окне редактора HomeSite при автоматическом выборе атрибутов выдается список допустимых значений для них, что значительно облегчает процесс написания HTML-кода.

Объединение ячеек

HTML позволяет объединять несколько соседних ячеек столбца или строки в одну большую ячейку.

Для слияния ячеек в пределах одной строки в дискрипторе <TD> ( или <TH>) исползуется атрибут colspan=n, где n  это число объединяемых ячеек.

Аналогично, для слияния ячеек в одном столбце применяется атрибут rowspan=m.

Например:

Описание таблицы в HTML-коде

Вид таблицы в окне браузера

<table border="1" align="center">

<tr align="center">

<td colspan="2" bgcolor="#00ffff">текст ячейки 1</td>

<td rowspan="2" bgcolor="#c0c0c0">текст ячейки 2</td>

</tr>

<tr>

<td>текст ячейки 3</td>

 <td>текст ячейки 4</td>

 

</tr>

</table>


Задание

Создать Web-страницу на тему “Картинная галерея” с изображением картин-миниатюр, применив табличную разметку.

Каждая миниатюра является ссылкой на файл с этим же изображением, но больших размеров.

Пример организации такого многостраничного документа продемонстрирован ниже.

Замечания:

  •  Картинки для работы можно подобрать самим.
  •  Страница с одиночным изображением открывается в новом окне (атрибут target=”_blanck” для тега <A>);
  •  Изображение-оригинал и его миниатюра должны храниться в разных файлах;
  •  Значения атрибутов width и height в теге <IMG> должны соответствовать натуральным размерам изображений;
  •  На странице-галерее отобразить информацию об авторе.

PAGE  1


 

А также другие работы, которые могут Вас заинтересовать

36255. Архитектура операционной системы (ОС). Требования, предъявляемые к ОС: расширяемость, переносимость, совместимость, безопасность. Состав ОС 114 KB
  Архитектура операционной системы ОС. Функциональная сложность операционной системы неизбежно приводит к сложности ее архитектуры под которой понимают структурную организацию ОС на основе различных программных модулей. Обычно в состав ОС входят: исполняемые и объектные модули стандартных для данной ОС форматов; библиотеки разных типов; модули исходного текста программ; программные модули специального формата например загрузчик ОС драйверы вводавывода; конфигурационные файлы; файлы документации; модули справочной системы и т. Большинство...
36256. Функция, процедуры и службы администрирования. Объекты администрирования. Обязанности и права системного администратора информационных систем 37.5 KB
  Службы: необходимы для облегчения администрирования работы и защиты сетей. Пример существующих служб: службы управления конфигурацией контролем характеристик ошибочными ситуациями учетам и безопасностью; службы управления общего пользования; информационные службы; интеллектуальные службы; службы регистрации сбора и обработки информации; службы планирования и развития.
36257. Служба сопровождения пользователей, расширенная техническая поддержка, корпоративные проекты. Инструменты и средства службы технической поддержки. (Action Request System) 53 KB
  Инструменты и средства службы технической поддержки. Техническая поддержка спектр задач Чтобы обеспечить конечным пользователям наилучшее обслуживание и оптимально использовать ресурсы службы сопровождения используется трехуровневая модель организации службы поддержки пользователей. Возможны и другие алгоритмы организации технической поддержки. Как правило организация службы сопровождения изначально обусловлена производственной необходимостью а именно оказанием технической поддержки конечным пользователям.
36258. Интеллектуальные службы администрирования. Современные программные продукты крупных компьютерных сетей (Cfengine) 104 KB
  Знания о предметной области необходимые для работы ЭС определенным образом формализованы и представлены в памяти ЭВМ в виде базы знаний которая может изменяться и дополняться в процессе развития системы. Главным достоинством ЭС является возможность накопления знаний и сохранение их длительное время. При решении задач требующих обработки большого объема знаний возможность возникновения ошибки при переборе очень мала. Также возможно возникновение трудностей чисто психологического порядка: при создании базы знаний системы эксперт может...
36259. Обеспечение информационной безопасности. Система обнаружения атак RealSecure: назначение, компоненты, возможности 83.5 KB
  Система обнаружения атак RelSecure: назначение компоненты возможности. Система RelSecure Система обнаружения атак RelSecure разработана американской компанией Internet Security Systems Inc. Система RelSecure – это интеллектуальный анализатор пакетов с расширенной базой сигнатур атак который позволяет обнаруживать враждебную деятельность и распознавать атаки на узлы Вашей корпоративной сети. Система RelSecure построена по технологии анализа сетевых пакетов в реальном масштабе времени reltime pcket nlysis относится к...
36260. Аппаратно-программные платформы администрирования. Административная консоль Exchange. Средства мониторинга серверов и трассировки сообщений 92.5 KB
  Средства мониторинга серверов и трассировки сообщений. Внешний вид административной консоли сервера Exchnge Из утилиты администрирования возможно выполнение таких функций как: создание модификация и удаление объектов каталога; создание настройка и удаление коннекторов; настройка синхронизации каталогов и репликации общих папок; контроль за состоянием серверов путем создания и запуска мониторов; установка степени подробности диагностических сообщений; трассировка сообщений; экспорт и импорт объектов...
36261. Службы Windows. Назначение и управление службами. Журнал событий. Планировщик заданий 130 KB
  Отключено Авто или Вручную У службы есть три возможности запуска: Отключено Эта служба никогда не стартует. Вручную Эта служба не будет запущена автоматически но возможен её запуск через другую службу или программу. Оставьте тип запуска Вручную если Вы не подключены к локальной сети.Оставьте его запускаемым Вручную.
36262. Технологии сбора информации 250.5 KB
  Технологии сбора информации. Информационные процессы сбор обработка и передача информации всегда играли важную роль в науке технике и жизни общества. Сбор информации это деятельность субъекта в ходе которой он получает сведения об интересующем его объекте. Обмен информацией это процесс в ходе которого источник информации ее передает а получатель принимает.
36263. Хранение информации. Структура базовой информационной технологии 130 KB
  Хранение информации данных не является самостоятельной фазой в информационном процессе а входит в состав фазы обработки. Различают структурированные данные в которых отражаются отдельные факты предметной области это основная форма представления данных в СУБД и неструктурированные произвольные по форме включающие и тексты и графику и прочие данные. Эта форма представления данных широко используется например в Интернеттехнологиях а сами данные предоставляются пользователю в виде отклика поисковыми системами. Организация того или...