. Вообще-то, чем меньше HTML-кода тем лучше, и все эти теги вам не нужны: вполне можно обойтись только тегами
,
и
(и в большинстве случаев также тегом
). Но различные табличные теги предоставляют множество полезных зацепок для привязки к ним CSS-стилей. За- головок для каждого из столбцов таблицы, задаваемый в теге
, может иметь различный вид в разных ячейках таблицы, если вы будете использовать при соз- дании стиля тег
, а тег
можно применять в качестве простого средства установки ширины столбца таблицы. Это избавит вас от нудной работы по созда- нию множества различных классов, таких как .tableHeader , а также от необходимо- сти вручную задавать их для каждой ячейки таблицы. В следующем разделе вы познакомитесь с примерами использования различных тегов и ощутите все их пре- имущества. ПРИМЕЧАНИЕ Для получения более подробной информации о создании таблиц с помощью HTML посетите стра- ницу www.456bereastreet.com/archive/200410/bring_on_the_tables/.
Глава 11. Форматирование таблиц и форм 389 Рис. 11.1. Благодаря CSS в этой таблице, содержащей информацию о домашних газонокосилках, шрифты изменяются на более привлекательные, создаются границы и меняются фоновые цвета, но вся лежащая в основе структура создана с помощью HTML Рис. 11.2. Заголовок Price говорит, что вы найдете стоимость каждой из газонокосилок в ячейках снизу. Реальные данные хранятся в таблице в тегах
390 Часть 2. Применение CSS Создание стилей для таблиц Вы можете использовать многие свойства CSS, о которых уже прочитали, чтобы добавить привлекательность таблицам и их содержимому. Свойство color , напри- мер, устанавливает цвет текста в таблице, так же как и везде. Тем не менее вы об- наружите некоторые свойства, которые особо полезны при использовании их в та- блицах, а также свойства, предназначенные исключительно для их форматирования. Тот факт, что таблица состоит из нескольких HTML-тегов, помогает определить, к какому из них применить соответствующее свойство CSS. Применение отступов в теге
никак не влияет на отображение. В следующих нескольких разделах рассматриваются свойства CSS, используемые для форматирования таблиц, а так- же теги HTML, к которым они применяются. Добавление отступов Как вы прочитали в разделе. «Управление размерами полей и отступов» гл. 7, от- ступ — это расстояние между границей элемента и его содержимым. Вы можете при- менять отступы, чтобы обеспечить немного свободного места между краями абзацев с текстом и их границами. Когда речь идет о таблицах, границы — это края ячейки и при использовании отступов добавляется свободное место вокруг содержимого этой ячейки таблицы (см. рис. 11.2). Это работает так же, как и старый атрибут cellpadding тега
, с той лишь разницей, что вы можете задать отступы от каждой из четырех границ ячейки. Отступы применяются либо к заголовкам таблицы, либо к ее ячейкам, но никак не к самому тегу
. Итак, чтобы указать отступ размером 10 пикселов для всех ячеек таблицы, следует воспользоваться таким стилем: td, th { padding: 10px; } Вы можете также контролировать отступы от каждой из четырех границ ячейки. Чтобы добавить 10 пикселов места сверху для каждой ячейки с данными в таблице, 3 пиксела снизу и по 5 пикселов слева и справа, создайте такой стиль: td { padding-top: 10px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; } Или используйте сокращенную версию свойства padding : td { padding: 10px 5px 3px 5px; } СОВЕТ Если вы с помощью тега поместите в ячейку изображение и заметите, что внизу таблицы появится нежелательное свободное место, то установите block в качестве значения свойства display (см. подраздел «Отображение линейных и блочных элементов» раздела «Управление размерами по- лей и отступов» гл. 7). Чтобы получить больше информации, посетите страницу http://developer.mo- zilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps.
Глава 11. Форматирование таблиц и форм 391 Настройка горизонтального и вертикального выравнивания Чтобы настроить месторасположение содержимого внутри самой ячейки, исполь- зуйте свойства text-align и vertical-align . Первое свойство применяется для управления горизонтальным выравниванием и может принимать значения left , right , center и justify (рис. 11.3). Это унаследованное свойство. Если вы хотите выровнять содержимое всех ячеек таблицы по правому краю, создайте следующий стиль: table { text-align: right; } Рис. 11.3. В CSS при необходимости изменений в таблице вам придется внести их только во внешний файл с таблицами стилей, а не в 10 000 отдельных тегов
Это свойство удобно использовать в тегах
, так как браузеры обычно вы- равнивают его по центру. Простой стиль вида th { text-align: left; } выровняет и заголовки таблицы. Свойство CSS text-align по отношению к ячейкам таблицы работает так же, как и атрибут align тега >. Но использования HTML-атрибута align следует избе- гать, поскольку в HTML5 он не работает, а CSS позволяет хранить информацию о стилях во внешней таблице стилей. В этом случае, если вы решите изменить выравнивание по правому краю на выравнивание по левому краю, вам придется внести изменения только во внешний файл с таблицами стилей. У ячеек в таблицах есть также такой параметр, как высота. Обычно браузеры выравнивают содержимое вертикально по центру ячейки (см. пример middle на рис. 11.4). Вы можете изменить это с помощью свойства vertical-align . Примени- те одно из этих четырех значений: top , baseline , middle или bottom . Значение top помещает содержимое ячейки вверху, middle — по центру, а bottom — внизу. При ис- пользовании значения baseline выравнивание происходит так же, как и при исполь- зовании значения top , за исключением того, что браузер выравнивает первую стро- ку текста в каждой ячейке заданной строки таблицы (см. рис. 11.4). Скорее всего, вы даже не заметите тонкостей работы параметра baseline . В отличие от text-align свойство vertical-align не унаследовано, поэтому вы можете задействовать его только в стилях, которые применяются прямо в тегах
и
392 Часть 2. Применение CSS Рис. 11.4. Свойство CSS vertical-align — эквивалент ныне устаревшего атрибута align тега
. Когда в ячейке используются отступы, ее содержимое на самом деле никогда не выравнивается по верхним или нижним линиям границы: всегда есть промежуток, равный размеру отступа СОВЕТ Итак, изученное форматирование таблиц применяется сразу ко всем вашим таблицам. Когда же вы хотите применить для каждой таблицы индивидуальный стиль (или для каждой ее ячейки), изме- ните выбранный селектор. Чтобы использовать особый дизайн в определенной таблице, задайте для нее имя класса —
— и создайте несколько селекторов потомков вида .stocks td или .stocks th, чтобы применить различное форматирование к каждой ячейке. Если вы хотите изменить форматирование определенной ячейки в таблице, используйте в теге класс
> и создайте класс со стилем для форматирования этой ячейки. Создание границ Свойство CSS border (см. раздел «Добавление границ» гл. 7) работает с таблицами так же хорошо, как и с другими элементами, но вам нужно кое-что помнить. Во- первых, применение границ в стиле, который занимается форматированием тега
, выделяет только таблицу, а не какую-либо определенную ее ячейку. Во- вторых, при использовании границ в ячейках ( td { border: 1px solid black; } ) образуется видимый интервал между ячейками сверху, как это показано на рис. 11.5. Чтобы правильно управлять границами, вам необходимо понять принцип отрисов- ки ячеек таблицы веб-браузерами и разобраться с CSS-свойством border-collapse Управление промежутком между ячейками таблицы. Если не указано другое, браузеры расставляют в таблице интервалы между ячейками около 2 пикселов. Этот промежуток действительно заметен, когда вы задаете границы для ячеек.
Глава 11. Форматирование таблиц и форм 393 В CSS доступно свойство border-spacing , которое можно использовать, чтобы кон- тролировать размер этого промежутка. Это свойство нужно применять к самой таблице, а если требуется удалить постое пространство, обычно добавляемое брау- зером между ячейками, установите для свойства border-spacing значение 0: table { border-spacing: 0; } Но если вы предпочитаете иметь пустое пространство между ячейками, то его можно добавить: table { border-spacing: 2px; }. Удаление двойных границ. Даже если вы уберете промежутки между ячейками, границы, заданные для ячеек, будут удваиваться. Это происходит потому, что нижняя граница одной ячейки добавляется к верхней границе лежащей внизу ячейки, и в ито- ге образуется линия, которая в два раза толще заданной ширины границы (см. рис. 11.5, посередине). Лучший способ избавиться от этого (а также от промежутков между ячей- ками) — использовать свойство border-collapse . Оно может принимать два значения — separate и collapse . Значение separate эквивалентно тому, как обычно и отображаются таблицы: с промежутками между ячейками и двойными границами. Задавая окаймле- ние границ таблицы, можно избавиться от интервалов и двойных границ (см. рис. 11.5, внизу). Используйте значение collapse в стилях для форматирования таблиц: table { border-collapse: collapse; } ПРИМЕЧАНИЕ Если установить для свойства border-collapse значение collapse, свойство border-spacing работать не будет. Скругленные углы. Чтобы добавить к ячейкам таблиц (но не к самим таблицам) скругленные углы, можно воспользоваться свойством border-radius . Например, если нужно добавить ячейкам таблицы контуры и скругленные углы, можно создать следующий стиль: td { border: 1px solid black; border-radius: 5px; } Учтите, что при установке для свойства border-collapse значения collapse брау- зеры проигнорируют установку для ячеек таблицы свойства border-radius и про- сто нарисуют обычные прямые углы. ПРИМЕЧАНИЕ Таблицам и ячейкам можно даже назначать свойство box-shadow. Если применить это свойство к таб- лице, тень появится за пределами всей таблицы, а если его задавать отдельным ячейкам, то соб- ственная отбрасываемая тень будет у каждой ячейки.
394 Часть 2. Применение CSS Рис. 11.5. Браузеры обычно вставляют пробелы между всеми ячейками в таблице Применение стилей к строкам и столбцам Добавление чередования затемненных и незатемненных строк в таблицу, как на рис. 11.6, — это всего лишь один из обычных способов оформления таблицы. Из- менив внешний вид каждой строки в таблице, вы позволите посетителям четко видеть нужные им данные. К счастью, CSS предлагает способ, позволяющий это сделать. Используя ранее рассмотренный селектор nth-of-type , можно добавить четным и нечетным строкам разный фон: tr:nth-of-type(odd) { background-color: red; } tr:nth-of-type(even) { background-color: blue; } Если не нужно применять один и тот же фон к чередующимся строкам всех таблиц, следует просто добавить к целевой таблице имя класса (например, products для таблицы с информацией о товарах), а затем воспользоваться селектором по- томка: .products tr:nth-of-type(odd) { background-color: red; } .products tr:nth-of-type(even) { background-color: blue; } Вы также не ограничены цветами. Можно использовать фоновые изображения (см. раздел «Добавление фоновых изображений» гл. 8) или даже линейные гради- енты (см. раздел «Линейные градиенты» гл. 8) для создания более привлекатель- ного вида, например легкого затемнения строки таблицы с заголовками, как на
Глава 11. Форматирование таблиц и форм 395 рис. 11.6 (вы увидите похожий пример в обучающем уроке 1 этой главы). Вы мо- жете также использовать селектор для каждой ячейки в этой строке. Это очень удобно, когда вы применяете стили ко всем ячейкам в одном столбце, применяя для каждой определенный стиль и вид, например
Рис. 11.6. Благодаря чередующемуся изменению фонового цвета строк намного проще следить за всеми данными из строки ПРИМЕЧАНИЕ Селектор nth-of-type в Internet Explorer 8 и более ранних версиях не поддерживается. В процессе форматирования столбцов нужно немного схитрить. В HTML есть теги
и
, указывающие на группу столбцов и на один отдельный столбец соответственно. Вы можете добавить по одному тегу
для каждого столбца в таблице и далее идентифицировать их с помощью класса или ID. Для этих тегов есть только два вида свойств: width и свойства фона ( background- color , background-image и т. д.). Однако и они могут быть очень полезными. Когда вы хотите установить ширину всех строк в столбце, можете пропустить все атри- буты HTML и просто применить к столбцам стиль, используя стиль, назначенный тегу
. Скажем, у вас есть следующий кусок кода HTML:
Вы можете добавить этот стиль к таблице стилей и установить ширину каждой ячейки в данном столбце равной 200 пикселам: .price { width: 200px; }
396 Часть 2. Применение CSS Чтобы выделить столбец, вы можете воспользоваться свойствами фона. И сно- ва считайте, что у вас есть тег
, к которому применен класс price : .price { background-color: #F33; } Имейте в виду, что фон в столбцах помещается под ячейками, поэтому, если вы установите фоновый цвет или рисунок в тегах
или
, фон столбцов не будет виден. Создание стилей для форм Веб-формы — это основной способ общения пользователя с сайтом. Передав инфор- мацию в форму, вы можете подписаться на новости, поискать какие-либо товары в базе данных, ввести изменения в профиль на “Фейсбуке” или заказать набор кон- структоров «Звездные войны», о котором уже давно мечтали. Совсем не обязатель- но, чтобы ваши формы имели такой же вид, как и большинство других форм в Интер- нете. Применяя CSS, вы можете создать стили для полей ввода, чтобы они выглядели так же, как и другие элементы сайта: использовали те же шрифты, фоновые изображе- ния и поля. Нет никаких отдельных CSS-свойств для форм, но вы можете применять практически любое из описанных в этой книге свойств и для элемента типа «форма». Результаты тем не менее могут быть различными (рис. 11.7). Internet Explorer 9 (см. рис. 11.7, вверху) не поддерживает скругленные углы или тени текстовой области (Text area) (см. текстовую область на панели Borders (Грани- цы) справа). Он также не понимает линейный градиент, примененный к кнопке Submit (Отправить) на средней панели Backgrounds (Фон). Различия между Chrome (второй сверху), Firefox (второй снизу) и Safari (внизу) не столь заметны, но между ними все же есть несколько визуальных несоответствий. Лучше всего тщательно прорабаты- вать свои формы и не ожидать их одинакового внешнего вида в каждом браузере. В следующем разделе будут рассмотрены свойства, которые лучше всего рабо- тают с тегами формы, а также перечислены браузеры, которые правильно интер- претируют эти свойства. ИНФОРМАЦИЯ ДЛЯ НОВИЧКОВ Придерживайтесь одного и того же стиля при оформлении форм Даже если бы поддержка форм, оформленных с исполь зованием CSS, не варьировалась от браузера к браузеру (см. рис. 11.7), есть еще несколько причин, по которым надо с осторожностью подходить к изменению привыч ных и узнаваемых элементов интерфейса, таких как кнопки Submit (Отправить) или раскрывающиеся спи ски. Большинство пользователей уже привыкли к тому, как выглядят и работают формы. В целом внешний вид кнопки Submit (Отправить) остается таким же от сайта к сайту. Когда люди видят ее, они уже знают, для чего предназначена эта кнопка и как ею пользоваться. Если вы слишком сильно измените внешний вид формы, это может привести к тому, что у пользователей возникнут некоторые затруднения при ее заполнении. Добавив точечную границу к какомулибо полю в фор ме, вы можете добиться того, что пользователь про сто не будет обращать на него внимания и будет его пропускать (см. примеры на рис. 11.7, второй снизу справа и внизу справа ). Если это текстовое поле пред назначено для ввода адреса электронной почты, на который вы будете отправлять новости, можно в ито ге потерять несколько пользователей изза того, что они его просто пропустили. И напоследок — удо стоверьтесь, что пользователи понимают, что перед ними размещена именно форма для ввода данных, а не чтолибо иное.
398 Часть 2. Применение CSS Элементы HTML-форм Большой выбор HTML-тегов позволяет вам создавать формы. Некоторые из них форматировать проще (например, текстовые поля), некоторые — сложнее (переключатели). Рассмотрим несколько простых тегов для форм, а также типы свойств, с которыми они работают. Fieldset. Тег
Скачать 20.28 Mb.