рефераты конспекты курсовые дипломные лекции шпоры

Реферат Курсовая Конспект

Таблицы

Таблицы - Лабораторная Работа, раздел Программирование, Тело документа размещается между стартовым тегом <body>и конечным тегом </body>. Итак, общая структура html-документа имеет вид   Создайте Еще Один Файл Под Общим Названием «Таблицы.html». Со...

 

Создайте еще один файл под общим названием «Таблицы.html». Создайте в этом файле следующую html- страницу:

<html>

<head>

<title>ТАБЛИЦЫ</title>

</head>

<body>

<table border=4 cellspacing=3 cellpadding=10>

<tr><td bgcolor= “yellow”>Фамилия И.О.

<caption align= “top”>Таблица из одной ячейки</caption>

</table>

</body>

</html>

Просмотрите созданную страницу в браузере.

Проведите следующие эксперименты с созданным документом: задайте для стартового тега caption атрибут align= “bottom”, чтобы заголовок был не над таблицей, а под таблицей.

Задайте у стартового тега значение атрибута border=0, чтобы рамка у ячейки исчезла совсем.

Восстановите прежнее значение ширины боковой грани border=4 и увеличьте ширину фронтальной грани атрибутом cellspacing=30.

Измените размер пустого пространства, окружающие данные в ячейке атрибутом cellpadding=30.

Дополните предыдущую html-страницу следующим фрагментом:

<table border=4 cellspacing=3>

<caption>Сотрудники кафедры:</caption>

<tr><th bgcolor= “yellow”>Ф.И.О.

<th bgcolor= “yellow”>Должность

<tr><td>Иванов Н.И.

<td>Зав. Кафедрой

<tr><td>Чубайс А.Б.

<td>Доцент

</table>

Дополните html страницу еще одним вариантом таблицы:

<table border=4 cellspacing=3>

<caption>Продано книг:</caption>

<tr><th bgcolor= “yellow”>

<th bgcolor= “yellow”>2000 г.

<th bgcolor= “yellow”>2001 г.

<tr><th bgcolor= “yellow”>Художественных

<td>12500

<td>7500

<tr><th bgcolor= “yellow”>Научных

<td>250

<td>750

</table>

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

 

 

Добавьте в html-страницу «Таблицы» следующий фрагмент с примерами подбора оранжевых оттенков:

<table border=3 width=200>

<tr>

<td align= “center” bgcolor= “white”><b>Код</b>

<td align= “center” bgcolor= “white”><b>Цвет</b>

<tr><td>#ffb000<td bgcolor=#ffb000>1

<tr><td>#ffa800<td bgcolor=#ffa800>2

<tr><td>#ffa000<td bgcolor=#ffa000>3

<tr><td>#ff9800<td bgcolor=#ff9800>4

<tr><td>#ff9000<td bgcolor=#ff9000>5

<tr><td>#ff8800<td bgcolor=#ff8800>6

<tr><td>#ff8000<td bgcolor=#ff8000>7

<tr><td>#ff7800<td bgcolor=#ff7800>8

<tr><td>#ff7000<td bgcolor=#ff7000>9

<tr><td>#ff6800<td bgcolor=#ff6800>10

<tr><td>#ff6000<td bgcolor=#ff6000>11

<tr><td>#ff5800<td bgcolor=#ff5800>12

</table>

Примечание. Палитра оформлена в виде таблицы, часть ячеек которой раскрашена при помощи атрибута задания фона:

bgcolor=”#RRGGBB”.

 

Из примера видно, что задача подбора оранжевого оттенка сводится к подбору зеленой составляющей при максимальном значении красной.

Пример разрисовки радуги на web-странице:

<table border=0 width=100>

<tr><td bgcolor=#ff0000>к

<tr><td bgcolor=#ff7800>о

<tr><td bgcolor=#ffff00>ж

<tr><td bgcolor=#00ff00>з

<tr><td bgcolor=#43d8fb>г

<tr><td bgcolor=#0000ff>с

<tr><td bgcolor=#8000c0>ф

</table>

Использование таблицы для размещения рядом заголовка и рисунка. Для этого вставьте в html-страницу «Таблицы» такой фрагмент:

<table border=0>

<tr><td><h1>Кафедра<i>ФВТ</i></h1>

<td><img src= “file://c:Internetimage1.gif”>

</table>

Объединение ячеек таблицы. Вставьте в html-страницу «Таблицы» следующий фрагмент:

<table border=4 cellspacing=0 width=70%>

<tr><td><b>Кафедра</b>

<td><b>Состав кафедры</b>

<tr><td rowspan=3>Факультет

<td>Научная лаборатория

<tr><td>Методический кабинет

<tr><td>Компьютерный класс

<tr><td colspan=2 align= “center”>РГРТА

</table>

Примечание. Для того чтобы объединить ячейки столбца, необходимо использовать атрибут rowspan для элемента td, соответствующего верхней из объединяемых ячеек. Значение атрибута представляет собой количество объединяемых ячеек. Аналогичным образом объединяются ячейки в строке. Для этого используется атрибут colspan.

 

Объединение в одну ячейку ячеек из нескольких столбцов и нескольких строк. Дополните html- страницу еще одним фрагментом построения таблицы:

<table border=4 cellspacing=0 width=70%>

<tr><td><b>Заголовок 1</b>

<td><b>Заголовок 2</b>

<td><b>Заголовок 3</b>

<tr><td rowspan=4 colspan=2>Ячейка 1

<tr><td>Ячейка 2

<tr><td> Ячейка 3

<tr><td> Ячейка 4

<tr><td colspan=3 align= “center”> Ячейка 5

</table>

 

Развернуть
Открыть в широком формате

– Конец работы –

Эта тема принадлежит разделу:

Тело документа размещается между стартовым тегом <body>и конечным тегом </body>. Итак, общая структура html-документа имеет вид

Лабораторная работа... ВвЕДЕНИЕ В НTML Предисловие...

Если Вам нужно дополнительный материал на эту тему, или Вы не нашли то, что искали, рекомендуем воспользоваться поиском по нашей базе работ: Таблицы

Что будем делать с полученным материалом:

Если этот материал оказался полезным ля Вас, Вы можете сохранить его на свою страничку в социальных сетях:

Все темы данного раздела:

Бегущая строка на html-странице
  Для создания бегущей строки щелкните правой кнопкой мыши на свободном месте рабочего стола, выберите в открывшемся контекстном меню команду «Создать», а в подменю - команду «Текстов

Заголовки в html-страницах
  Создайте html-страницу следующего вида: <html> <head> <title>Заголовки</title> </head> <body>

Горизонтальная линия
  Вставьте в текст html-документа «Заголовки» после стартового тега body элемент <hr>. Сохраните сделанное изменение в файле и просмотрите обновленный вид html-страницы. Обратит

Изменение общего дизайна html-страницы
  Оформите фон страницы синим цветом, а цвет букв в строках заголовков оформите желтым цветом. Для этого в состав стартового тега body включите атрибуты bgcolor= “#0000ff” (синий фон

Форматирование абзацев
  Создайте новый файл html-страницы. В этот файл введите отрывок из рассказа М.Зощенко «Собачий нюх»: <html> <head> <title>Форматирование

Хотите получать на электронную почту самые свежие новости?
Education Insider Sample
Подпишитесь на Нашу рассылку
Наша политика приватности обеспечивает 100% безопасность и анонимность Ваших E-Mail
Реклама
Соответствующий теме материал
  • Похожее
  • Популярное
  • Облако тегов
  • Здесь
  • Временно
  • Пусто
Теги