Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.
Создание таблиц
Для добавления таблицы на веб-страницу используется тег <TABLE>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <TR> и <TD> соответственно. Таблица должна содержать хотя бы одну ячейку (пример 11.1). Допускается вместо тега <TD>использовать тег <TH>. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. В остальном, разницы между ячейками, созданными через теги <TD>и <TH>, нет.
Пример 11.1. Создание таблицы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<table border="1" width="100%" cellpadding="5">
<tr>
<th>Ячейка 1</th>
<th>Ячейка 2</th>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>
</body>
</html>
Вид таблицы, полученной в данном примере, показан ниже.
| Ячейка 1 | Ячейка 2 |
|---|---|
| Ячейка 3 | Ячейка 4 |
Ячейки формируются по строкам, вначале указывается первая строка, затем вторая и т.д.
Параметры таблиц
Тот факт, что таблицы применяются достаточно часто и не только для отображения табличных данных обязан не только их гибкости и универсальности, но и обилию параметров тегов<TABLE>, <TR> и <TD>. Далее перечислены параметры тега <TABLE>.
ALIGN
Задает выравнивание таблицы по краю окна браузера. Допустимые значения: left — выравнивание таблицы по левому краю, center — по центру и right — по правому краю.
BGCOLOR
Устанавливает цвет фона таблицы.
BORDER
Устанавливает толщину рамки в пикселах. По умолчанию рамка изображается трехмерной, но если используется параметр bordercolor тега <TABLE>, то вид рамки меняется. Когда в теге<TABLE> используется параметр border без аргументов (<table border>), то браузер отображает рамку толщиной один пиксел.
BORDERCOLOR
Устанавливает цвет рамки таблицы. Рамка обычно рисуется как трехмерная, добавление параметров bordercolor и border к тегу <TABLE> создают однотонную линию.
CELLPADDING
Определяет расстояние между границей ячейки и ее содержимым. Этот параметр добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без параметра cellpaddingтекст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление жеcellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот параметр не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.
CELLSPACING
Задает расстояние между внешними границами ячеек. Если установлен параметр border, толщина границы принимается в расчет и входит в общее значение.
HEIGHT
Устанавливает высоту таблицы. В спецификации HTML 4 этого параметра нет, однако браузеры в большинстве случаев понимают его, если он установлен у тега <TABLE>. Если высота таблицы не указана, то берется суммарное значение параметра height у тега <TD>, в противном случае высота вычисляется на основе содержимого таблицы.
WIDTH
Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, параметр width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого. Как и в случае с высотой, если ширина явно не указана, то она будет вычисляться на основе содержимого таблицы.
Параметры ячеек
Каждая ячейка таблицы, задаваемая через тег <TD>, в свою очередь тоже имеет свои параметры, часть из которых совпадает с параметрами тега <TABLE>.
ALIGN
Задает выравнивание содержимого ячейки по горизонтали. Возможные значения: left — выравнивание по левому краю, center — по центру и right — по правому краю.
BGCOLOR
Устанавливает цвет фона ячейки. Используя этот параметр совместно с атрибутом bgcolor тега<TABLE> можно получить разнообразные эффекты в таблице.
BORDERCOLOR
Устанавливает цвет рамки вокруг ячейки. Рамка показывается, когда установлен параметрborder с ненулевым значением у тега <TABLE>.
COLSPAN
Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной ниже, где используется горизонтальное объединение ячеек.
| Ячейка 1 | |
| Ячейка 2 | Ячейка 3 |
В данной таблице содержатся две строки и две колонки, причем верхние горизонтальные ячейки объединены с помощью параметра colspan.
HEIGHT
Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого. Однако при использовании параметра height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот параметр будет проигнорирован. В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали.
NOWRAP
Добавление параметра nowrap к тегу <TD> заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на веб-страницу. Как следствие, появится горизонтальная полоса прокрутки. В любом случае, пользоваться подобной таблицей будет неудобно, из-за чего применение параметра nowrapосуждается в спецификации HTML 4.
ROWSPAN
Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной ниже, где применяется вертикальное объединение ячеек.
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 |
В данной таблице содержатся две строки и две колонки, левые вертикальные ячейки объединены с помощью параметра rowspan.
VALIGN
Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию контент ячейки располагается по ее вертикали в центре. Возможные значения: top — выравнивание по верхнему краю строки, middle — выравнивание по середине, bottom — выравнивание по нижнему краю, baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.
WIDTH
Задает ширину ячейки. Суммарное значение ширины всех ячеек может превышать общую ширину таблицы только в том случае, если содержимое ячейки превышает указанную ширину.
Особенности таблиц
У каждого параметра таблицы есть свое значение установленное по умолчанию. Это означает, что если какой-то атрибут пропущен, то неявно он все равно присутствует, причем с некоторым значением. Из-за чего вид таблицы может оказаться совсем другим, нежели предполагал разработчик. Чтобы понимать, что можно ожидать от таблиц, следует знать их явные и неявные особенности, которые перечислены далее.
- Одну таблицу допускается помещать внутрь ячейки другой таблицы. Это требуется для представления сложных данных или в том случае, когда одна таблица выступает в роли модульной сетки, а вторая, внутри нее, уже как обычная таблица.
- Размеры таблицы изначально не установлены и вычисляются на основе содержимого ячеек. Например, общая ширина определяется автоматически исходя из суммарной ширины содержимого ячеек плюс ширина границ между ячейками, поля вокруг содержимого, устанавливаемые через параметр cellpadding и расстояние между ячейками, которые определяются значением cellspacing.
- Если для таблицы задана ее ширина в процентах или пикселах, то содержимое таблицы подстраивается под указанные размеры. Так, браузер автоматически добавляет переносы строк в текст, чтобы он полностью поместился в ячейку, и при этом ширина таблицы осталась без изменений. Бывает, что ширину содержимого ячейки невозможно изменить, как это, например, происходит при добавлении рисунков в ячейку. В этом случае ширина таблицы увеличивается, несмотря на указанные размеры.
- Рамка таблицы, в случае добавления параметра border к тегу <TABLE>, изначально отображается как трехмерная. Присоединение параметра bordercolor превращает рамку в однотонную, ликвидируя тем самым эффект трехмерности.
- Пока таблица не загрузится полностью, ее содержимое не начнет отображаться. Дело в том, что браузер, прежде чем показать содержимое таблицы, должен вычислить необходимые размеры ячеек, их ширину и высоту. А для этого необходимо знать, что в этих ячейках находится. Поэтому браузер и ожидает, пока загрузится все, что находится в ячейках, и только потом отображает таблицу.
Добавление таблицы и изменение ее свойств в Nvu
Для добавления таблицы нажмите на кнопку 
на панели инструментов Nvu или выберите пункт меню Вставка > Таблица... или Таблица > Вставить > Таблица... После чего откроется окно, как показано на рис. 11.1.
Рис. 11.1. Вставка таблицы в Nvu
Укажите желаемые размеры таблицы и щелкните по кнопке ОК или в любом месте внутри таблицы (рис. 11.1). При таком способе создания таблицы некоторые параметры устанавливаются автоматически, в частности, ширина таблицы равна 100 пикселов, значения параметров cellspasing и cellpadding равны 2 пикселам, а border — 1 пикселу. Также добавляется необязательный тег <TBODY> (пример 11.2).
Пример 11.2. Исходная таблица, созданная с помощью Nvu
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<table border="1" cellpadding="2" cellspacing="2" width="100">
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
Замечание
Контейнер <TBODY> предназначен для хранения одной или нескольких строк таблицы. Этот тег требуется для разбиения таблицы на структурные области, к которым можно применять свое собственное оформление или другие параметры. Обычно необходимости в этом теге нет, поэтому его можно не указывать.
Чтобы указать дополнительные параметры таблицы, такие как: количество строк, столбцов, ширина таблицы и рамки, то следует выбрать вкладку «Точная» в окне «Вставка таблицы», как показано на рис. 11.2.
Рис. 11.2. Указание некоторых параметров при создании таблицы
Такие атрибуты таблицы как горизонтальное выравнивание в ячейке (align), вертикальное выравнивание (valign), переносить текст или нет (wrap), расстояние между соседними ячейками (cellspacing) и отступ от границы до содержимого ячейки (cellpadding) можно установить на вкладке «Ячейка» (рис. 11.3).
Рис. 11.3. Параметры ячеек и таблицы
Изменение размеров таблицы и ячеек
Чтобы изменить размеры исходной таблицы достаточно поместить курсор в любую ячейку созданной таблицы, и тогда отобразятся специальные маркеры по ее сторонам, с помощью которых можно установить новый размер (рис. 11.4). Размеры ячеек отображаются на линейках сверху и слева.
Рис. 11.4. С помощью мыши можно указывать новую ширину и высоту таблицы
После того как вы потянете за один из маркеров, новый размер таблицы отображается пунктирной линией. Также в специальном окне выводятся ширина и высота таблицы, а в скобках — изменения относительно текущего размера (рис. 11.5).
Рис. 11.5. Отображение новых размеров таблицы
Изменить ширину или высоту отдельных строк или колонок таблицы можно с помощью линеек, как показано на рис. 11.6. Наводите курсор мыши на разделительную полосу и перемещаете в нужную сторону. Текущая ширина или высота отображается там же в момент перемещения.
Рис. 11.6. Изменение ширины столбца
Замечание
Обычно линейки в Nvu всегда включены, но вы можете сами их выключать или включать при необходимости через меню Вид > Показать/скрыть > Линейки.
Добавление и удаление ячеек
Новые ячейки можно добавлять двумя основными способами. Первый способ заключается в использовании пункта меню Таблица > Вставить, как показано на рис. 11.7. Это подменю позволяет добавлять строки и столбцы относительно ячейки, в которой находится курсор. Например, курсор находится в верхней ячейке таблицы. Тогда выбор пункта «Строка сверху» добавит новую строку сверху текущей ячейки, которая, соответственно, переместится ниже.
Рис. 11.7. Добавление новых строк в таблицу
Второй способ состоит в использовании специальных маркеров, которые отображаются на верхней и левой стороне текущей ячейки (рис. 11.8).
Рис. 11.8. Добавление и удаление новых ячеек
Замечание
Если задана ширина или высота таблицы, то добавление новых колонок или строк не повлияет на размер таблицы, он останется прежним, зато уменьшатся размеры ячеек.
Кроме способа удаления строк и столбцов таблицы, показанного на рис. 11.8, можно воспользоваться пунктом меню Таблица > Удалить (рис. 11.9), где из подменю выбрать, что вы желаете удалить.
Рис. 11.9. Удаление строк таблицы
Объединение ячеек
Объединение ячеек требуется для создания таблиц со сложной структурой. Перед объединением вначале требуется выделить нужные ячейки. Для этого щелкните внутри ячейки и, удерживая нажатой кнопку мыши, проведите курсор мыши над нужными ячейками. Выделенные ячейки выделяются контуром, как показано на рис. 11.10.
Рис. 11.10. Выделенные ячейки таблицы
Теперь остается выбрать пункт меню Таблица > Объединить выбранные ячейки и таблица приобретает вид, как показано на рис. 11.11.
Рис. 11.11. Таблица с объединенными ячейками
Изменение свойств таблицы
В любой момент параметры таблицы можно изменить по своему желанию. Для этого выделите любую ячейку таблицы и нажмите на кнопку на панели инструментов. Откроется окно «Свойства таблицы», где надо выбрать вкладку «Таблица», как показано на рис. 11.12. Аналогично можно вызвать окно через пункт меню Таблица > Свойства таблицы...
Рис. 11.12. Свойства таблицы
С помощью окна «Свойства таблицы» можно указать новое количество строк и столбцов, ширину таблицы, толщину рамки и другие параметры.
Изменение свойств ячеек
Для изменения параметров нужных ячеек предварительно выделите их с помощью мыши. Причем не обязательно выделять ячейки расположенные рядом. Удерживая клавишу <Ctrl> и щелкая по нужным ячейкам, можно выделить таким способом любые ячейки таблицы. После чего нажмите на кнопку на панели инструментов Nvu и откроется окно, где можно изменять свойства выделенных или любых других ячеек (рис. 11.13).
Рис. 11.13. Свойства ячеек
Поддержите мой проект! Поделитесь ссылкой на понравившейся материал...