Как сделать таблицу на веб странице. следует записать такое определение:Здесь h1 – это селектор, color – свойство, red – его значение

§ 3. Встраивание таблиц стилей в HTML-документ .

Сегодня наверное трудно представить себе веб-сайт без использования такой, весьма мощной технологии, как каскадные таблицы стилей. В этой статье мы поговорим с вами о том, каким образом подставляются стили в веб-страницу .

Различают три способа размещения стиля на странице:

• Подставляемые стили (in-line)
• Встраиваемые стили (embedded)
• Внешние таблицы стилей

Теперь давайте рассмотрим каждый способ по отдельности. Первый способ — это подставляемые таблицы стилей . Данный метод мы применяем для конкретного элемента страницы, например для горизонтальной линии (

---

). Пример:

---

Применив этот стиль, мы получим горизонтальную линию длинной 50 пикселей, высотой в 4 пикселя и, соответственно, цветом #ff8c00. Данный способ встраивания стиля целесообразно использовать, если необходимо изменить стиль написания текста, гарнитуру, цвет только в определенном месте страницы.

Следующий способ подстановки — это встраиваемый стиль . Данный способ более компактно добавляет таблицу стилей. Осуществляется путем добавления в заголовок html-страницы тегов , между которыми вы записываете нужные стили. Пример:

…

Как видно из примера, теги должны находиться между . Также желательно использовать атрибут type="text/css", т. к. это поможет некоторым браузерам распознать стиль, отсутствие этого атрибута может привести к полному игнорированию некоторыми браузерами данного участка кода. Кроме того, обычно необходимо помещать вокруг содержимого

…

Здесь нужно сделать замечание, что функция @import должна стоять перед любыми правилами. Преимуществом данного способа является возможность добавить на страницу сразу несколько таблиц стилей.

Перечисленные здесь способы встраивания таблиц стилей имеют свои плюсы и минусы. Это уж вам решать, каким образом следует прикрепить стиль к странице, какой способ будет более приемлемым для вас и для конкретной ситуации. Удачи.

Современные принципы создания HTML-документов подразумевают четкое разделение содержания документа от его вида (стилей форматирования). Это упрощает его редактирование, уменьшает объем загружаемой страницы, сокращает время создания документа, представление одного и того же документа с различными стилями. Отделение стилей форматирования от содержания осуществляется при помощи каскадных таблиц стилей (от англ. Cascading Style Sheets, сокращенно CSS). Здесь слово «каскадные» означает возможность использования набора таблиц стилей для представления одного документа. Браузер объединяет наборы таблиц по установленным правилам, в соответствии с заданными приоритетами и отображает документ в своем окне на основе полученных стилей.

Каскадные таблицы стилей представляют собой текстовый файл, в котором определены селекторы и их определения . В качестве селектора могут выступать теги языка HTML, классы, идентификаторы. Определение селектора задается внутри фигурных скобок парой: <свойство>: <значение>. Например, чтобы задать красный цвет шрифта для тегов

следует записать такое определение:

Здесь h1 – это селектор, color – свойство, red – его значение. Ниже будут более подробно рассмотрены различные селекторы и наборы свойств, с помощью которых можно манипулировать видом документа в окне браузера.

4.1. Встраивание CSS в HTML-документ

Каскадные таблицы стилей применяются к документу только в том случае, если они подключены к нему. Это можно сделать различными способами, которые могут комбинироваться в пределах одного документа. Распространенным вариантом является подключение таблиц в разделе head, записанных в текстовых файлах с расширением css:

При этом число подключаемых таблиц неограниченно. В данном примере подключается одна таблица из файла styles.css, находящаяся в каталоге css, т.е. общий путь доступа к этому файлу имеет вид: http://домен/css/styles.css.

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

Следующим вариантом является импортирование таблиц стилей в HTML-документ с помощью свойства

@import: url(URL на css-файл);

Данное свойство может быть записано внутри тега

Следует отметить, что использовать свойство @import следует крайне осторожно, т.к. в ряде случаев такой способ подключения может приводить к ошибочным ситуациям, например, при использовании JavaScript совместно с CSS может случиться, что документ будет загружен раньше, чем необходимая импортируемая таблица. В результате сценарий не сможет отработать так, как это задумывалось разработчиком. Без крайней необходимости рекомендуется вместо @import использовать подключение через тег в разделе (первый описанный вариант).

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

Следующим образом:

Синий цвет

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

HTML-таблицы упорядочивают и выводят на экран данные с помощью строк или столбцов. Таблицы состоят из ячеек, образующихся при пересечении строк и столбцов. Ячейки таблиц могут содержать любые HTML-элементы, такие как заголовки, списки, текст, изображения, элементы форм, а также другие таблицы. Каждой таблице можно добавить связанный с ней заголовок, расположив его перед таблицей или после неё.

Таблицы больше не используются для вёрстки веб-страниц и компоновки отдельных элементов, потому что такой приём не обеспечивает гибкость структуры и адаптивность сайта, существенно увеличивая HTML-разметку.

Для всех элементов таблицы доступны , а также собственные атрибуты.

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

• Содержание:

1. Как создать таблицу

Таблица создаётся при помощи парного тега

Рис.1. Внешний вид таблицы без форматирования css-свойствами

По умолчанию таблица и ячейки не имеют видимых границ. Границы задаются с помощью свойства border:

/* внешние границы таблицы серого цвета толщиной 1px */ table {border: 1px solid grey;} /* границы ячеек первого ряда таблицы */ th {border: 1px solid grey;} /* границы ячеек тела таблицы */ td {border: 1px solid grey;}

Промежутки между ячейками таблицы убираются с помощью свойства table {border-collapse: collapse;} .

Ширина таблицы по умолчанию равна ширине её внутреннего содержимого. Чтобы установить ширину, нужно задать значение для свойства width:

/* сделает ширину таблицы равной ширине блока контейнера, в котором она находится */ table {width: 100%;} /* задаст фиксированную ширину для таблицы */ table {width: 600px;}

Если для ячеек таблицы заданы внутренние отступы и границы, то ширина таблицы будет включать в себя следующие значения:
padding-left и padding-right , ширина border-left плюс ширина border-right последней ячейки в ряду. Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из ширины ячеек плюс ширина border-left и ширина border-right последней ячейки в ряду.

2. Как создать строки (ряды) таблицы

Строки или ряды таблицы создаются с помощью тега

. Количество горизонтальных строк таблицы определяется количеством парных тегов .

3. Как сделать ячейку заголовка столбца таблицы

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

4. Как сделать ячейку тела таблицы

создаёт ячейки таблицы, внутрь которых помещаются данные таблицы. Парные теги , расположенные в одном ряду, определяют количество ячеек в строке таблицы. Количество пар ячеек должно быть равно количеству пар ячеек . Для элемента доступны атрибуты colspan , rowspan , headers .

5. Как добавить подпись (заголовок) к таблице

Создает подпись таблицы. Добавляется непосредственно после тега

6. Группирование строк и столбцов таблицы

Создает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки. Добавляется непосредственно после тегов Рис. 2. Выделение столбцов таблицы другим цветом с использованием тегов и

7. Группировка разделов таблицы

Элемент создает группу заголовков для строк таблицы с целью задания единого оформления. Используется в сочетании с элементами

и для указания каждой части таблицы.

Элемент должен быть использован в следующем порядке: как дочерний элемент

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

Создает группу строк для представления информации о суммах или итогах, расположенную в нижней части таблицы. Используется в таблице один раз. Располагается после тега, перед тегами

и .

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

8. Как объединить ячейки таблицы

Атрибуты colspan и rowspan объединяют ячейки таблицы. Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали.


Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan

9. Атрибуты элементов таблицы

Таблица 1. Атрибуты элементов таблицы

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

Атрибут	Описание, принимаемое значение
colspan	Количество ячеек в строке для объединения по горизонтали.
headers	Задает список ячеек заголовка, содержащих информацию о заголовке текущей ячейки данных. Предназначен для речевых браузеров.	...	...
rowspan	Количество ячеек в столбце для объединения по вертикали.	Возможные значения: число от 1 до 999.
span	Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1.

10. Пример создания таблицы


Рис. 4. Создание меню ресторана с помощью HTML-таблицы

Разметка HTML

Меню ресторана "Ромашка"

Кухня	Холодные блюда		Горячие блюда		Десерты
	Салаты	Закуски	Первые блюда	Вторые блюда
Русская	Винегрет	Язык с хреном	Щи с квашеной капустой	Вареники с картошкой	Печеные яблоки с медом
	Оливье	Студень говяжий	Рассольник домашний	Караси запеченые в сметане	Блинчатый пирог
	Сельдь под "шубой"	Судак заливной	Мясная солянка	Котлеты "Пожарские"	Пирожное "Картошка"
Испанская	Севиче из гребешков	Эмпанадас	Хлебный суп с чесноком	Паэлья с морепродуктами	Чуррос
	Тимбал из авокадо и тунца	Ахотомате	Астурийская фабада	Свиное раксо	Альмойшавена
	Фасоль с ветчиной	Чанфайна	Рыбный суп с манными клецками	Тортилья картофельная	Бунуэлос
Французская	Вогезский салат	Рийет из курицы	Баклажанный крем-суп "Ренуар"	Картофель огратен	Бриоши
	Салат "Панзанелла"	Делисьез из сыра	Французский тыквенный суп	Гратин из птицы	Лигурийский лимонный пирог
	Тар-тар	Маринованный лосось	Суп "Конти"	Тартифлетт	Саварен "Триумф"

По мере увеличения количества документов, расположенных на вашем сервере WWW, вам будет все труднее и труднее заниматься его сопровождением. Особенно это касается оформления документов HTML. Представьте себе, что вам нужно, например, изменить оформление заголовков первого уровня во всех документах, а также изменить шрифтовое оформление текста, вставленного в документ при помощи оператора

Ручная обработка множества документов HTML с целью приведения их внешнего вида к некоторому стандарту может отнять немало времени.

Аналогичная проблема возникает и при подготовки обычных текстовых документов. Например, при создании документа вы указали для обычных параграфов абзацный отступ и шрифт, а также оформили определенным образом заголовки. Далее у вас может возникнуть необходимость изменения параметров оформления, например, величины того же абзацного отступа. В простейших текстовых редакторах для внесения необходимых изменений вам придется вручную обработать каждый параграф текста.

Для упрощения оформления документов современные текстовые процессоры, такие, например, как Microsoft Word, используют оформление по образцу. Образцы содержат в себе описания параметров оформления и называются стилями. Например, в стиле может быть указано, что заголовок второго уровня отображается красным цветом и должен быть отцентрирован.

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

Вернемся к проблеме оформления большого количества документов HTML. Для решения этой проблемы вы можете использовать так называемые каскадные таблицы стилей Cascading Style Sheets (CSS), разработанные консорциумом World Wide Web Consortium (W3C).

Полное описание текущей редакции каскадных таблиц стилей вы можете найти на сервере консорциума W3C по адресу http://www.w3.org/pub/WWW/TR/WD-css1.html. Кроме того, мы рекомендуем вам обязательно познакомиться с описанием таблиц стилей A User"s Guide to Style Sheets, расположенном на сервере http://www.microsoft.com. Мы же расскажем вам только о самых важных возможностях таблиц стилей, реализованных в навигаторе Microsoft Internet Explorer версии 3.0.

Что же касается навигатора Netscape Navigator версии 3.0, то он не работает со стилями. Однако в ближайшем будущем фирма Netscape планирует добавить такую возможность в свой навигатор.

Способы использования стилей

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

Общие таблицы стилей для нескольких документов HTML

Наиболее интересное применение таблиц стилей - это их использование для оформления многих, возможно, даже всех документов HTML, расположенных на вашем сервере. При этом выполняется подключение (linking) файлов таблиц стилей к документам HTML. Имя файла таблицы стилей должно иметь вид *.css.

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

Заметим, что общие таблицы стилей могут использоваться одновременно не только на одном, но и на нескольких серверах WWW, так как можно подключать файлы таблиц стилей, указывая их стандартный адрес URL. Это позволяет централизованно создавать и изменять корпоративные таблицы стилей.

Встраивание таблиц стилей в документы HTML

Если отдельные документы HTML должны быть оформлены особым образом, отличным от того, что задано в общих таблицах стилей, вы можете встроить таблицы стилей непосредственно в текст документа HTML. Такие таблицы называются встроенными (embedded) таблицами стилей.

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

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

Встраивание стилей в операторы HTML

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

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

Создание файлов таблиц стилей

Как мы уже говорили, файлы таблиц стилей содержат определения стилей, которые могут быть использованы для оформления многих документов HTML, расположенных на одном или нескольких серверах WWW.

Внешний вид файла таблицы стилей лучше изучать на конкретном примере (листинг 2.17).

Листинг 2.17. Файл chap2\styles\styles.css

H1 { font-size: 24; font-weigt: bold; color: red; margin-left: 10% } H2 { font-size: 20; font-weigt: bold; color: black; font-family: Courier } P.italic { font-style: italic } P.red { color: red }

Здесь мы определили стили H1, H2, P.italic и P.red.

Определение стиля начинается с имени класса (например, H1), вслед за которым в фигурных скобках перечисляются параметры стиля. Для стиля с классом H1 мы указали размер шрифта, равный 24 пунктам, задали утолщение, красный цвет и отступ с левой стороны на 10 процентов от ширины экрана.

Отдельные параметры стилевого оформления задаются своими именами, после которых через символ двоеточия следует значение параметра. Параметры отделяются символом точка с запятой.

Ссылка на файл таблицы стилей

Для того чтобы документ HTML был оформлен с использованием файла таблицы стилей, в разделе заголовка документа необходимо разместить оператор . Пример ссылки на файл таблицы стилей вы можете найти в листинге 2.18.

Листинг 2.18. Файл chap2\styles\cssdemo.htm

Заголовок первого уровня

Обычный текст

Заголовок второго уровня

Наклонный текст

Текст красного цвета

Параметры оператора необходимо задавать, как указано в этом примере. В параметре HREF должен быть указан адрес URL файла таблицы стилей. Этот файл может находиться на любом сервере WWW, а не только на том, где размещен данный документ HTML.

Как пользоваться стилями из файла таблицы стилей?

Очень просто.

Если в файле определены параметры для операторов языка HTML, предназначенных для оформления текста (например, для операторов

или

, как в нашем примере), вы просто указываете эти операторы без изменений:

Заголовок первого уровня

Обычный текст

Заголовок второго уровня

Однако при определении стиля вы можете не только переопределить параметры форматирования операторов, но и создать новые классы для этих операторов. Например, ниже определены классы italic и red для оператора P.italic { font-style: italic } P.red { color: red }

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

(или другого оператора форматирования текста), как это показано ниже:

Наклонный текст

Текст красного цвета

Внешний вид документа, оформленного с использованием нашего файла таблицы стилей, показан на рис. 2.18.

Рис. 2.18. Внешний вид документа, оформленного с использованием файла таблицы стилей

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

Заголовок второго уровня изображен с использованием шрифта с фиксированной шириной символов, так как в соответствующем стиле было указано семейство шрифтов Courier.

Последние два параграфа документа отображаются, соответственно, с наклоном и с выделением красным цветом.

Стили в документе HTML

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

В листинге 2.19 мы привели пример документа HTML, в который встроена таблица стилей.

Листинг 2.19. Файл chap2\styles\embed.htm

Заголовок первого уровня

Обычный текст

Заголовок второго уровня

Наклонный текст

Текст красного цвета

Внешний вид этого документа при просмотре в навигаторе Microsoft Internet Explorer аналогичен показанному на рис. 2.18. Навигатор Netscape Navigator, как и в предыдущем случае, игнорирует стилевое оформление.

Обратите внимание на использование оператора комментария . Когда документ просматривается навигатором, не распознающем стилевое оформление, то такой навигатор проигнорирует как оператор ), помещенного в разделе HEAD документа. При создании встроенных таблиц стилей нужно указывать значение атрибута type элемента STYLE, также можно задать значение атрибута media. Назначение этих атрибутов в этом случае совпадает с назначением одноименных атрибутов HTML?элемента LINK.

Кроме подключения внешних таблиц стилей, ссылаясь на них при помощи элемента LINK, можно подключать внешние таблицы стилей и из самих таблиц стилей. Это позволяет существенно сократить объем таблиц стилей, если в них предполагается наличие одинаковых фрагментов. Подключение внешней таблицы выполняется при помощи ключевого слова @import. Правило CSS в таком случае имеет следующий формат:

@import url(«URI внешней таблицы стилей»);

Пример подключения внешней CSS может выглядеть так:

P {font-size: 16pt}

@import url("external_stylesheer.css"); /*подключение таблицы стилей*/

В примерах данной главы используются встроенные таблицы стилей. Однако имейте в виду, что это сделано только потому, что, во?первых, примеры небольшие и создавать для них два файла просто нерационально, а во?вторых, такие примеры проще помещать в книгу и они так лучше воспринимаются. На практике удобнее использовать внешние таблицы стилей. Тогда не придется при изменении стиля одного элемента заново выкладывать на сервере все содержимое документа: достаточно обновить файл с измененной таблицей стилей.