Таблицы

ГЛАВА 5
ГЛАВА 5. Таблицы Если вам нужно поместить на ограниченном пространстве Web-страницы множество цифровых (и не только цифровых) данных, нет лучшего средства, чем таблица. Если вам необходимо со...
Параметры строки
Параметры строки Для строк предлагается такой же набор параметров, как и для ячеек (см. Рисунок 5.11). Естественно, все эти свойства применяются не к отдельной ячейке, а ко всей строке. Мы с...

Рисунок 5 14 Результат установки
Рисунок 5.14. Результат установки разных цветов фона для всей нижней строки и ячейки № 2.3. Видно, как параметры ячейки перекрывают параметры строки Однако разные Web-обозреватели поддерживаю...
Параметры таблицы
Параметры таблицы Вид редактора свойств при выделенной таблице показан на Рисунок 5.15. Как видите, набор параметров здесь сильно отличается от набора параметров ячеек и строк. И это не удиви...
Рисунок 5 15 Вид редактора свойств при выделенной таблице
Рисунок 5.15. Вид редактора свойств при выделенной таблице Сначала поговорим о знакомом. Поля ввода Rows и Cols служат для быстрого изменения количества, соответственно, строк и столбцов та...
Внимание
Внимание Если вы задали количество строк или столбцов меньше существующего, лишние строки или столбцы будут удалены без предупреждения. Поля ввода W и Н служат для задания, соответствен...
Рисунок 5 16 Перекрытие параметров таблицы параметрами ячеек



Рисунок 5.16. Перекрытие параметров таблицы параметрами ячеек. Для ячейки № 3.2 задан светло-серый фон, для ячейки № 4.1 — белая граница, для всей таблицы — белый фон и черная граница Поле...
Рисунок 5 17 Кнопки управления
Рисунок 5.17. Кнопки управления значениями ширины и высоты ячеек и строк таблицы Часто бывает так, что после многочисленных экспериментов с установкой размеров ячеек таблицы нужно вернуться к...
Внимание
Внимание При этом будут сброшены также значения ширины и высоты самой таблицы. Если вы закрыли редактор свойств или предпочитаете пользоваться меню, вы можете достичь того же эффекта, вы...
Предопределенные форматы таблиц
Предопределенные форматы таблиц Ко всему вышесказанному можно добавить, что Dreamweaver предлагает на выбор множество предопределенных форматов таблиц и возможность быстро "подогнать"...
Рисунок 5 18 Диалоговое окно Format Table
Рисунок 5.18. Диалоговое окно Format Table Группа Top Row позволяет установить параметры первой строки таблицы, ее "шапки". Раскрывающийся список Align задает выравнивание текста: п...

Сортировка таблицы
Сортировка таблицы Очень часто бывает необходимо отсортировать таблицу по значению одного или двух столбцов (более сложные сортировки по множеству столбцов встречаются значительно реже). Это...
Рисунок 5 19 Диалоговое окно Sort Table
Рисунок 5.19. Диалоговое окно Sort Table Номер первого столбца, по значениям которого будет производиться сортировка, задается в раскрывающемся списке Sort By. Все имеющиеся в нем пункты имею...
Вставка табличных данных
Вставка табличных данных Да, конечно, создавать "с нуля" таблицы в Dreamweaver проще простого. Но что делать, если нужно поместить на Web-страницу таблицу, созданную в другой програ...
Рисунок 5 20 Кнопка Tabular Data панели объектов
Рисунок 5.20. Кнопка Tabular Data панели объектов...
Рисунок 5 21 Диалоговое окно Import Tabular Data
Рисунок 5.21. Диалоговое окно Import Tabular Data В поле ввода Data File вводится имя файла данных. Вы также можете нажать кнопку Browse, расположенную справа от этого поля ввода, и выбрать н...

Слияние ячеек таблиц
Слияние ячеек таблиц Мы научились работать с таблицами и их составными частями. Вы можете подумать, что это все. Отнюдь! Мы еще не рассмотрели такое мощное средство, как слияние ячеек. Что...
Рисунок 5 22 Простая таблица
Рисунок 5.22. Простая таблица Все это очень просто и прекрасно вам знакомо. Теперь давайте рассмотрим более сложную таблицу (Рисунок 5.23). Здесь вы видите, что некоторые ячейки объединены,...
Рисунок 5 23 Более сложная таблица
Рисунок 5.23. Более сложная таблица Но как это сделать на Web-странице? Поддерживает ли HTML слияние ячеек? Конечно, поддерживает, иначе мы не стали бы вам об этом рассказывать. Давайте отк...
Рисунок 5 24 Изначальная таблица готовая к слиянию ячеек
Рисунок 5.24. Изначальная таблица, готовая к слиянию ячеек Теперь давайте скажем Dreamweaver, какие ячейки мы хотим соединить. Пусть, например, это будут ячейки 2 и 3, как на Рисунок 5.23. Вы...
Кнопка слияния ячеек редактора свойств
Рисунок 5.25. Кнопка слияния ячеек редактора свойств С помощью данной кнопки и производится слияние ячеек. Нажмите ее. На Рисунок 5.26 показано, что получится в этом случае....

Рисунок 5 26 Таблица получившаяся после слияния ячеек 2 и 3
Рисунок 5.26....
Таблица получившаяся после слияния
Теперь поместите текстовый курсор в ячейку 4. Мы сольем ее с ячейкой 5. Для этого выберите пункт Increase Column Span подменю Table меню Modify или контекстного меню либо нажмите комбинацию кл...
Использование таблиц
Использование таблиц Выше мы говорили, что способ, принятый в HTML для формирования таблиц, исключительно гибок. Добавление строк с новыми данными в таблицу выполняется исключительно просто,...
Текст в рамке
Текст в рамке Пожалуй, текст в рамке — самое простое, что можно сделать с использованием таблиц. С помощью таблицы Web-дизайнеры с легкостью обходят ограничения HTML в форматировании текстовы...
Рисунок 5 27 Рамка без текста
Рисунок 5.27. Рамка без текста Теперь нам осталось вписать в получившуюся рамку нужный текст. Поставьте текстовый курсор в единственную ячейку таблицы и наберите требуемый текст. Отформатируй...

Рисунок 5 28 Готовый заголовок — текст в рамке
Рисунок 5.28. Готовый заголовок — текст в рамке Вот и все, вроде бы. Сохраните получившуюся страницу и откройте ее в Internet Explorer. Кажется, все нормально: Internet Explorer показывает ее...
Рисунок 5 29 Текст в рамке в окне Navigator 4 74
Рисунок 5.29. Текст в рамке в окне Navigator 4.74. Видно, что рамка разделена на две половины: светлую и темную Что делать? Как заставить Navigator 4.74 отображать рамку нормально? Какой пара...
Рисунок 5 30 Внешняя таблица
Рисунок 5.30. Внешняя таблица Теперь помещаем текстовый курсор в единственную ячейку этой таблицы и вставляем в нее вторую, внутреннюю, таблицу. Ее ширина и высота должны быть равны 100% (что...
Рисунок 5 31 Готовая рамка для
Рисунок 5.31. Готовая рамка для заголовка, состоящая из двух вложенных одна в другую таблиц Теперь введем и отформатируем текст заголовка — и опять получим то, что показано на Рисунок 5.28....
Текст в графической рамке
Текст в графической рамке Аппетит приходит во время еды. Нам уже кажется, что текст в обычной цветной рамке — слишком простенькое украшение для нашей странички. Мы хотим чего-нибудь покрасивее...

Рисунок 5 32 Внешняя таблица с графическим фоном
Рисунок 5.32. Внешняя таблица с графическим фоном...
Рисунок 5 33 Графическая рамка
Рисунок 5.33. Графическая рамка, состоящая из двух вложенных таблиц Остается только вписать в ячейку внутренней таблицы нужный текст, отформатировать его и насладиться результатом (Рисунок 5....
Рисунок 5 34 Готовый заголовок в графической рамке
Рисунок 5.34. Готовый заголовок в графической рамке Вот так мы создали красивый заголовок для нашей Web-страницы. Сохраните страницу и задайте ее параметры (цвет фона, текста и т. п.), как и...
Рисунок 5 35 Еще одна ошибка в
Рисунок 5.35. Еще одна ошибка в старых версиях Navigator приводит к тому, что заголовок в графической рамке отображается некорректно Из-за ошибки в программе неправильно отображается фон внут...
Текст с отступами
Текст с отступами Следующий интересный прием, помогающий немного оживить Web-страницу, — это размещение текста с отступами слева и (или) справа. Иногда слева, справа, сверху и (или) снизу пом...

Рисунок 5 36 Готовый текст с отступами
Рисунок 5.36. Готовый текст с отступами Это простейший случай текста с отступами. Теперь давайте рассмотрим случаи посложнее. Как уже говорилось, в типографских документах часто применяются...
Рисунок 5 37 Горизонтальные линейки в ячейке таблицы
Рисунок 5.37. Горизонтальные линейки в ячейке таблицы Но что делать, если нужна вертикальная линейка? В этом случае не обойтись без модификации таблицы. Давайте подумаем, что такое линейки....
Рисунок 5 38 Текстовый абзац с вертикальными линейками
Рисунок 5.38. Текстовый абзац с вертикальными линейками Вы можете открыть эту страничку в Web-обозревателе и посмотреть, как он ее отобразит. Измените размеры окна Web-обозревателя и посмотри...
Текст фиксированного формата
Текст фиксированного формата Как Web-обозреватель выводит на Web-страницу текст? На самом деле, здесь нет ничего сложного. Он придерживается нескольких простых правил, которые вам стоит узнать:...
Рисунок 5 1 Фигурный текст неправильно
Рисунок 5.1. Фигурный текст неправильно отображается Web-обозревателем Да уж, мягко говоря, не то... Но не надо ругать Web-обозреватель: он всего лишь программа, следующая заложенному в ней а...

Рисунок 5 2 Текст фиксированного
Рисунок 5.2. Текст фиксированного формата отображается правильно Web-обозреватель прекрасно знает свое дело. Ему нужно только правильно поставить задачу — и он ее решит. Так вы поняли, что...
Сложные таблицы
Сложные таблицы Уже было сказано, что работа Web-дизайнера — по большей части не наука (здесь вернее сказать — технология), а искусство (а зачастую — просто шаманизм). И, как в любом искусств...
Рисунок 5 39 Список увлечений Ивана Ивановича Иванова
Рисунок 5.39. Список увлечений Ивана Ивановича Иванова Чтобы лучше понять физическую структуру, давайте пока отложим в сторону клавиатуру и мышь и возьмем лист бумаги. Нарисуем на нем нашу бо...
Рисунок 5 40 Внешняя таблица которая
Рисунок 5.40. Внешняя таблица, которая потом станет списком увлечений Теперь давайте создадим заголовок первой секции (первую вложенную таблицу). Поместите текстовый курсор в первую ячейку. В...
Рисунок 5 41 Заголовок первой секции списка увлечений
Рисунок 5.41. Заголовок первой секции списка увлечений Теперь очередь за первой секцией (вторая вложенная таблица). Поставьте текстовый курсор во вторую ячейку и поместите туда таблицу. Ее па...

Рисунок 5 42 Готовая первая секция списка увлечений
Рисунок 5.42. Готовая первая секция списка увлечений Поместите текстовый курсор в единственную ячейку первой вложенной таблицы и щелкните тег <TABLE> в секции тегов. Первая вложенная та...
Рисунок 5 43 Готовый список увлечений
Рисунок 5.43. Готовый список увлечений Вместо того чтобы "тыкать" мышью в окно документа, мы отредактируем HTML-код. Откройте окно кода или переключитесь в режим отображения кода. Н...
Составные изображения
Составные изображения Теперь поговорим еще об одном применении таблиц. А именно о составных изображениях. Предположим, вы создали, получили в подарок от знакомого художника или нашли в Сети к...
Рисунок 5 44 Схема формирования составного изображения
Рисунок 5.44. Схема формирования составного изображения Чтобы "собрать" воедино фрагменты изображения, используются особые таблицы, размеры ячеек которых жестко заданы и равны разме...
Проблемы с таблицами и их решение
Проблемы с таблицами и их решение Напоследок давайте поговорим о том, какие проблемы подстерегают Web-дизайнера, решившего использовать таблицы, и как они преодолеваются....

Общие недостатки таблиц и их преодоление
Общие недостатки таблиц и их преодоление Итак, поговорим о недостатках таблиц... Да, у HTML-таблиц есть серьезные недостатки. Что ж, в мире нет ничего совершенного!.. О первом недостатке уже...
Проблемы с таблицами в старых версиях Navigator
Проблемы с таблицами в старых версиях Navigator А сейчас пора вплотную заняться Navigator. Вы уже заметили, что старые версии этой программы отличаются весьма странным поведением. Мало того,...
Что дальше?
Что дальше? Осталось сделать последнюю страницу — список завершенных проектов. Ну, это уже совсем просто!...
Является тому примером Не надо
Рисунок 5.45 является тому примером. Не надо мудрить с оформлением, просто сделайте элементарнейшую страничку с простейшей табличкой. Но не забудьте соблюсти единство оформления и сохранить гото...
Рисунок 5 45 Страница списка законченных проектов
Рисунок 5.45. Страница списка законченных проектов Итак, почти все страницы нашего сайта готовы (осталось только сделать страницу ссылок, но это потом). Теперь самое время узнать, как соедини...

Простые таблицы
Простые таблицы Ну все, пора переходить к настоящим таблицам. Хватит с нас корявого текста фиксированного формата!...
Создание таблиц
Создание таблиц Сначала, как обычно, создадим новую Web-страницу. Пустую таблицу создать проще всего, нажав кнопку Insert Table (Рисунок 5.3) вкладки Common панели объектов (см. Рисунок 4.3)...
Рисунок 5 3 Кнопка Insert Table панели объектов
Рисунок 5.3. Кнопка Insert Table панели объектов...
Рисунок 5 4 Диалоговое окно Insert Table
Рисунок 5.4. Диалоговое окно Insert Table В полях ввода Rows и Columns вводится, соответственно, количество строк и столбцов создаваемой таблицы. Если вы ошибетесь и введете большее или меньш...
Рисунок 5 5 Наша первая таблица
Рисунок 5.5. Наша первая таблица...

Рисунок 5 6 Таблица с заполненными ячейками
Рисунок 5.6....
Таблица с заполненными ячейками
Теперь поставьте текстовый курсор в любую ячейку таблицы и наберите какой-нибудь текст. Повторите то же самое с любыми другими ячейками. В одну из ячеек можете вставить графическое изображени...
Работа с таблицами
Работа с таблицами Измените размер окна документа Dreamweaver, в котором находится наша таблица. Заметьте, как изменяется ширина таблицы, а все потому, что она задана относительно ширины роди...
Рисунок 5 7 Диалоговое окно Insert
Рисунок 5.7. Диалоговое окно Insert Rows or Columns (включен переключатель Rows) С помощью переключателей группы Insert вы задаете тип объекта, который хотите вставить в таблицу. Переключател...
Рисунок 5 8 Диалоговое окно Insert
Рисунок 5.8. Диалоговое окно Insert Rows or Columns (включен переключатель Columns) Строки или столбцы будут вставлены сразу после нажатия кнопки ОК. У вас есть еще одна возможность вставит...

Рисунок 5 9 Кнопка разделения ячейки редактора свойств
Рисунок 5.9. Кнопка разделения ячейки редактора свойств...
Рисунок 5 10 Диалоговое окно Split Cell
Рисунок 5.10. Диалоговое окно Split Cell Группа переключателей Split Cell Into задает, как будет делиться ячейка. Переключатель Rows задает разделение текущей строки на несколько строк, колич...
Формирование таблиц
Формирование таблиц Обычно после рассмотрения создания какого-либо элемента страницы мы рассказываем о тегах HTML, с помощью которых он создается. Теперь пришла пора выяснить, с помощью каких...
Таблица создается с помощью парного
Таблица создается с помощью парного тега <TABLE>, имеющего множество атрибутов, из которых мы выделим WIDTH, задающий ширину таблицы, и HEIGHT, задающий ее высоту. На втором этапе вн...
Форматирование таблиц

Форматирование таблиц Ну вот, как работать с таблицами, мы разобрались. Теперь пора изучить средства, предлагаемые HTML для форматирования таблиц. Но сначала нужно выяснить, как выделить в ок...
Выделение элементов таблиц
Выделение элементов таблиц Обратимся к Dreamweaver, а именно к нашей учебной страничке 5.3.htm. Откроем ее, поместим текстовый курсор в одну из ячеек и посмотрим на секцию тегов. Мы увидим там...
Параметры ячейки
Параметры ячейки Чтобы добраться до параметров ячейки, совсем не обязательно ее выделять. Просто поставьте в нее текстовый курсор, и редактор свойств тотчас предложит вам задать ее параметры...
Рисунок 5 11 Вид редактора свойств
Рисунок 5.11. Вид редактора свойств при выделенной ячейке таблицы Как видите, уже знакомые нам элементы управления, находящиеся в верхней части редактора свойств, позволяют задать параметры т...
Рисунок 5 12 Вид таблицы при включенном флажке No Wrap
Рисунок 5.12. Вид таблицы при включенном флажке No Wrap Флажок Header позволит отформатировать ячейку, в которой находится текстовый курсор, как ячейку заголовка таблицы. Ячейка заголовка отл...
Рисунок 5 13 Таблица со строкой заголовка

h2>Таблица со строкой заголовка...