При необходимости размещения на ограниченном пространстве веб-страницы множества цифровых (и не только) данных лучшим средством является таблица. При необходимости создания красивого списка снова может помочь таблица. И при необходимости точного позиционирования текста и графики относительно друг друга опять же поможет таблица. Таблицы используются повсеместно в веб-документах. И это немудрено: при малозначительных недостатках они имеют массу достоинств.
Без таблиц невозможно представить веб-дизайн. Таблицы с разноцветными ячейками, с границами и без, таблицы, вложенные друг в друга, таблицы с невидимыми границами придут на помощь веб-дизайнеру, когда ему необходимо сотворить что-то особенное, отличное от простого потока текста, разбавленного рисунками. Раньше, когда нужно было поместить на страницу табличные данные, веб-дизайнер использовал текст фиксированного формата.
Статья: Работа с таблицами на веб-страницах
Но эти времена давно прошли. В настоящее время стандарт HTML предоставляет веб-дизайнерам мощные средства создания таблиц различной сложности.
Создавать таблицы путем ручного ввода HTML-кода достаточно трудоемко. Среда Macromedia Dreamweaver MX позволяет значительно облегчить труд веб-дизайнера, предоставляя возможность вставки в текст таблицы несколькими щелчками мыши. Так же просто изменяются свойства самой таблицы и любой ее строчки или ячейки. Разместить в ячейках таблицы необходимое содержимое в виде текста, графики, других таблиц и всего того, чем богат HTML и что потребуется веб-дизайнеру, не составляет особого труда.
Основные моменты работы с таблицами
Ниже будут рассмотрены основные моменты работы с таблицами: их создание, форматирование, размещение в них полезного содержимого, работа с ячейками, все достоинства и недостатки. Для начала необходимо познакомиться с доисторическим, т.е. дотабличным периодом в истории HTML. Вспомним, что представлял собой текст фиксированного формата, и чем он может быть полезен в настоящее время.
Изменение горизонтального и вертикального размера таблицы
Изменяя размер окна документа Dreamweaver, содержащего таблицу, можно заметить изменение ширины таблицы, это происходит потому, что она задается относительно ширины родителя, в данном случае окна. При задании фиксированной ширины таблицы в пикселях, изменения бы не произошло. Кроме того, можно отметить, что в процессе ввода текста в ячейки их ширина и высота меняются, чтобы текст вместился полностью. Подобные действия выполняют и Dreamweaver, при создании страницы, и программы веб-обозревателей при их отображении. В случае, когда размер ячеек жестко не фиксируется, его всегда устанавливает сама программа.
Поместив курсор на вертикальную границу между двумя ячейками, увидим, как он принимает форму двунаправленной стрелки, с помощью которой можно выполнить захват мышью границы и переместить ее по горизонтали. В результате одна из ячеек станет шире, а другая — уже. При этом им присваивается фиксированное значение ширины. Веб-обозреватель изменит ширину этих ячеек лишь в крайнем случае, когда ему не хватит места для содержимого этих ячеек.
Аналогично можно поступить и с горизонтальной границей между ячейками. В данном случае строкам, границу между которыми двигаем, присвоится фиксированное значение высоты. Аналогичным образом можно изменить общую ширину таблицы. Для этого нужно будет перетащить нужную сторону (крайнюю правую границу) таблицы. И, как следствие, Dreamweaver позволяет провести изменение высоты таблицы путем перетаскивания ее крайней нижней границы.
Однако, необходимо помнить, что в подобных случаях Dreamweaver будет присваивать размерам таблиц, строк и ячеек фиксированные значения. Однако, в случае нехватки веб-обозревателю места в данных ячейках, он их будет увеличивать.
Заданные размеры строк и столбцов, размеры самой таблицы являются ничем иным как рекомендациями веб-обозревателю. Т.е. говорим ему: "Если сможешь, сделай размер такой-то ячейки таким-то, а если нет — задай его на свое усмотрение". Данное поведение обозревателя является стандартным.
Добавление и удаление в таблице лишних строк и столбцов
При возникновении необходимости добавления новой строки или нового столбца нужно поместить текстовый курсор в ячейку строки, над которой будет добавлена новая, и выбрать команду Insert Row в меню Table - Modify или же контекстного меню. Также можно выполнить это действие нажатием комбинации клавиш $Ctrl+M$. При добавлении столбца необходимо поставить текстовый курсор в ячейку, справа от которой добавится новый столбец, и выбрать команду Insert Column в меню Table - Modify или же в контекстном меню. Привыкшим к работе с клавиатурой рекомендуется нажать комбинацию клавиш $Ctrl + Shift + M$. Данные команды являются самыми простыми и наиболее быстрыми командами вставки строк или столбцов. Кроме того, можно использовать команду Insert Rows or Columns меню Table - Modify или контекстного меню. После ее выбора на экране появляется диалоговое окно Insert Rows or Columns, представленное на рисунке 1.
Используя переключатели группы Insert можно задать тип объекта, который будет вставляться в таблицу. Переключателем Rows задается вставка строк, а переключателем Columns — столбцов.
В случае выбора переключателя Rows, в поле счетчика Number of Rows будет задано количество вставляемых строк, а используя группу переключателей Where можно выбрать, куда они будут вставлены. Переключателем Above the Selection вставляются новые строки над текущей строкой, а переключателем Below the Selection — под текущей строкой.
В случае выбора переключателя Columns, диалоговое окно примет вид, представленный на рисунке 2. При этом в полем счетчика Number of Columns будет задано количество вставляемых столбцов, а переключателями Where выберется, куда будут вставлены столбцы.
Переключателем Before current Column вставляются новые столбцы перед текущим столбцом, а переключателем After current Column— за текущим столбцом.
Строки или столбцы вставляются по нажатию кнопки ОК.
Существует еще одна возможность вставки в таблицу новой строки или столбца. Для этого необходимо разделить текущую ячейку по горизонтали или по вертикали. В первом случае текущая строка разделится на две или несколько строк, а во втором текущий столбец разделится на два или несколько столбцов. Для разделения ячейки таблицы необходимо нажать кнопку разделения ячейки, которая находится в нижнем левом углу редактора свойств и имеет вид, представленный на рисунке 3. Кроме того, можно выбрать команду $Split Cell$ в меню Table - Modify или контекстного меню либо воспользоваться комбинацией клавиш $Ctrl + Alt + S$. В любом случае на экране появляется диалоговое окно Split Cell, представленное на рисунке 4.
Группой переключателей Split Cell Into задается, как будет разделена ячейка. Переключателем Rows задается деление текущей строки на несколько строк, количество которых устанавливается полем счетчика Number of Rows. При выборе переключателя Columns, текущий столбец разделится на несколько столбцов, количество которых задано полем счетчика Number of Columns. По нажатию кнопки ОК текущая ячейка разделится.
Ненужные строки и столбцы можно удалить еще проще. Чтобы удалить текущую строку нужно выбрать команду Delete Row в меню Table - Modify или контекстного меню, либо нажать комбинацию клавиш $Ctrl + Shift + M$. Чтобы удалить текущий столбец нужно выбрать команду Delete Column в меню Table - Modify или контекстного меню, либо нажать комбинацию клавиш $Ctrl + Shift + $.
