1  2  3  4  5  6  7  8  9  10

Слияние ячеек таблиц
Мы научились работать с таблицами и их составными частями. Вы можете подумать, что это все. Отнюдь мы еще не рассмотрели такое мощное средство, как слияние ячеек.
Что это такое, проще всего объяснить на примере.
Предположим, у нас есть следующая таблица. Ничего особенно­го, обычная таблица, какие вы уже умеете создавать в Dreamweaver . Простейший набор строк и ячеек, даже без форматирования. Мы пронумеровали ячейки таблицы, чтобы они не пустовали и чтобы нам самим в дальнейшем было легче.
Все это очень просто и прекрасно вам знакомо. Теперь давайте рассмотрим более сложную таблицу .
Здесь вы видите, что некоторые ячейки объединены, слиты в одну (об этом говорит знак "плюс" между их номерами). Такой прием называется слиянием ячеек. Как видите, ячейки могут быть слиты по горизонтали и по вертикали. И количество ячеек, соединяемых в одну, не ограничено.
Но как это сделать на Web -странице? Поддерживает ли HTML слияние ячеек? Конечно, поддерживает, иначе мы не стали бы вам об этом рассказывать.
Давайте откроем новое окно Dreamweaver и поместим в него простую таблицу в пять столбцов и четыре строки. Не будем мудрить с форматированием и просто пронумеруем ячейки таблицы, чтобы было легче в ней ориентироваться . Сохраним полученную таблицу под именем 5.4.htm .
Теперь давайте скажем Dreamweaver , какие ячейки мы хотим соединить. Пусть, например, это будут ячейки 2 и 3. Выделите их. И обратите внимание на редактор свойств. В его левом нижнем углу находится кнопка.
С помощью данной кнопки и производится слияние ячеек. Нажмите ее.
Вместо того чтобы нажимать эту кнопку, вы можете выбрать пункт Merge Cells подменю Table меню Modify или контекстного меню либо нажать ком­бинацию клавиш < Ctrl >+< Alt >+< M >.
Теперь поместите текстовый курсор в ячейку 4. Мы сольем ее с ячейкой 5. Для этого выберите пункт Increase Column Span подменю Table меню Modify или контекстного меню либо нажмите комбинацию клавиш < Ctrl >+< Shift >+<]>. Ячейки 4 и 5 сольются в одну. Это еще один способ слияния ячеек по горизонтали, самый быстрый, но позволяющий слить за один раз только две ячейки.
Остается соединить четыре ячейки в одну. Выполните это одним из только что рассмотренных способов.
Как видите, все очень просто. И это заслуга Dreamweaver .
Итак, мы узнали, как выполняется слияние ячеек по горизонтали. Осталось рассмотреть, как ячейки таблицы сливаются по вертикали. В частности, нам нужно слить ячейки 1 и 6. Опять же вы можете выделить их и нажать кнопку слияния, показанную. Либо вы можете поставить текстовый курсор в ячейку 1 и выбрать пункт Increase Row Span подменю Table меню Modify или контекстного меню. Здесь тоже все просто.
Но что делать, если вы хотите разъединить слитые ячейки? Dreamweaver также максимально облегчает вам эту задачу. Достаточно поместить текстовый курсор в ячейку, в которую были слиты несколько ячеек таблицы, и сделать следующее:
Если выполнялось слияние по горизонтали, выбрать пункт Decrease Col umn Span подменю Table меню Modify или контекстного меню либо нажать комбинацию клавиш <Ctrl>+<Shift >+<[>;
Если выполнялось слияние по вертикали, выбрать пункт Decrease Row Span подменю Table меню Modify или контекстного меню.
Примечание
Слияние ячеек задается с помощью атрибутов colspan и rowspan тега < TD >. Атрибут colspan задает слияние по горизонтали , а атрибут rowspan — по вертикали . В качестве значения атрибута задается количество соединяемых ячеек .
Давайте приведем HTML -код нашей таблицы, чтобы понять, как работают атрибуты colspan и rowspan . После определений ячеек, использующих их, приведем подробные комментарии. Это пригодится, если вы захотите отре­дактировать полученный код вручную, да и просто для понимания принципов работы Dreamweaver :
<table width="75%" border="1">
<tr>
<!-- Определяем ячейки первой строки -->
<!-- Соединяем ячейки 1 и 6 по вертикали -->
< td rowspan ="2"> 1+6</ td >
<!--Соединяем ячейки 2 и 3 по горизонтали -->
< td colspan ="2">2+3</ td >
<!-- Соединяем ячейки 4 и 5 по горизонтали -->
<td colspan="2">4+5</td>
</tr>
<tr>
<!-- Определяем ячейки второй строки. Заметьте, что здесь нет определения ячейки 6, т. к. она уже соединена с первой (см. определение ячеек первой строки) . -->
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<!-- Это третья строка. Здесь всего две ячейки: одиннадцатая и большая ячейка, образованная слиянием ячеек 12-15. -->
<td>11 </td>
<td colspan =" 4">12+13+14+15</td>
</tr>
<tr>
<!-- Последняя строка самая простая. Здесь вообще нет никаких сли яний -->
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</table>
Как вы уже заметили, слияния ячеек делают HTML -код таблицы крайне запутанным, а ошибки в нем — исключительно трудновыявляемыми. И куда делась былая стройность HTML -таблиц, воскликните в ужасе вы ! Можно ли какнибудь избежать этого хаоса тегов и атрибутов, определяющих ели-тые ячейки, этих ужасных ошибок, которые в нем таятся?
Можно. Достаточно просто обойтись без таблиц или, по крайней мере, не создавать в них слитых ячеек. Ну а уж если вам понадобится таблица, то используйте для ее построения Dreamweaver , ведь он, в отличие от Web - дизайнеров, никогда не делает ошибок в HTML -коде. Именно так поступа ют опытные Web -разработчики, когда им нужна сложная и громоздкая таблица. Автор настоятельно рекомендует поступать так и вам.
Использование таблиц
Выше мы говорили, что способ, принятый в HTML для формирования таблиц, исключительно гибок. Добавление строк с новыми данными в таблицу выполняется исключительно просто, даже если вы работаете непосредственно с HTML -кодом; точно так же просто можно удалить ненужные строки. Заметно сложнее добавить или удалить столбец, но здесь вам на помощь придет Dreamweaver . Платой за эту гибкость является некоторая громоздкость получающегося HTML -кода.
Стандарт HTML также позволяет вам поместить в ячейку таблицы все, что пожелаете, в том числе и другую таблицу. Поверьте, но Web -дизайнеры та кое вытворяют с таблицами, что диву даешься. Многократная вложенность, всевозможные хитрости с параметрами, сложнейшие цветовые настройки, невидимые границы — просто высший пилотаж таблицестроения. В результате Web -страница становится больше похожей на газету: несколько колонок, оглавление, текст и изображения в рамках, линейки, красивый заголовок, сделанный без применения графики. И ведь все это делается довольно просто — достаточно только понять принцип.
Чтобы достичь "высшего пилотажа" таблицестроения, вам пока что не хватает знаний. В частности, знаний о некоторых параметрах и особенностях таблиц. Приготовьтесь — сейчас вы узнаете о некоторых приемах, к которым прибегают Web -дизайнеры, чтобы пустить вам пыль в глаза, и которые не очень-то раскрывают непосвященным.

1  2  3  4  5  6  7  8  9  10

Вверх