2. Объединение ячеек в таблице

Для объединения ячеек используются два атрибута:

rowspan = " " – объединение ячеек по рядам;

colspan = " " – объединение ячеек по столбцам;

Значения этих атрибутов, это числа – количество ячеек, которое нужно объединить. Минимальное значение в этих атрибутах равно 2, т.к. можно объединять как минимум 2 ячейки таблицы. Ранее объединенные ячейки в дальнейшем при построении таблицы не учитываются.

Нужно построить следующую таблицу:

1		5
2
3	4

Таблица состоит из 3 строк и 3 столбцов, следовательно, в программе Aptana Studio 3 прописываем следующую строчку table>tr*3>td*3 (Рис.13).

Нажимаем Ctrl+E. Получаем структуру таблицы (Рис.14).

Первая строка в таблице содержит две ячейки: первая – с текстом 1 и объединены две ячейки по столбцам, вторая – с текстом 5 и объединены 3 ячейки по рядам.

Прописываем в первой строке в первой ячейке атрибут colspan="2" и текст 1, во второй – атрибут rowspan="3", атрибут align="center", чтобы выровнять по центру текст 5, третью ячейку в первой строке удаляем (Рис.15).

Вторая строка содержит одну ячейку с текстом 2 и объединены две ячейки по столбцам.

Прописываем во второй строке в первой ячейке атрибут colspan="2" и текст 2. Две другие ячейки во второй строке удаляем (Рис.16).

Третья строка содержит 2 ячейки с текстом 3 и 4. Это обычные ячейки, в которых нет объединения. Поэтому в третьей строке в первой ячейке прописываем текст 3, во второй – текст 4. Третью ячейку в третьей строке удаляем (Рис.17).

Получилась таблица, у нее нет границ (Рис.18)

Требуется задать ширину и высоту в таблице. Прописываем в теге <table border="1" width="50%" height="50"> (Рис.19).

3. Заголовок таблицы

На практике названия таблиц пишутся в них самих или выше на странице. Но HTML имеет собственный тег для подписи таблиц: caption. Этот тег чаще всего стоит в таблице сверху и может выравниваться атрибутом align во всех направлениях.

<table>

<caption>Название таблицы</caption>

<tr align="center">

4. Расстояние между ячейками

Когда создается таблица, содержимое автоматически прикрепляется к краю ячейки и ячейки прикреплены непосредственно друг к другу. Эти расстояния регулируют два HTML-атрибута:

cellspacing – расстояние между ячейками;

cellpadding – расстояние от содержимого до краев ячейки.

Пустые ячейки отражаются по стандарту рамками без области содержания. Чтобы этого избежать, нужно вставить неразрывный пробел  

Цвет фона

Цвет фона таблицы, строк и ячеек задается с помощью атрибута bgcolor=" ".

5. CSS

CSS-Cascading Style Sheets (Каскадные таблицы стилей) – язык стилей, предназначенный для отображения HTML-документа. Синтаксис: сначала пишется команда потом, после двоеточия, значение, в конце ставится точкой с запятой:

Команда:Значение;

После одиночной или последней команды точка с запятой необязательна, но возможна. Если требуется прописать несколько команд подряд, то они обязательно должны отделяться друг от друга точкой с запятой.

Команда1:Значение; Команда2:Значение;

Есть три способа применить правила CSS к HTML-документу. Чаще используется способ с использованием внешней таблицы стилей.

Метод 1: Инлайн/In-line (атрибут style)

Можно применять CSS к HTML с помощью HTML-атрибута style. Размер шрифта абзаца можно установить с помощью атрибута style со значением команды font-size:1cm; (Рис.20):

Метод 2: Внутренний (тэг style)

Второй способ вставки CSS-кодов - HTML-тэг <style>. Например (Рис.21):

Метод 3: Внешний (ссылка на таблицу стилей)

Рекомендуемый метод - создание ссылки на так называемую внешнюю таблицу стилей. Документ таблицы стилей (внешняя таблица стилей) - это простой текстовый файл с расширением *.css., который содержит как минимум одно стилевое правило. Он не может содержать тегов HTML страниц сайта. Присутствие тегов в документе сайта может нарушить ход выполнения правил, игнорироваться полностью. Можно поместить таблицу стилей на web-сервер или на жёсткий диск, как и файлы сайта.

Комментарии в CSS выглядят следующим образом: /* Вот здесь между двумя чертами со звездочками находится комментарий.*/

Например, таблица стилей называется style.css и находится в папке с документом HTML, который требуется связать с данной таблицей стилей.

Чтобы создать ссылку из HTML-документа на таблицу стилей (style.css), необходимо вставить в разделе header HTML, то есть между тэгами <head> и </head> одну строчку HTML-кода:

<link rel="stylesheet" href="style/style.css"/>

Для этого после закрывающего тега </title> нажимаем Enter, вводим link (Рис.22).

Нажимаем Ctrl+E, в атрибуте href мигает курсор (Рис.23).

Вводим значение атрибута href – название файла внешней таблицы стилей. Начинаем набирать первую букву s, Aptana Studio 3 должна предложить выпадающий список с имеющимися файлами таблиц стилей (Рис.24).

Если программа этого не сделала, значит файл таблицы стилей не находится в одной папке с документом HTML, тогда следует указать папку, где лежит данная таблица стилей. Нажимаем клавишу Enter, значение атрибута добавится автоматически (Рис.25).

Несколько HTML-документов могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно использовать для управления отображением большого количества HTML-документов.

Тег <link> устанавливает связь с внешним документом вроде файла со стилями style.css или со шрифтами. В отличие от тега <a>, тег <link> размещается всегда внутри контейнера <head> и не создает ссылку. Закрывающий тег не требуется.

Атрибут rel — определяет отношение текущего документа как базового к документу определяемого ссылкой (rel="stylesheet" — ссылается на внешнюю таблицу стилей). В атрибуте href указывается URL документа таблицы стилей, в данном случае URL адреса относительный, значит файл style.css находится в корневом каталоге сайта.