Навигация:

Главная Случайная страница Обратная связь ТОП Интересно знать Избранные Новые материалы

Топ:

Генеалогическое древо Султанов Османской империи: Османские правители, вначале, будучи еще бейлербеями Анатолии, женились на дочерях византийских императоров...

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

Организация стока поверхностных вод: Наибольшее количество влаги на земном шаре испаряется с поверхности морей и океанов...

Интересное:

Аура как энергетическое поле: многослойную ауру человека можно представить себе подобным...

Принципы управления денежными потоками: одним из методов контроля за состоянием денежной наличности является...

Национальное богатство страны и его составляющие: для оценки элементов национального богатства используются...

Дисциплины:

Автоматизация Антропология Археология Архитектура Аудит Биология Бухгалтерия Военная наука Генетика География Геология Демография Журналистика Зоология Иностранные языки Информатика Искусство История Кинематография Компьютеризация Кораблестроение Кулинария Культура Лексикология Лингвистика Литература Логика Маркетинг Математика Машиностроение Медицина Менеджмент Металлургия Метрология Механика Музыкология Науковедение Образование Охрана Труда Педагогика Политология Правоотношение Предпринимательство Приборостроение Программирование Производство Промышленность Психология Радиосвязь Религия Риторика Социология Спорт Стандартизация Статистика Строительство Теология Технологии Торговля Транспорт Фармакология Физика Физиология Философия Финансы Химия Хозяйство Черчение Экология Экономика Электроника Энергетика Юриспруденция

adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet

2017-09-10

260

0.00 из 5.00 0 оценок

Заказать работу

⇐ ПредыдущаяСтр 6 из 6

Dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis

Nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea

Commodo consequat. Duis te feugifacilisi. Ut wisi enim ad minim veniam, quis

Nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex

en commodo consequat.</td>

</tr>

<tr>

<td height="40">Lorem ipsum</td>

</tr>

</table>

</body>

</html>

Пример 1.5. Явно заданная высота ячейки

Результат данного примера показан на рис. 1.7.

Рис. 1.7. Высота ячеек в браузере Opera 9

Левая нижняя ячейка согласно коду HTML имеет высоту 40 пикселов, но поскольку высота содержимого правой колонки больше, чем содержимое левой колонки, то высота ячейки меняется. Получается, что атрибут height в данном случае игнорируется. Заметим, что данная особенность проявляется только в браузере Opera, но и другие браузеры могут отображать сложные таблицы с ошибками. Это часто выражается в тех таблицах, где явно устанавливается высота ячеек и их объединение по вертикали. Для упрощения верстки применяется прием с вложенными таблицами.

Суть идеи проста — в ячейку вкладывается еще одна таблица со своими параметрами. Поскольку эти таблицы в каком-то смысле независимы, то можно создавать довольно причудливые конструкции. Чтобы вложенная таблица занимала всю ширину ячейки, таблице надо задать ширину 100%.

В примере 1.6 показан пример использования вложенных таблиц для создания двух колонок и навигации.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Вложенные таблицы</title>

</head>

<body>

<table width="100%" border="0" cellpadding="5" cellspacing="0">

<tr>

<td width="150" valign="top" bgcolor="#f0f0f0">

<table width="100%" cellpadding="2" cellspacing="1">

<tr><td bgcolor="#ffffff">Lorem</td></tr>

<tr><td bgcolor="#ffffff">Ipsum</td></tr>

<tr><td bgcolor="#ffffff">Dolor</td></tr>

<tr><td bgcolor="#ffffff">Sit</td></tr>

<tr><td bgcolor="#ffffff">Amet</td></tr>

</table>

</td>

<td valign="top" bgcolor="#ffffee">Lorem ipsum dolor sit amet, consectetuer

Adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet

Dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis

Nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea

commodo consequat.</td>

</tr>

</table>

</body>

</html>

Пример 12.6. Вложенные таблиц

Результат данного примера показан на рис. 1.8.

Рис. 1.8. Вид вложенных таблиц

В данном макете с помощью таблицы создается две колонки, причем левая колонка имеет фиксированную ширину 150 пикселов. Чтобы создать подобие навигации, внутрь ячейки добавлена еще одна таблица с шириной 100%.

Как видно из рис. 1.8, если не задавать границы, то определить наличие таблиц по виду веб-страницы довольно сложно. По этой причине таблицы до сих пор активно применяются для верстки сложных макетов.

Заголовок таблицы

При большом количестве таблиц на странице каждой из них удобно задать заголовок, содержащий название таблицы и ее описание. Для этой цели в HTML существует специальный тег <caption>, который устанавливает текст и его положение относительно таблицы. Проще всего размещать текст по центру таблицы сверху или снизу от нее, в остальных случаях

браузеры по разному интерпретируют атрибуты тега <caption>, из-за чего результат получается неодинаковый. По умолчанию заголовок помещается сверху таблицы по центру, его ширина не превышает ширины таблицы и в случае длинного текста он автоматически переносится на новую строку. Для изменения положения заголовка у тега <caption> существует атрибут align, который может принимать следующие значения.

· left — выравнивает заголовок по левому краю таблицы. Браузер Firefox располагает текст сбоку от таблицы, Internet Explorer и Opera располагают заголовок сверху, выравнивая его по левому краю.

· right — в браузере Internet Explorer и Opera располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. Firefox отображает заголовок справа от таблицы.

· center — заголовок располагается сверху таблицы по ее центру. Такое расположение задано в браузерах по умолчанию.

· top — результат аналогичен действию атрибута center, но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами.

· bottom — заголовок размещается внизу таблицы по ее центру.

В примере 1.7 показано, как установить заголовок сверху таблицы. Обратите внимание, что тег <caption> находится внутри контейнера<table>, это его стандартное местоположение.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Заголовок таблицы</title>

</head>

<body>

<table width="100%" border="1" cellpadding="4" cellspacing="0">

<caption>Изменение добычи ресурсов по годам</caption>

<tr>

<th> </th><th>2003</th><th>2004</th><th>2005</th>

</tr>

<tr>

<td>Нефть</td><td>43</td><td>51</td><td>79</td>

</tr>

<tr>

<td>Золото</td><td>29</td><td>34</td><td>48</td>

</tr>

<tr>

<td>Дерево</td><td>38</td><td>57</td><td>36</td>

</tr>

</table>

</body>

</html>

Пример 1.7. Создание заголовка таблицы

Ниже показан результат данного примера (рис. 1.9).

Рис. 1.9. Вид заголовка таблицы в браузере Safari

⇐ Предыдущая 1 2 3 4 56

Поделиться с друзьями:

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

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

Архитектура электронного правительства: Единая архитектура – это методологический подход при создании системы управления государства, который строится...

Механическое удерживание земляных масс: Механическое удерживание земляных масс на склоне обеспечивают контрфорсными сооружениями различных конструкций...