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


 

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

54652. Матеріали до філософсько-психологічного дослідження за романом П.Мирного «Хіба ревуть воли, як ясла повні?» 74.5 KB
  У ньому Панас Мирний відтворив свої враження і спостереження від подорожі а також історію яку він почув від візника про відомого на всю Полтавщину розбійника Гнидку засудженого на каторгу. Мирний був вражений тим що розповідаючи про злющого зарізяку візник здавалося співчував йому. Панас Мирний зацікавився особою Гнидки який у його памяті зостався як здоровенний іржавий цвях забитий у білу гладеньку стіну. Почуте у дорозі письменник намагався проаналізувати вдома проникнути в складність суспільного явища знайти коріння що...
54653. Конвенция о правах детей 108 KB
  Здравствуйте, дорогие мальчики и девочки! Посоветуйте, что же мне делать? Наверняка, вы читали сказку «Золушка» и знаете, как я люблю свою семью: отца, мачеху, сестёр своих. Но я сомневаюсь, любят ли они меня так, как я их. Как вы считаете? Почему я должна ночью. Когда мои сёстры спят, шить им бальные наряды? Почему моя мачеха основную работу по дому перекладывает на мои плечи? Разве это правильно?! Иногда мне очень хочется отдохнуть, но я не имею права отдохнуть, я должна всё успеть.
54654. Монополистическая конкуренция 31.16 KB
  Для монополистической конкуренции как рыночной структуры характерно относительно большое число небольших производителей. Эти производители предлагают похожую, но не идентичную продукцию. Дифференциация продукта может осуществляться в различных формах
54655. Защита от ионизирующих излучений 23 KB
  Защита от ионизирующих излучений Ионизирующее излучение любое излучение взаимодействие которого со средой приводит к образованию в ней зарядов разных знаков т. К ионизирующим относятся: корпускулярные излучения состоящие из частиц с массой покоя отличной от нуля а αчастицы положительно заряженные обладают высокой ионизирующей и низкой проникающей способностями; они ионизируют среду; б βчастицы отрицательно заряженные поток электронов электрон элементарная частица с наименьшим отрицательным электрическим...
54656. Общие сведения о процессе горения 44.5 KB
  Общие сведения о процессе горения Пожар неконтролируемое горение вне специального очага наносящее ущерб вследствие уничтожения материальных ценностей. в источник зажигания любое горючее вещество накаленное тело электрический разряд имеющие запас энергии и температуру достаточную для возникновения горения других веществ. Зажигание воздействие источника зажигания на горючее вещество в присутствии кислорода приводящее к возникновению горения. Огонь внешнее проявление горения сопровождающееся свечением в пламени.
54657. Углекислотные и порошковые огнетушители 29 KB
  ОСНОВЫ ЭЛЕКТРОБЕЗОПАСНОСТИ Воздействие на человека электрического тока Воздействие тока на организм человека приводит к: а электротравмам травмам вызванным воздействием электрической дуги электрические ожоги; электрические знаки; металлизация кожи; механические повреждения ушибы переломы; б электрическим ударам вызывающим резкое расстройство нервной системы и как следствие судорожное сокращение мышц сердца поражение дыхательного центра; этот вид воздействия опасен и может привести к смертельному исходу....
54658. Основные требования безопасности ремонтно-наладочных работ в действующих электроустановках 49.5 KB
  Снимать предупреждающие и запрещающие плакаты можно только после оформления записи в журнале об окончании ремонта СИЗ резиновые галоши резиновые коврики головные уборы спецодежда Ремонтные работы на кабельных линиях электропередач ОПФ при ремонте кабельных линий: возможность повреждения кабелей находящихся под напряжением при их раскопках; разрывы в кабельных линиях обычно в муфтах при недопустимом натяжении; опасность...
54659. Классификация зданий по взрывопожарной опасности 38 KB
  Пожароопасная категория В помещения в которых находятся горючие трудногорючие жидкости твёрдые материалы; склады для хранения бумаги текстильных трикотажных обувных товаров. Пожароопасная категория Г помещения где находятся негорючие вещества и материалы в горячем раскалённом состоянии; процесс обработки которых сопровождается выделением лучистого тепла искр и пламени; связанные со сжиганием жидкого твёрдого газообразного топлива. Классификация пожароопасных зон Пожароопасная зона пространство внутри помещения в...
54660. Общие сведения о гидроприводе 139.5 KB
  Гидросистемы бывают: для подачи жидкости отсутствуют устройства преобразующие энергию жидкости в механическую работу системы водоснабжения зданий охлаждения смазывания машин класс разомкнутых гидросистем движение жидкости за счет работы насоса; гидравлические приводы совокупность устройств предназначенных для передачи механической энергии преобразования движения посредством рабочей жидкости класс замкнутых гидросистем. К ним относят: насосы гидромашины...