Создание таблиц

Сначала, как обычно, создадим новую Web-страницу.

Пустую таблицу создать проще всего, нажав кнопку Insert Table(рис. 5.3) вкладки Commonпанели объектов (см. рис. 4.3). Также вы можете выбрать пункт Tableменю Insertили нажать комбинацию клавиш <Ctrl>+<Alt>+<T>. В любом случае на экране появится диалоговое окно Insert Table,показанное на рис. 5.4.

Рис. 5.3. Кнопка Insert Tableпанели объектов

Рис. 5.4. Диалоговое окно Insert Table

В полях ввода Rows и Columnsвводится, соответственно, количество строк и столбцов создаваемой таблицы. Если вы ошибетесь и введете большее или меньшее количество строк или столбцов, не беда — вы всегда сможете добавить их или удалить.

В поле ввода Widthзадается ширина таблицы. Возможно задание ширины как в пикселах, так и в процентах от ширины родителя. В раскрывающемся списке, расположенном справа от этого поля ввода, вы должны будете выбрать пункт Percent(проценты) или Pixels(пикселы).

В поле ввода Borderзадается толщина границ таблицы в пикселах. По умолчанию она равна 1; вы можете ввести 0, чтобы убрать границы совсем.

В поле ввода Cell Paddingзадается расстояние между границей ячейки таблицы и ее содержимым в пикселах. По умолчанию оно равно 1.

Аналогично, поле ввода Cell Spacingслужит для задания расстояния между границами отдельных ячеек. По умолчанию оно равно 2.

Изменяя значения полей ввода Cell Padding и Cell Spacing,можно получить интересные эффекты, например огромные промежутки между границами ячеек или полупустые ячейки, в самом центре которых съежился небольшой текст. Обычно такие эффекты используют в декоративных таблицах.

Задав значения в полях ввода, нажмите кнопку ОК.Мы не будем говорить, что именно вам нужно вводить — поэкспериментируйте сами. Так или иначе, наша первая таблица будет чисто учебной. Во всяком случае, у вас должно получиться что-то похожее на рис. 5.5. Сохраните эту таблицу в файле 5.3.htm.

Рис. 5.5. Наша первая таблица

Рис. 5.6. Таблица с заполненными ячейками

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

В одну из ячеек можете вставить графическое изображение из тех, что мы использовали в предыдущих занятиях. У вас получится нечто, похожее на рис. 5.6.

Вы даже можете вставить в ячейку таблицы другую таблицу. Попробуйте -и это получится!

Кстати, даже если вы задали толщину границ таблицы равной нулю, Dreamweaver все равно будет отображать тонкую штриховую линию, чтобы помочь вам не потерять таблицу. Если эта граница вам мешает, и вы уверены, что справитесь без нее, отключите пункт-выключатель Table Bordersподменю Visual Aidsменю Views.Чтобы вернуть границы назад, просто включите этот пункт.

Работа с таблицами

Измените размер окна документа Dreamweaver, в котором находится наша таблица. Заметьте, как изменяется ширина таблицы, а все потому, что она задана относительно ширины родителя, в нашем случае окна. Если бы мы задали фиксированную ширину таблицы в пикселах, она бы не изменилась. Также вы, наверное, уже заметили, что при вводе текста в ячейки их ширина и высота изменяются, чтобы вместить текст полностью. Такие действия выполняют и Dreamweaver при создании страниц, и программы Web-обозревателей при их отображении; если размер ячейки не был жестко задан, он всегда устанавливается самой программой.

Поместите курсор на вертикальной границе между двумя ячейками. Вы увидите, что он примет форму двунаправленной стрелки, и вы сможете захватить мышью границу и переместить ее по горизонтали. Одна из ячеек станет шире, а другая — уже. При этом им будет присвоено фиксированное значение ширины; Web-обозреватель будет изменять ширину таких ячеек только в крайнем случае, когда ему не будет хватать места для содержимого этих ячеек.

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

Точно таким же образом вы можете изменить общую ширину таблицы. Для этого вам будет достаточно перетащить D нужную сторону крайнюю правую границу таблицы. Ну и, разумеется, Dreamweaver позволит вам изменить высоту таблицы, просто перетащив ее крайнюю нижнюю границу.

Имейте, однако, в виду, что во всех этих случаях Dreamweaver присвоит размерам таблицы, строк и ячеек (смотря, чьи размеры вы изменяли) фиксированные значения. Но, опять же, если Web-обозревателю не будет хватать места в этих ячейках, он их увеличит.

Вообще, заданные вами размеры строк и столбцов, да и размеры самой таблицы, — не более чем рекомендация Web-обозревателю. Вы говорите ему: "Если получится, сделай размер такой-то ячейки таким-то, а если не получится — задавай его на свое усмотрение". Это стандартное поведение Web-обозревателя.

Итак, с размерами разобрались. Теперь поговорим, как можно добавить новые или удалить лишние строки или столбцы.

Предположим, вам необходимо добавить новую строку или новый столбец. Для этого поместите текстовый курсор в ячейку строки, над которой будет добавлена новая, и выберите пункт Insert Rowв подменю Tableменю Modifyили контекстного меню. Также вы можете нажать комбинацию клавиш <Ctrl>+<M>. Для добавления столбца поставьте текстовый курсор в ячейку, справа от которой будет добавлен новый столбец, и выберите пункт Insert Columnв подменю Tableменю Modifyили контекстного меню. Если вы привыкли работать с клавиатурой, нажмите комбинацию клавиш <Ctrl>+ +<Shift>+<M>. Это простейшие и наиболее быстрые команды вставки строки или столбца.

Также вы можете воспользоваться пунктом Insert Rows or Columnsподменю Tableменю Modifyили контекстного меню. После его выбора на экране появится диалоговое окно Insert Rows or Columns,показанное на рис. 5.7.

Рис. 5.7. Диалоговое окно Insert Rows or Columns (включен переключатель Rows)

С помощью переключателей группы Insertвы задаете тип объекта, который хотите вставить в таблицу. Переключатель Rowsзадает вставку строк, а переключатель Columns— столбцов.

В случае если выбран переключатель Rows,в поле счетчика Number of Rowsзадается количество вставляемых строк, а с помощью группы переключателей Whereвыбирается, где они будут вставляться. Переключатель Above the Selectionвставит новые строки над текущей строкой (той, где стоит текстовый курсор), а переключатель Below the Selection— под текущей строкой.

В случае если выбран переключатель Columns,диалоговое окно принимает вид, показанный на рис. 5.8. При этом в поле счетчика Number of Columnsзадается количество вставляемых столбцов, а с помощью двух переключателей Whereвыбирается, где они будут вставляться. Переключатель Before
current Columnвставит новые столбцы перед текущим столбцом (тем, где стоит текстовый курсор), а переключатель After current Column— за текущим столбцом.

Рис. 5.8. Диалоговое окно Insert Rows or Columns(включен переключатель Columns)

Строки или столбцы будут вставлены сразу после нажатия кнопки ОК.

У вас есть еще одна возможность вставить в таблицу новую строку или столбец — разделить текущую ячейку по горизонтали или по вертикали. В первом случае текущая строка делится на две или несколько строк, а во втором текущий столбец делится на два или несколько столбцов. Для того чтобы разделить ячейку таблицы, нажмите кнопку разделения ячейки, находящуюся в нижнем левом углу редактора свойств (рис. 5.9). Вы также можете выбрать пункт Split Cellв подменю Tableменю Modifyили контекстного меню либо нажать комбинацию клавиш <Ctrl>+<Alt>+<S>. В любом из этих случаев на экране появится диалоговое окно Split Cell,показанное на рис. 5.10.

Рис. 5.9. Кнопка разделения ячейки редактора свойств

Рис. 5.10. Диалоговое окно Split Cell

Группа переключателей Split Cell Intoзадает, как будет делиться ячейка. Переключатель Rowsзадает разделение текущей строки на несколько строк, количество которых устанавливается в поле счетчика Number of Rows.Если же выбран переключатель Columns,текущий столбец будет делиться на несколько столбцов, количество которых задается в поле счетчика Number of Columns.После нажатия кнопки ОК текущая ячейка будет разделена.

Ненужные строки и столбцы удаляются еще проще. Для удаления текущей строки либо выберите пункт Delete Rowв подменю Tableменю Modifyили контекстного меню, либо нажмите комбинацию клавиш <Ctrl>+<Shift>+<M>. Для удаления текущего столбца либо выберите пункт Delete Columnв подменю Tableменю Modifyили контекстного меню, либо нажмите комбинацию клавиш <Ctrl>+<Shift>+<->.