14119

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

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

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

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

Русский

2013-05-21

9.51 MB

3 чел.

УРОК 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


 

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

83858. Хирургическая анатомия лёгких. Корень лёгкого 45.58 KB
  Сегмент участок легкого вентилируемый бронхом третьего порядка. На медиальной поверхности каждого легкого располагаются его ворота. Здесь находятся составляющие корень легкого анатомические образования: бронх легочные артерии и вены бронхиальные сосуды и нервы лимфатические узлы. Скелетотопически корень легкого располагается на уровне VVII грудных позвонков.
83859. Хирургическая анатомия полости груди. Техника пункции и дренирование плевральной полости 50.76 KB
  Техника пункции и дренирование плевральной полости. В грудной полости располагаются три серозных мешка: два плевральных и один перикардиальный. Между плевральными мешками в грудной полости расположено средостение в котором помещается комплекс органов куда входят сердце с перикардом грудная часть трахеи главные бронхи пищевод сосуды и нервы окруженные большим количеством клетчатки.
83860. Хирургическая тактика при проникающем ранении груди. Торакотомия. Обработка лёгочных артерий, лёгочных вен и бронхов 54.15 KB
  Гемоторакс скопление крови в полости плевры в результате повреждения кровеносных сосудов или стенки сердца. Диагностику проводят рентгенологически и с помощью пункции плевральной полости. Гемопневмоторакс скопление крови и воздуха в плевральной полости. Пневмоторакс скопление воздуха в плевральной полости в результате повреждения плевры.
83861. Лечение пневмоторакса 50.16 KB
  при повреждении париетальной плевры: внутренний при ране лёгкого или повреждении бронха т. при повреждении висцеральной плевры. закрытый однократное попадание воздуха и разобщение полости плевры с атмосферой; открытый постоянное сообщение плевральной полости с атмосферным воздухом во время вдоха воздух через рану проникает в плевральную полость а при выдохе выходит наружу: клапанный поступление воздуха только в плевральную полость изза наличия клапана нарастающее накопление воздуха в плевральной полости. Этапы помощи при...
83862. Долевое и сегментарное строение лёгких. Трахея и главные бронхи. Особенности лёгочных артерий и лёгочных вен 282.9 KB
  Длина трахеи 915 см ширина 1527 см. Место разветвления трахеи на два бронха получило название бифуркации трахеи. С внутренней стороны место разделения представляет собой вдающийся в полость трахеи полулунный выступ – киль трахеи. Главные бронхи асимметрично расходятся в стороны: правый более короткий 3 см но более широкий отходит от трахеи под тупым углом над ним залегает непарная вена; левый бронх длиннее 45 см более узкий и отходит от трахеи почти поп прямым углом над ним проходит дуга аорты.
83863. Резекция лёгкого. Хирургическая тактика при раке и доброкачественных опухолях лёгкого 50.4 KB
  Техника резекции лёгкого заднебоковой доступ; пневмолиз выделение из сращений; вскрытие медиастиналыюй плевры; обработка корня: последовательно вначале артерию затем вену и в конце бронх при раке вену артерию бронх; удаление легкого; проверка герметичности культи бронха физраствор в плевральную полость смотрят наличие пузырьков воздуха при раздувании; дренаж в плевральную полость; ушивание раны. Радикальные операции на легких выполняют при раке легкого туберкулезе легких бронхоэктатической болезни хронической пневмонии...
83864. Пункция перикарда и ушивание раны сердца. Техника выполнения 46.5 KB
  Пункция перикарда Показания: с диагностической или лечебной целями преимущественно при выпотных перикардитах. Ушивание раны сердца оперативный доступ обычно по ходу раневого канала; продольное вскрытие перикарда широким разрезом кпереди от диафрагмального нерва; наложение узловых или Побразных швов на рану; освобождение полости перикарда от сгустков крови; ушивание перикарда редкими швами.
83865. Коронарные артерии и проводящая система сердца. Принципы операций на коронарных артериях, шунтирование и стентирование 54.08 KB
  Коронарные артерии . interventriculris posterior – конечная ветвь правой коронарной артерии проходит в одноимённой борозде; r. interventriculris posterior конечная ветвь левой коронарной артерии проходит в одноимённой борозде.
83866. Хирургическая анатомия пищевода. Операции на пищеводе 66.98 KB
  Хирургическая анатомия пищевода Отделы: шейный грудной и брюшной. Синтопия: Спереди пищевода лежат перстневидный хрящ и трахея; сзади позвоночник и длинные мышцы шеи: по бокам нижние полюсы боковых долей щитовидной железы и общие сонные артерии. Правый возвратный нерв проходит позади трахеи по боковой поверхности пищевода.