Читайте также:
|
Создайте еще один файл под общим названием «Таблицы.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:\Internet\image1.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>
Дата добавления: 2014-12-18; просмотров: 88 | Поможем написать вашу работу | Нарушение авторских прав |