Стиль таблицы css: Красивое оформление таблиц

Содержание

Фиксированый стиль таблицы или Fixed Table Layouts / Хабр

Сей опус это вольный перевод публикации Криса Койлера [Chris Coyier] от 2 Июля.
В качестве вступления

Как вы наверняка знаете, CSS свойство table-layout предназначено для управления режимом формирования ширины столбцов в таблице. Оно может принимать следующие значения: авто, фиксировано или наследственно. По умолчанию в браузерах для отображения таблицы используется стандартное поведение: браузер рассчитывает ширину строки как сумму ширины всех ячеек. Следом, по тому же принципу рассчитывает ширину 2-й строки, и если размеры какой-либо ячейки превышают размеры вышестоящей ячейки, перестраивает всю таблицу. Далее определяет ширину 3-й ячейки, 4-й и т.д. В случае если таблица имеет много, очень много рядов, расчет ширины может немного затянуться…

Однако можно (я бы даже сказал нужно) задействовать упрощенный режим который выражается в том, что браузер при определении ширины не берет в расчет содержимое последующих ячеек, а опирается на значение свойств width таблицы, столбцов и ячеек из первой строки.
CSS

В CSS (таблицы каскадных стилей) с помощью свойства table-layout мы можем управлять какой режим формирования таблицы нам нужен. Речь идет собственно об этом:
table { table-layout: fixed; }

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

Режим table-layout: fixed

Если теперь задействовать режим table-layout: fixed то можно уверенно получить вполне себе предсказуемый результат по месту.
В случае применения этого режима, расчет ширины столбцов идет по первой строчке и все последующие используют это значение. Может и звучит странновато для понимания, но на самом деле все просто, приведем пример:

Применение

Крис озадачился этим вопросом, так как ему хотелось. что бы его «Pen»ы (в переводе еще смешнея звучит) в лист вью на CodePen отображались в столбиках с унифицированой шириной и не портили ему всю картину, вот что у него получилось:

Он остался очень доволен этим.

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

Посмотрите на этот практический пример (предполагаю, что почти всем понравится это):



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

Скорость

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

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

Надеюсь, этот перевод кому-то действительно поможет лучше понять, как работает table-layout: fixed и подбросит идей по его использованию в своих проектах.

Кстати, у кого нибудь есть идеи, почему это свойство не используется по умолчанию?

CSS Стиль таблицы. Уроки для начинающих. W3Schools на русском


Отступы в таблице - padding

Чтобы контролировать расстояние между границей и содержимым таблицы, используйте свойство padding на элементах <td> и <th>:


Горизонтальные разделители

Имя Фамилия Доходы
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Добавьте свойство border-bottom к <th> и <td> для горизонтальных разделителей:


Выделение строк таблицы при наведении

Используйте селектор :hover на <tr>, чтобы выделить строки таблицы при наведении курсора:

Имя Фамилия Доходы
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Полосатая таблица

Имя Фамилия Доходы
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Для таблиц с полосками зебры используйте селектор nth-child() и добавьте background-color (цвет фона) ко всем чётным (или нечётным) строкам таблицы:


Цвет таблицы

В приведенном ниже примере указаны цвет фона и цвет текста для элементов <th>:

Имя Фамилия Доходы
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Магия CSS. Глава 3. Таблицы. table-layout | by Workafrolic (±∞)

table-layout

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

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

Этот процесс поистине волшебный!

Сложный алгоритм раскладки используется для расчета как горизонтальных, так и вертикальных размеров. И эта вилка алгоритмов основывается на table-layout, который вы указываете. У этого свойства есть два варианта:

autoзначение по умолчанию. Я пытаюсь задать размеры столбцов относительно друг друга и ориентируясь на самую широкую ячейку в каждом столбце если вы не задали конкретные величины, которые определяют отношения элементов. (CSS spec)

fixed — Я пытаюсь сделать столбцы равными, если вы не дали мне конкретную ширину в

px. Если да, то я использую ее для соблюдения соотношения размеров. (CSS spec)

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

Пример 1: Нет ширины

table-layout: auto

table-layout: fixed

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

Пример 2: Ширина в процентах

Теперь давайте посмотрим на тот же пример с шириной столбцов 20% и 50% соответственно.

В обоих случаях заданная нами ширина принимается во внимание, но размеры колонок не точные, а относительные. Это утверждение всегда верно в отношении случаев со значение auto, но лишь частично верно в случаях со значением fixed, поскольку размеры заданы в процентах. Браузер как бы говорит “20% это 2/7 части из общего выражения 20+50%”, поэтому при ширине таблицы в 1000px первая колонка будет иметь ширину 284px, а вторая — 714px. Грубое соотношение 2:5. (Соотношение не может быть точно 2 к 5 из-за свойств

cell-spacing, cell-padding, border, border-spacing, border-collapse, округления и других ограничений.)

Обратите внимание на то, что white-space: nowrap применяется к каждой ячейке. В таблице с auto это свойство компенсируется, но в случае с fixed текст выходит за границы.

Задачка на подумать: почему первая колонка чуть шире в случае с fixed?

Пример 3: Смешанные ширины

Теперь рассмотрим тот же пример, но с ширинами колонок 400px и 70% соответственно.

table-layout: auto

table-layout: fixed

Ok…. Поскольку ширина таблиц всего 694px, у браузера нет возможности нарисовать колонки 400px и 70% × 694px в таблице с такой шириной. Поэтому он делает все, что в его силах.

В случае с auto, заданные нами значения ширины принимаются во внимание, но только примерно. Рассчет следующий: 400px / 694px к 70% × 694px . И браузер старается его соблюсти. (Поведение варьируется от браузера к браузеру.)

В случае с fixed, ширина колонки в 400px сохраняется, поскольку фиксированные значения имеют приоритет над процентными. Второй столбец получает остаток ширины.

Табличные данные

Я не буду подробно останавливаться на этой теме, поскольку в первую очередь это курс по CSS. Но основной причиной использования таблиц в верстке являются табличные данные. Табличными (tabular) данные считаются, если вы можете представить их в таблице (spreadsheet). (Прим. переводчика: без уточнения английских слов, имеющих одинаковое значение в русском языке, в предложении возникает тавтология.) Контентная матрица.

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

  • Большие таблицы должны быть раскрашены в полоску или при наведении на строку (:hover) у нее должен появляться цветной фон. Это нужно чтобы видеть все ячейки в одной строке.
  • Столбцы с числовыми данными должны иметь выравнивание по правому краю так, чтобы цифры находились друг под другом.
  • Текст в крайнем правом столбце должен иметь правую выключку, чтобы избежать рваного края (вполне подойдет text-align: justify).
  • Если это возможно, высота строк должна быть одинаковой, чтобы облегчить вертикальный просмотр. (Этот общий принцип известен как “вертикальный ритм” и он очень важен.)

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

Таблицы как инструмент раскладки

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

Если вы поддерживаете браузеры IE10 и выше, то используйте flex. Phillip Walton написал чудесный учебный материал по вертикальному выравниванию при помощи flexbox.

Подводные камни

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

Камень 1: Ячейки таблицы не считаются с overflow (table-layout: auto; Firefox, IE)

Это означает, что даже если вы используете table-layout: fixed вместе с шириной в пикселях, overflow: hidden не сработает для ячеек таблицы в любых браузерах. (Если вы используете table-layout: auto, в любых браузерах переполнения не будет.)

table-layout: auto

Камень 2: Ячейки таблицы не уважают относительное позиционирование (Firefox)

Ага. Вы правильно прочитали. Вы пытаетесь применить position: relative к ячейке таблицы, position: absolute к элементам внутри нее и в Firefox абсолютно спозиционированный элемент будет высчитывать свое положение относительно элемента-родителя таблицы с position: relative. Облом.

Баг был обнаружен в 2000.

Прим. переводчика: Есть более свежая информация

на этот счет.

Многабукав про камни

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

Внеклассное чтение

Цитирование

  1. Can I use: flex
  2. Solved by Flexbox: Vertical Centering
  3. Seybold Seminars: Why tables for layout is stupid
  4. Smashing Magazine: Table Layouts vs. Div Layouts: From Hell to… Hell?
  5. Vaneso Design: Are CSS Tables Better Than HTML Tables?
  6. Mozilla Bugzilla: relative positioning of table cells doesn’t work

Что такое каскадные таблицы стилей CSS?

CSS – это англ. аббревиатура, которая расшифровывается как Cascading Style Sheets (каскадные таблицы стилей).

Основная задача стилей CSS – это управление внешним видом (стилями) элементов на веб-странице.

Что понимается под стилями или оформлением веб-страницы?

+ Цвета

+ Шрифты

+ Размеры

+ Позиции элементов

+ И какие-то дополнительные специфичные настройки элементов.

В общем, все, что касается оформления и внешнего вида элементов на веб-странице, за это отвечает CSS.

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

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

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

Задумка в том, чтобы содержание документа и его оформление хранились отдельно.

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

Технология CSS тесно взаимодействует с HTML и особым образом подключается к веб-странице. О способах подключению поговорим позже.

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

Итак, страница с подключенными стилями CSS:

Та же страница, но стили CSS уже отключены:

Как видите, без стилей CSS вид страницы меняется кардинально.

Теперь давайте разберемся с понятием «каскадные», что обозначает это слово в определении?

Слово «каскадные» означает - многоуровневые. Это означает, что одному и тому же элементу на странице, может быть присвоено сразу несколько стилей из разных источников. Какой стиль в конечном итоге будет применен к элементу, решают правила приоритета.

И еще одно слово в аббревиатуре – это «таблица»?

Это значит, что CSS, по сути, представляет собой набор стилей и их значений, которые можно свести в таблицу.

Надеюсь, что общее представление о том, что такое CSS у вас теперь появилось. В любом случае, двигайтесь дальше, и многое встанет на свои места.

Каскадные таблицы стилей (преимущества и недостатки)

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

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

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

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

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

Остановимся подробнее на способах применения CSS. Существует четыре способа применения стилей:

  1. Переопределение стиля в элементе разметки
  2. Размещение описания стиля в заголовке документа с использованием тега style
  3. Размещение ссылки на внешнее описание через тег link
  4. Импорт стиля в документ

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

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

Когда одни и те же стили используются на нескольких или всех страницах сайта, не обязательно определять их в каждом html-документе. Достаточно сохранить их в отдельном файле и ссылаться на него в каждом документе с помощью тега link, стоящего в элементе head (до тега body). Атрибут rel при этом должен иметь значение «stylesheet».

Возможно также произвести импорт стиля в документ. Отличие от ссылки на внешнее описание в том, что импорт стиля может быть произведен внутрь элемента style или внутрь внешнего файла с описанием стилей, задаваемого в теге link. Таким образом можно создать внешний файл для внешнего файла. Инструкция импорта стиля ставится перед всеми остальными описателями стилей, что делает возможным легко переопределить импортируемый стиль.

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

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

Часто про CSS говорят, что с их помощью легко менять дизайн всего сайта сразу. Для этого достаточно переопределить стили в файле стилей. Но настоящий дизайнер, решившийся на изменение дизайна сайта, никогда не остановится только на переделке отображения шрифтов.

Каскадные таблицы стилей — перспективная технология. Но многие веб-мастеры пока еще ограничиваются только применением CSS для изменения цвета гиперссылки при подведении к ней указателя мыши.

ru:devel:css [DokuWiki]

Многое в отображении «ДокуВики» контролируется через таблицы стилей CSS. «ДокуВики» сама по себе определяет очень ограниченный набор стилей. Остальные описания CSS берутся из используемых шаблонов и плагинов.

Все файлы CSS предоставляются через единый диспетчер в lib/exe/css.php, который, кроме того, управляет кэшированием, заменами по маске и оптимизацией. Загрузка таблиц стилей производится (наряду с другими вещами) функцией tpl_metaheaders(), так что не забывайте включить её в свой шаблон.

Режимы таблиц стилей

«ДокуВики» знает о пяти типах режимов по умолчанию:

  • screen — этот режим используется при отображении страниц в окне веб-браузера;

  • all — применяется во всех режимах отображения;

  • print — определения отсюда будут использоваться при печати страницы;

  • rtl — определения из файлов rtl будут загружены дополнительно, когда используется язык с написанием справа-налево;

Таблицы стилей «ДокуВики»

«ДокуВики» загружает таблицы стилей из 4-х источников в следующем порядке (таблицы стилей RTL добавляются в конце каждого шага):

1. Базовые таблицы стилей

Эти таблицы располагаются в /lib/styles. Они определяют базовый стиль, вроде оформления сообщений об ошибках.

2. Стили плагинов

Плагины могут объявить свои собственные определения стиля, используя следующие файлы:

Режим Файл CSS
screen style.css или screen.css
print print.css
all all.css
rtl rtl.css
feed feed.css

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

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

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

3. Стили шаблонов

Таблицы стилей шаблонов загружаются из директории выбранного шаблона. «ДокуВики» читает style.ini, расположенный в директории шаблона и загружает все CSS, упомянутые в этом файле. Загрузка происходит в соответствии с текущим режимом.

Дополнительно в файле style.ini определяются подстановки.

4. Пользовательские стили

Независимо от используемого шаблона, администратором вики могут быть определены дополнительные стили с помощью следующих файлов CSS в директории conf/:

Файл CSS в «Муравьеде» Файл CSS после и до «Муравьеда»1) Когда используется
conf/userstyle.css conf/userstyle.css Применяется во всех режимах отображения
conf/printstyle.css conf/userprint.css Применяется при отправке на печать
conf/rtlstyle.css conf/userrtl.css Применяется, если используется языковой интерфейс с написанием справа-налево (right-to-left)
conf/feedstyle.css conf/userfeed.css Applied when displaying the feed
conf/allstyle.css conf/userall.css Applied in all display modes

Это полезно для переопределения небольшой части стилей шаблона или плагина без возникновения проблем при их дальнейшем обновлении.

Использование ID

Когда вы используете произвольный ID в вашем шаблоне для назначения стиля, убедитесь, что этот ID не конфликтует с уже имеющимися. В частности, убедитесь, что нет конфликта с автоматически назначаемыми ID для заголовков разделов. Простейший путь добиться этого — использовать два смежных символа подчерка (__) в вашем ID. Поскольку ID разделов всегда представляют собой допустимое имя статьи, они никогда не будут содержать смежных подчерков.

style.ini

Файл style.ini — это ini-файл. Он содержит два раздела:

[stylesheets]

В этой части определяется какие файлы CSS будут загружены. Каждая строка имеет вид:

cssfile.css = mode

cssfile.css — имя вашего файла; mode — режим, к которому применяется файл.

[replacements]

Диспетчер CSS «ДокуВики» способен заменять подстановки в загружаемый таблицах стилей, которые назначаются в разделе [replacements] в файле style.ini шаблона. Это исключительно полезно для определения цветовых схем в одном месте и дальнейшем использовании их во всех других файлах. После этого смена цветовой схемы сводится к просто редактированию ini-файла.

Гарантированные цветовые подстановки

Только следующие подстановки могут безопасно применяться в плагинах.

Переменная подстановки Назначение Значение в шаблоне по умолчанию Название до 2006-08-05
__background__ основной цвет фона #fff __white__
__background_alt__ альтернативный цвет фона #dee7ec __medium__
__background_neu__ нейтральный цвет фона #f5f5f5 __darkgray__
__border__ цвет окантовки #8cacbb __dark__
__text__ основной цвет текста #000 __black__
__text_alt__ альтернативный цвет текста #638c9c __darker__
__text_neu__ нейтральный цвет текста #666 __lightgray__

Начиная с 2006-08-05 подстановки были переименованы, их названия стали более корректными семантически. Плагины и шаблоны, использующие подстановки написанные после этого, могут даже не адаптироваться к старым переменным, но всё же желательно это делать.

Другие цветовые подстановки, используемые шаблоном по умолчанию

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

Переменная подстановки Назначение Значение в шаблоне по умолчанию Название до 2006-08-05
__background_other__ другой цвет фона #f7f9fa __lighter__
__text_other__ другой цвет текста #ccc __mediumgray__
(none, omitted) - #eef3f8 __light__
__extern__ цвет ссылки #436976 (не менялось)
__existing__ цвет для существующих внутренних ссылок #090 (не менялось)
__missing__ цвет для несуществующих внутренних ссылок #f30 (не менялось)
__highlight__ цвет для подсвечивания найденых кусков текста #ff9 (не менялось)

ru/devel/css.txt · Последнее изменение: 2018-04-20 22:04 — Dr-Yukon

CSS: правильное использование - залог успеха - Вёрстка

Начинаем свой путь к мастерству. Он будет достаточно долгим и непростым, но вы справитесь, если у вас есть цель. По крайней мере, к этому моменту вы уже обладаете определенным багажом знаний, достаточным для применения на практике. Однако использовать CSS можно по-разному. Цель данной главы - научить вас применять CSS правильно. Поверьте, это не так просто, как кажется на первый взгляд. Ведь можно просто особо не задумываясь написать таблицу стилей с множеством классов и ненужных объявлений, которая будет корректно работать. Но такая таблица стилей будет неоптимальной и неудобной. Неоптимальной потому, что ее можно значительно сократить и уменьшить объем, что немаловажно. Неудобной потому, что разбираться в неупорядоченном нагромождении классов достаточно сложно. Вообще жестких правил при написании таблицы стилей нет, потому что написать стиль можно по-разному и это будет работать, однако есть множество рекомендаций. Кроме того, можно все же выделить одно главное правило, которое всегда надо применять при использовании CSS.

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

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

Форматирование таблиц стилей

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

P {color: #000; font: x-small Verdana}
BODY {background: #FFF}
#mainmenu A {color: #000; font: bold small Arial}
h4 {color: #000; font-family: Arial}
.back {background: url(img/fragment_3.gif) no-repeat;}
#submenu A {color: #FFF; font: bold xx-small Arial}
.bluecol {background: #1d3d4e}

Согласитесь, что разобраться в ней с первого взгляда не так-то просто. Здесь перемешаны все виды селекторов и нет никакого порядка. Структура таблицы непредсказуема и, что еще хуже, в ней совершенно отсутствует внутренняя логика построения, т. е. нет никаких правил, которые помогли бы найти нужное объявление.

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

Как вы помните, существует несколько типов селекторов: элементы, классы, ID. Так что если формировать блоки по типам селекторов уже будет какой-то уровень организованности. Первое правило организации таблиц.

Совет
Разделяйте селекторы, т. е. сформируйте первый блок из селекторов по элементам, второй блок из селекторов по классам, а третий блок из селекторов по ID. Блоки друг от друга можно отделять дополнительным переводом строки.

В нашем случае блок селекторов по элементам будет состоять из h4, P и BODY, второй блок из селекторов по классам будет состоять из .back и .bluecol, третий блок из селекторов по ID будет состоять из #mainmenu и #submenu. А таблица стилей будет выглядеть так:

BODY {background: #FFF}
h4 {color: #000; font-family: arial}
P {color: #000; font: x-small Verdana}

.back {background: url(img/fragment_3.gif) no-repeat;}
.bluecol {background: #1d3d4e}

#mainmenu A {color: #000; font: bold small arial}
#submenu a {color: #fff; font: bold xx-small arial}

Кроме того, в каждом блоке селекторы надо расставить в алфавитном порядке. На первый взгляд, это не очень сильно упорядочит таблицу стилей, однако есть достаточно веская причина соблюдать такое правило. На первых порах вам будет абсолютно все равно, в каком порядке расположены селекторы в трех блоках, однако постепенно вы привыкните располагать селекторы именно в алфавитном порядке, вследствие чего в своих таблицах стилей будете ориентироваться легко, и быстро находить необходимые правила. Вы будете подсознательно чувствовать, что селектор .back находится в начале блока селекторов по классам, потому что начинается с буквы b, а селектор .vis - в конце, потому что начинается с буквы v.

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

P {color: #000; font-size: 12px; padding-left: 1em}

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

P {
  color: #000;
  font-size: 12px;
  padding-left: 1em}

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

Для наглядности запись стилей в несколько строк используется в данной книге. Это улучшает восприятие, потому что длинных листингов кода мало.

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

Первая:

P.emphasize {
  font-size: 14px;
  text-indent: 1em;
  color: #000;
  font-style: italic}
TD {
  font-style: italic;
  color: #000;
  font-size: 14px}

Вторая:

P.emphasize {
  color: #000;
  font-style: italic;
  font-size: 14px;
  text-indent: 1em}
TD {
  color: #000;
  font-style: italic;
  font-size: 14px}

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

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

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

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

Имена классов и ID

При верстке вам частенько придется вводить новые классы и как-то их называть. Естественным образом возникает желание, чтобы названия были короткими и логичными. Если класс для заголовков раздела назвать head1, то это будет достаточно логично и коротко, а если bigblacktext - нелогично и длинно. Конечно, часто встречаются ситуации, когда не получается придумать подходящее короткое имя, тогда приходится чем-то жертвовать: либо длиной, либо логичностью. Лично я предпочитаю жертвовать логичностью, потому что в своем коде я разберусь всегда. Однако если над проектом работает несколько HTML-верстальщиков и каждый из них создает какую-либо часть сайта, то лучше жертвовать длиной, потому что в этом случае логичность гораздо важнее. Согласитесь, далеко не каждый поймет, что класс aa обозначает, к примеру, отступ справа на 10 пикселов, тогда как класс rightpad10 об этом свидетельствует достаточно однозначно. Вообще вам все время придется балансировать на грани между объемом и логикой, важно сохранять баланс в большинстве случаев и четко представлять себе, когда его можно нарушить. Нарушить его можно в двух случаях.

  1. Если вы профессионал и работаете над HTML-кодом сайта в одиночку.
  2. Если вам до зарезу надо максимально уменьшить объем кода и важным становится каждый лишний байт.

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

Оптимизация таблиц стилей

В любом деле оптимизация есть процесс желательный, а часто необходимый. Это естественно, потому что он несет всяческие выгоды, начиная с увеличения скорости работы приложения и заканчивая уменьшением затрат. Если взять локальную область, такую как верстка сайтов и написание таблиц стилей в частности, то под оптимизацией понимается уменьшение объема кода, что приносит следующие выгоды:

  1. незначительно ускоряется загрузка страниц;
  2. писать и редактировать таблицу стилей становится несколько проще по причине уменьшения числа селекторов и свойств, что в конечном итоге ведет к экономии времени, пусть и незначительной.

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

Существует несколько правил, которые могут помочь вам написать оптимизированную таблицу стилей.

Стили по умолчанию

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

P {
  font-style: normal;
  letter-spacing: normal;
  text-decoration: none}

вообще не имеет смысла, потому что все эти значения для элементов <P> установлены по умолчанию. Зачем же их указывать явно? Конечно, возможны случаи, когда надо переписать установленный ранее стиль. Например, вы хотите, чтобы все элементы <h2> были подчеркнутыми и пишите стиль:

h2 {
  text-decoration: underline;}

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

h2.nounderline {
  text-decoration: none}

То есть вы первым правилом переписали значение по умолчанию для элементов <h2>, поэтому потом пришлось явным образом восстанавливать это значение для заголовков с классом nounderline. В этом случае другого выхода нет, но вообще если вам нет необходимости изменять стили элементов, то и не надо прописывать значения по умолчанию явным образом.

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

Сокращенные формы записи

Второй способ сократить объем таблицы стилей - использование сокращенных форм записи некоторых свойств. В таблице они систематизированы.

Сокращенная форма Входящие свойства
font: italic small-caps 12px/140% Tahoma, sans-serif font-style: italic
font-variant: small-caps
font-weight: normal
font-size: 12px
line-height: 140%
font-family: Tahoma, sans-serif
margin: 1em 2em 0 1em margin-top: 1em
margin-right: 2em
margin-bottom: 0em
margin-left: 1em
padding: 10px 20px padding-top: 10px
padding-right: 20px
padding-bottom: 10px
padding-left: 20px
border: 1px solid #000
border-top: 1px solid #000
border-right: 1px solid #000
border-bottom: 1px solid #000
border-left: 1px solid #000
border-width: 1px
border-style: solid
border-color: #000
background: url("backgr.gif") #FFF repeat-x background-color: #FFF
background-image: url("backgr.gif")
background-repeat: repeat-x
background-attachment: scroll
background-position: 0px 0px

Использование сокращенных форм записи является делом весьма полезным и нужным, потому что объем таблицы стилей при этом значительно уменьшается. Это видно уже из сравнения правого и левого столбцов табл. 5.1, но чтобы окончательно вас убедить, я приведу еще один несложный пример. Пусть нам надо создать блок rule, который имеет черную рамку толщиной один пиксел и внутренние отступы величиной 10 пикселов. Ширина блока будет 300 пикселов, а текст в нем будет выводиться полужирным шрифтом Verdana размером 12 пикселов. Если не пользоваться сокращенными формами записи вообще, то код будет такой:

#rule {
     font-family: Verdana, sans-serif;
     font-weight: bold;
     font-size: 12px;
     width: 300px;
     border-top: 1px solid #000;
     border-right: 1px solid #000;
     border-bottom: 1px solid #000;
     border-left: 1px solid #000;
     padding-top: 10px;
     padding-right: 10px;
     padding-bottom: 10px;
     padding-left: 10px}

Воспользуемся сокращенными формами записи, и правило для блока у нас получится такое:

#rule {
     font: bold 12 px Verdana, sans-serif;
     width: 300px;
     border: 1px solid #000;
     padding: 10px}

Первое правило занимало 290 байт, а второе всего 96. Вес уменьшился в три раза, т. е. оптимизация достигла 300%! Конечно, этот пример показывает что будет, если не использовать сокращений вообще, но тем не менее он совершенно реальный и вам частенько придется создавать очень похожие блоки, так что примите к сведению эти 300%.

Группировка

Для оптимизации таблиц стилей надо с умом применять группировку. Как вы уже знаете, группировка - это объединение селекторов с одинаковыми объявлениями. Однако из этого определения не вытекает достаточно неочевидное утверждение, что группировать селекторы можно только в том случае, если они содержат совершенно одинаковые объявления. Например, у нас есть такая таблица стилей:

P {
  color: #000;
      font: 14px Tahoma, Verdana, sans-serif}
TD {
     color: #000;
     font: 14px Tahoma, Verdana, sans-serif}
P {
     text-indent: 2em}
BODY {
     color: #000;
     font: 14px Tahoma, Verdana, sans-serif}

Ее можно оптимизировать так:

P, TD, BODY {
     color: #000;
     font: 14px Tahoma, Verdana, sans-serif}
P {
     text-indent: 2em}

Получилось очень компактно, но зато логика таблицы стилей сильно пострадала. Если вам понадобится изменить какое-либо объявление в элементе <P>, то в большой таблице вы его можете искать очень долго, потому что селекторы на этот элемент будут располагаться в разных местах. Запомните правило.

Правило
Все объявления для одного и того же элемента должны находится в одном месте

Это означает, что в нашем примере мы можем объединить только селекторы на элементы <BODY> и <TD>, а селекторы на элемент <P> надо свести в один, как того требует правило:

BODY, TD {
  color: #000;
  font: 14px Tahoma, Verdana, sans-serif}
P {
  color: #000;
  font: 14px Tahoma, Verdana, sans-serif;
     text-indent: 2em}

Кроме того, если вы захотите, скажем, добавить в таблицу стилей фон страницы, то придется разбить группу селекторов BODY и TD, потому что стили к ним уже не будут совершенно одинаковыми. Вот нам, к примеру, понадобилось добавить фоновый цвет на элемент <BODY>. Тогда придется разбить группу, и таблица стилей будет выглядеть так:

BODY {
     color: #000;
     background-color: #CCC;
     font: 14px Tahoma, Verdana, sans-serif}
TD {
     color: #000;
     font: 14px Tahoma, Verdana, sans-serif}
P {
     color: #000;
     font: 14px Tahoma, Verdana, sans-serif;
     text-indent: 2em}

Строчные и прописные

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

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

Оптимизация на практике

Исходная таблица у нас страшно неорганизованная и запутанная:

A:link {font-weight: bold; COLOR: black}
A:visited {font-weight: bold; COLOR: #555555}
A:active {font-weight: bold; COLOR: #FF0000}
A:hover {font-weight: bold; COLOR: #FF0000}
#lnk A:link {color: #666666}
#lnk A:visited {color: #666666}
#lnk A:active {color: #ff9900}
#lnk a:hover {color: #ff9900}
BODY {MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px} .imgnews {margin-right: 12px}
CODE {color: #00C; font-family: courier new}
em {font-weight: bold; font-style: normal; color: black}
.norm {color: #555; FONT: 12px verdana, helvetica, Sans-serif}
p {text-align: justify; color: #555; FONT: 12px verdana, sans-serif}
input {border: 1px solid black; margin: 1px 2px}
TEXTAREA {border: 1px solid black; margin-top: 1px; margin-left: 2px; margin-bottom: 1px; margin-letf: 2px}
.EXAMPLE {background-color: #eeeeee; padding: 20px; BORDER: 1px dotted black}

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

1. A:link {font-weight: bold; COLOR: black}
2. A:visited {font-weight: bold; COLOR: #555555}
3. A:active {font-weight: bold; COLOR: #FF0000}
4. A:hover {font-weight: bold; COLOR: #FF0000}
5. BODY {MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px}
6. CODE {color: #00C; font-family: courier new}
7. em {font-weight: bold; font-style: normal; color: black}
8. input {border: 1px solid black; margin: 1px 2px}
9. p {text-align: justify; color: #555; FONT: 12px verdana, sans-serif}
10. TEXTAREA {border: 1px solid black; margin-top: 1px; margin-right: 2px; margin-bottom: 1px; margin-letf: 2px}

11. .EXAMPLE {background-color: #eeeeee; padding: 20px; BORDER: 1px dotted black}
12. .imgnews {margin-right: 12px}
13. .norm {color: #555; FONT: 12px verdana, helvetica, Sans-serif}

14. #lnk A:link {color: #666666}
15. #lnk A:visited {color: #666666}
16. #lnk A:active {color: #ff9900}
17. #lnk a:hover {color: #ff9900}

Пойдем дальше. Для начала займемся правилами для ссылок, которые находятся в строках 1-4. Заранее договоримся, что в объявлениях стилей сначала будет идти цвет и фон, затем шрифт, затем поля и отступы. Итак:

  • перенесем в начало объявления цвета;
  • свойство COLOR запишем строчными буквами;
  • вместо обозначения черного цвета словом black запишем #000;
  • остальные значения сократим так: #555555 поменяем на #555, #FF0000 поменяем на #F00.

Получится вот что:

1. A:link {
     color: #000;
     font-weight: bold}
2. A:visited {
     color: #555;
     font-weight: bold}
3. A:active {
     color: #F00;
     font-weight: bold}
4. A:hover {
     color: #F00;
     font-weight: bold}

Заметьте, что последние два селектора имеют совершенно одинаковые объявления, так что можно смело их сгруппировать:

1. A:link {
     color: #000;
     font-weight: bold}
2. A:visite {
     color: #555;
     font-weight: bold}
3. A:active, A:hover {
     color: #F00;
     font-weight: bold}

Займемся строками 5-7:

5. BODY {MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px}
6. CODE {color: #00C; font-family: courier new}
7. em {font-weight: bold; font-style: normal; color: black}

Объявление стилей на элемент <BODY> содержит четыре отступа, причем все они имеют значение 0, так что можно смело вместо всех четырех отступов использовать сокращенную форму записи, кроме того, надо переписать все свойства строчными буквами:

5. BODY {
     margin: 0px;
     padding: 0px}

В шестой строке на первый взгляд все правильно, однако в свойстве font-family указан только один шрифт. Укажем кроме него еще и шрифтовое семейство, в данном случае это monospace. Кроме того, названия шрифтов из двух и более слов рекомендуется заключать в кавычки:

6. CODE {
     color: #00C;
     font-family: "Сourier new", monospace}

В седьмой строке запишем название селектора em большими буквами, переместим в начало свойство color и заменим значение black на #000.

7. EM {
     color: #000;
     font-weight: bold;
     font-style: normal}

Теперь рассмотрим строки 8-10:

8. input {border: 1px solid black; margin: 1px 2px}
9. p {text-align: justify; color: #555; FONT: 12px verdana, sans-serif}
10. TEXTAREA {border: 1px solid black; margin-top: 1px; margin-right: 2px; margin-bottom: 1px; margin-letf: 2px}

Восьмая строка практически правильная, надо только переписать селектор input заглавными буквами. В строке 9 надо:

  • селектор p заменить на P;
  • перенести в конец правила свойство text-align;
  • переписать свойство FONT строчными буквами.

Получится так:

9. P {
     color: #555;
     font: 12px Verdana, sans-serif;
     text-align: justify}

В десятой строке можно кое-что сократить. Заметьте, что верхнее и нижнее поля имеют значение 1 пиксел, а левое и правое - 2 пиксела. Это можно записать сокращенно с помощью объявления margin: 1px 2px. Кроме того, надо в объявлении рамок поменять значение цвета black на #000. Тогда десятая строка будет такой:

10. TEXTAREA {
     border: 1px solid #000;
     margin: 1px 2px}

А сейчас сравните исправленные строки 8 и 10. Они совершенно одинаковые, т. е. можно сгруппировать селекторы INPUT и TEXTAREA:

8. INPUT, TEXTAREA {
     border: 1px solid #000;
     margin: 1px 2px}

С блоком селекторов по элементам мы разобрались, так что перейдем к классам:

11. .EXAMPLE {background-color: #eeeeee; padding: 20px; BORDER: 1px dotted black}
12. .imgnews {margin-right: 12px}
13. .norm {color: #555; FONT: 12px verdana, helvetica, Sans-serif}

Здесь надо в строке 11 переписать название класса EXAMPLE и свойство BORDER строчными буквами, а также написать значение цвета в сокращенной форме. Строка 12 теперь полностью корректна. А в строке 13 надо переписать свойство FONT строчными буквами:

11. .example {
     background-color: #EEE;
     border: 1px dotted #000;
     padding: 20px}
12. .imgnews {
     margin-right: 12px}
13. .norm {
     color: #555;
     font: 12px Verdana, Helvetica, sans-serif}

Остался блок контекстных селекторов:

14. #lnk A:link {color: #666666}
15. #lnk A:visited {color: #666666}
16. #lnk A:active {color: #ff9900}
17. #lnk a:hover {color: #ff9900}

Здесь надо только записать цвета в сокращенной форме и сгруппировать селекторы 14 и 15, а также 16 и 17:

14. #lnk A:link, #lnk A:visited {
     color: #666}
15. #lnk A:active, #lnk A:hover {
     color: #F90}

Вся обновленная таблица стилей будет выглядеть следующим образом:

1. A:link {
     color: #000;
     font-weight: bold}
2. A:visited {
     color: #555;
     font-weight: bold}
3. A:active, A:hover {
     color: #F00;
     font-weight: bold}
5. BODY {
     margin: 0px;
     padding: 0px}
6. CODE {
     color: #00C;
     font-family: "Courier new", monospace}
7. EM {
     color: #000;
     font-weight: bold;
     font-style: normal}
8. INPUT, TEXTAREA {
     border: 1px solid #000;
     margin: 1px 2px}
9. P {
     color: #555;
     font: 12px Verdana, sans-serif;
     text-align: justify}

11. .example {
      background-color: #EEE;
     border: 1px dotted #000;
     padding: 20px}
12. .imgnews {
     margin-right: 12px}
13. .norm {
     color: #555;
     font: 12px Verdana, Helvetica, sans-serif}

14. #lnk A:link, #lnk A:visited {
     color: #666}
15. #lnk A:active, #lnk A:hover {
     color: #F90}

Как видите, таблица стилей стала значительно более структурированной и читаемой. Кроме того, первоначальная таблица весила 877 байт, а оптимизированная таблица весит 677 байт (если убрать переводы строк и лишние пробелы перед каждым объявлением). Мы смогли уменьшить вес таблицы стилей на 23%, что само по себе не так уж мало. К тому же она стала более логичной, так что теперь найти нужное объявление или селектор не составит труда. Это и есть цель данной главы - научиться создавать легкочитаемые и компактные таблицы стилей, а также оптимизировать старые, уже созданные ранее.

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

Михаил Дубаков

Как стилизовать таблицу с помощью CSS

Автор выбрал Diversity in Tech Fund, чтобы получить пожертвование в рамках программы Write for DOnations.

Введение

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

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

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

по назначению может значительно повысить доступность вашего CSS-дизайна.

В этом руководстве вы рассмотрите пример стилизации элемента

. Первая половина этого руководства будет посвящена общему макету таблицы, который в основном использует стили браузера по умолчанию для элементов таблицы. Параметры браузера по умолчанию - это отправная точка работы с CSS, поэтому важно знать, что они из себя представляют. Во второй половине будет произведен рефакторинг таблицы для использования уникальных стилей для каждого раздела.К концу учебника вы создадите таблицу с разными стилями заголовков таблиц по оси X и Y, чередующимися цветами строк, четким заголовком для таблицы и выделенной точкой данных, как показано на следующем изображении. :

Предварительные требования

Настройка

<таблица> HTML

Прежде чем вы сможете стилизовать

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

Для начала откройте index.html в текстовом редакторе и добавьте HTML-код в следующий блок кода:

index.html

  

  
     Отчет за четвертый квартал 2019 г. 
    
  
  
    <таблица>
    

Весь HTML-код, который вы добавите с этого момента, будет помещен в элемент

. Сам элемент
определяет только область табличного содержимого и для правильной работы должен иметь внутри определенные элементы. Элемент ссылается на файл styles.css , который вы добавите позже, и загрузит CSS на страницу для создания стилей.Атрибут media указывает, для какого устройства создан контент. В данном случае вы установили для всех , поскольку это для всех типов устройств.

Сначала вы добавите элемент

в элемент с текстом отчета за четвертый квартал 2019 года внутри. В файле index.html в текстовом редакторе добавьте выделенный HTML-код из следующего блока кода:

index.html

 ...
<таблица>
  
Отчет за четвертый квартал 2019 г.
...

содержит имя или описание таблицы. Обязательно включите этот элемент в свои таблицы, поскольку он предоставляет полезную информацию для тех, кто использует вспомогательные технологии, такие как программа чтения с экрана. Может быть полезно думать об элементе как о </code> из <code> <table> </code>. </p> <p> Затем добавьте <code> <thead> </code>, за которым следуют элементы <code> <tbody> </code> в качестве родственников к элементу <code> <caption> </code>, как показано в выделенном HTML в следующем блоке кода: </p> Индекс <p>.html </p> <pre> <code> ... <таблица> <caption> Отчет за четвертый квартал 2019 г. </caption> <thead> </thead> <tbody> </tbody> </table> </code> </pre> <p> Элемент <code> <thead> </code> является эквивалентом <code> <table> </code> элемента <code> <header> </code> и определяет контекст для информации заголовка. Как и <code> <thead> </code>, элемент <code> <tbody> </code> определяет область, в которой будет располагаться табличное содержимое. В обоих случаях они определяют область, но сами по себе не отображают контент.Хотя элемент <code> <tfoot> </code> не используется в этом примере, он существует для предоставления сводной информации, такой как итоги. </p> <p> Таблица в HTML строится из строк, а не из столбцов. Каждая ячейка таблицы содержится в элементе <code> <tr> </code>. Эти элементы обычно являются потомками <code> <thead> </code>, <code> <tbody> </code> и <code> <tfoot> </code>, но также могут быть прямым потомком <code> <table> </code>, если элементы области не используются.</p> <p> Вернитесь к <code> index.html </code> в текстовом редакторе, чтобы добавить одну строку заголовка и три строки содержимого в основной текст, как показано в следующем блоке кода: </p> <p> index.html </p> <pre> <code> ... <таблица> <caption> Отчет за четвертый квартал 2019 г. </caption> <thead> <tr> </tr> </thead> <tbody> <tr> </tr> <tr> </tr> <tr> </tr> </tbody> </table> ... </code> </pre> <p> Последние два элемента функционально схожи и оба являются последними элементами в структуре HTML <code> <table> </code>, что означает, что в отличие от предыдущих элементов они могут содержать не табличные элементы.</p> <p> <code> <td> </code> элементы содержат отдельные точки данных таблицы. <code> <th> </code> определяет содержимое как заголовок строки или столбца. Элементы таблицы уникальны для HTML, поскольку их структура разметки напрямую коррелирует с визуальной структурой. Если рассматривать таблицу как электронную таблицу, элементы <code> <th> </code> и <code> <td> </code> ведут себя как ячейки. Чтобы в этой таблице было четыре столбца, в каждом <code> <tr> </code> должно быть не более и не менее четырех элементов <code> <td> </code> или <code> <th> </code>.В зависимости от содержания данных это может означать наличие пустого элемента <code> <th> </code> или <code> <td> </code>. Может быть полезно использовать комментарий HTML, чтобы объяснить, когда элемент намеренно оставлен пустым. </p> <p> Добавьте выделенный HTML-код из следующего блока кода в файл <code> index.html </code>: </p> <p> index.html </p> <pre> <code> ... <таблица> <caption> Отчет за четвертый квартал 2019 г. </caption> <thead> <tr> <th> <! - Намеренно пусто -> </th> <th> октябрь </th> <th> ноябрь </th> <th> декабрь </th> <tr> </thead> <tbody> <tr> <th> Прогноз </th> <td> 820 180 долл. США </td> <td> 841 640 долл. США </td> <td> 732 270 долл. США </td> </tr> <tr> <th> Фактический </th> <td> 850 730 долл. США </td> <td> 892 580 долл. США </td> <td> 801 240 долл. США </td> </tr> <tr> <th> Использование </th> <td> 83% </td> <td> 90% </td> <td> 75% </td> </tr> </tbody> </table> ... </code> </pre> <p> <strong> Примечание: </strong> Как и в программе для работы с электронными таблицами, иногда может потребоваться объединить ячейки, например, когда одна ячейка занимает два столбца. Это можно сделать, но только с использованием атрибутов HTML в ячейках, а не с помощью CSS. Об этом важно помнить при работе с более сложными таблицами. <br/> </p> <p> Теперь, когда вы написали свою таблицу, сохраните файл. Затем откройте <code> index.html </code> в своем веб-браузере. На следующем изображении показано, как стили браузера по умолчанию для этой таблицы будут выглядеть при загрузке в веб-браузере Firefox: </p> <p> </p> <p> В этом разделе вы настраиваете HTML для табличных данных.Вы узнали о том, как таблица состоит из ряда элементов, объединенных в определенном порядке для создания доступного набора данных. Затем вы воспользуетесь свойствами <code> border </code> и <code> border-collapse </code>, чтобы начать применение стилей к таблице. </p> <h3><span class="ez-toc-section" id="i-31"> Использование </span></h3><code> border </code> и <code> border-collapse </code> для создания стиля начальной таблицы </h3> <p> Первым шагом к стилизации таблицы является понимание некоторых стилей и поведения браузера по умолчанию. В этом разделе будут рассмотрены свойства <code> border </code> и <code> border-collapse </code>, а также показано, как создать границу между ячейками.</p> <p> Чтобы начать стилизацию таблицы, создайте и откройте файл с именем <code> styles.css </code> в текстовом редакторе в той же папке, что и <code> index.html </code>. Добавьте группу селекторов, состоящую из селектора элементов <code> th </code> и селектора элементов <code> td </code>. Затем в блоке селектора добавьте свойство <code> border </code> со значением <code> 1px сплошной черный </code>, как показано в следующем блоке кода: </p> <p> styles.css </p> <pre> <code> th, td { граница: сплошной черный 1px; } </code> </pre> <p> Сохраните изменения в <code> стилей.css </code>, а затем откройте <code> index.html </code> в своем веб-браузере. Вместо единой сетки будет несколько прямоугольников с собственными границами. На следующем изображении показано, как таблица будет отображаться в веб-браузере: </p> <p> </p> <p> Чтобы изменить это значение по умолчанию, вернитесь к <code> styles.css </code> в текстовом редакторе и добавьте селектор элементов <code> table </code> в начало файла. Затем в блоке селектора примените свойство <code> border-collapse </code>. По умолчанию для этого свойства установлено значение <code>, отдельный </code>, но здесь вы измените его на значение <code>, сверните </code>.Это удаляет интервал между ячейками таблицы и приводит к перекрытию границ. Выделенный CSS в следующем блоке кода указывает, что добавить в файл <code> styles.css </code>: </p> <p> styles.css </p> <pre> <code> таблица { граница-коллапс: коллапс; } th, td { граница: сплошной черный 1px; } </code> </pre> <p> Откройте веб-браузер и обновите <code> index.html </code>. Таблица теперь будет иметь сетку, определяемую несколькими пересекающимися черными линиями. На следующем изображении показано, как границы будут отображаться в вашем браузере: </p> <p> </p> <p> В этом разделе вы использовали свойство <code> border </code>, чтобы применить границу к каждой ячейке таблицы с помощью селекторов элементов <code> th </code> и <code> td </code>.Вы также узнали, что по умолчанию ячейки таблицы разделены пробелом. Вы использовали свойство <code> border-collapse </code>, примененное к селектору элементов <code> table </code> со свойством <code> collapse </code>, чтобы удалить пространство между ячейками таблицы. В следующем разделе вы будете использовать свойства <code> padding </code> и <code> width </code> для определения размера таблицы. </p> <h3><span class="ez-toc-section" id="i-32"> Установка размера стола </span></h3> <p> Затем вы добавите некоторый интервал между ячейками таблицы, чтобы сделать данные более удобочитаемыми.Чтобы решить проблему добавления пробелов в ячейки таблицы и сделать таблицу более сбалансированной, в этом разделе основное внимание будет уделено свойствам <code> width </code> и <code> padding </code>. </p> <p> На данный момент содержимое каждой ячейки сгруппировано с границами прямо над содержимым. Вы также могли заметить, что ширина таблицы определяется размером ее содержимого. <code> <table> </code> имеет собственное свойство отображения: <code> display: table </code>. Чтобы таблица занимала всю ширину родительского контейнера, к селектору <code> table </code> можно добавить <code> width: 100% </code>.</p> <p> Поскольку это относительно небольшая таблица, добавлять свойство <code> width </code> к элементу <code> <table> </code> необязательно. Вместо этого откройте <code> styles.css </code> в текстовом редакторе и добавьте селектор комбинатора, состоящий из <code> thead th </code>, который будет охватывать стили до <code> <th> </code> элементов внутри элемента <code> <thead> </code>. Затем добавьте свойство </code> ширины <code> со значением <code> 25% </code>, как указано в выделенной части следующего блока кода: </p> <p> стилей.css </p> <pre> <code> ... th, td { граница: сплошной черный 1px; } thead th { ширина: 25%; } </code> </pre> <p> Поскольку в этой таблице четыре столбца, вы можете присвоить каждому столбцу одинаковую ширину, применив ширину <code>: 25% </code>. Необходимо установить только первую ячейку каждого столбца, следовательно, <code> - это селектор </code>. Ширина одной ячейки определяет ширину всех ячеек в этом столбце. </p> <p> После сохранения изменений в <code> styles.css </code> вернитесь в браузер и обновите индекс <code>.html </code>. В таблице теперь будет четыре столбца одинаковой ширины, как показано на следующем изображении: </p> <p> </p> <p> <strong> Примечание: </strong> Если вы хотите иметь разную ширину для каждого столбца, примените определенный класс к каждому <code>-му </code> в столбце. Затем, используя эти классы, установите желаемую ширину. <br/> </p> <p> Теперь, когда столбцы имеют одинаковую ширину, содержимое каждой ячейки может занимать немного больше места внутри, используя свойство <code> padding </code>. В отличие от свойства <code> width </code>, использование пространства внутри ячейки требует нацеливания на все элементы ячеек <code> th </code> и <code> td </code>.</p> <p> Откройте <code> styles.css </code> в текстовом редакторе и добавьте свойство <code> padding </code> в селектор группы для <code> th, td </code>, затем присвойте ему значение <code> 8px </code>. Выделенная строка в следующем блоке кода указывает на необходимое изменение: </p> <p> styles.css </p> <pre> <code> ... th, td { граница: сплошной черный 1px; отступ: 8 пикселей; } thead th { ширина: 25%; } </code> </pre> <p> Сохраните изменения в файле <code> styles.css </code>, затем обновите индекс <code>.html </code> в браузере. Заполнение <code> 8px </code> добавляется с каждой стороны каждой ячейки, обеспечивая пространство, чтобы табличные данные были более разборчивыми. На следующем изображении показано, как это будет отображаться в браузере: </p> <p> </p> <p> <strong> Примечание: </strong> Блочная модель для ячеек таблицы отличается от обычной модели и не распознает свойство <code> margin </code>. <br/> </p> <p> В этом разделе вы устанавливаете свойство <code> width </code> для каждого столбца, чтобы оно было равным, и вы добавляли интервал к каждой ячейке, используя свойство <code> padding </code>, чтобы облегчить чтение данных.В следующем разделе вы будете использовать класс для нацеливания и стилизации определенной ячейки таблицы. </p> <h3><span class="ez-toc-section" id="i-33"> Нацеливание на определенную ячейку таблицы </span></h3> <p> На этом этапе цель состоит в том, чтобы визуально выделить одну из ячеек в таблице. Вы примените имя класса в HTML, затем используйте селектор классов и свойство <code> background-color </code>, чтобы создать эффект выделения. </p> <p> Для начала откройте <code> index.html </code> в текстовом редакторе и добавьте атрибут <code> class </code> к элементу <code> <td> </code> с текстом <strong> 90% </strong> внутри.Присвойте атрибуту </code> класса <code> значение <code> </code> для выделения ячейки, как указано в выделенном HTML-коде следующего блока кода: </p> <p> index.html </p> <pre> <code> <таблица> ... <tr> <th> Использование </th> <td> 83% </td> <td> 90% </td> <td> 75% </td> </tr> ... </table> </code> </pre> <p> Сохраните изменения в <code> index.html </code>, затем откройте <code> styles.css </code> в текстовом редакторе.Добавьте в конец файла селектор класса <code> .cell-hightlight </code>. Внутри блока селектора добавьте свойство <code> background-color </code> со значением <code> gold </code>. Затем добавьте свойство <code> font-weight </code> со значением <code> bold </code>. Выделенный CSS в следующем блоке кода демонстрирует, как это отформатировано: </p> <p> styles.css </p> <pre> <code> ... thead th { ширина: 25%; } .cell-highlight { цвет фона: золото; font-weight: жирный; } </code> </pre> <p> Сохраните изменения в <code> стилей.css </code>, затем вернитесь в веб-браузер и обновите <code> index.html </code>. Как показано на следующем изображении, ячейка таблицы с содержимым <strong> 90% </strong> теперь имеет темно-желтый фон и жирный шрифт: </p> <p> </p> <p> Теперь вы использовали селектор классов для определенной ячейки таблицы, чтобы применить стиль выделения с использованием свойств <code> background-color </code> и <code> font-weight </code>. Затем вы измените размещение границ, шрифт и выравнивание текста, чтобы стили придвинулись к окончательному виду таблицы.</p> <h3><span class="ez-toc-section" id="i-34"> Установка семейства шрифтов для таблицы </span></h3> <p> Чтобы начать движение к окончательному стилю таблицы, вы переместите границу так, чтобы она охватывала всю таблицу, а не отдельные ячейки. Затем вы установите новое семейство шрифтов <code> </code> по умолчанию для страницы и отрегулируете выравнивание текста по умолчанию для отдельных ячеек. </p> <p> Чтобы обновить границы, откройте <code> styles.css </code> в текстовом редакторе. Затем отредактируйте существующий селектор группы <code> th, tr </code>, удалив границу <code>: сплошной черный 1px; </code> имущества и стоимости.Это удалит границы ячеек из таблицы; отступы останутся такими же для второго этапа стилей таблицы. Затем в селекторе типа <code> table </code> добавьте свойство <code> border </code> со значением <code> 1px solid black </code>. Следующий блок кода демонстрирует, как это будет отображаться в вашем коде: </p> <p> styles.css </p> <pre> <code> таблица { граница-коллапс: коллапс; граница: сплошной черный 1px; } th, td { отступ: 8 пикселей; } ... </code> </pre> <p> Сохраните изменения в <code> стилей.css </code> и вернитесь в браузер, чтобы обновить <code> index.html </code>. Теперь рамка будет окружать всю таблицу, а не отдельные ячейки таблицы, как показано на следующем изображении: </p> <p> </p> <p> Чтобы изменить шрифт для всего документа, вернитесь к <code> styles.css </code> в текстовом редакторе. Перед блоком селектора <code> table </code> добавьте селектор типа <code> body </code>. В блоке селектора </code> body <code> добавьте свойство </code> font-family <code> со значением <code> sans-serif </code>.В качестве шрифта для страницы будет выбран шрифт без засечек браузера по умолчанию, например Helvetica или Arial. Выделенный CSS в следующем блоке кода указывает на изменения в файле <code> styles.css </code>: </p>. <p> styles.css </p> <pre> <code> body { семейство шрифтов: без засечек; } Таблица { граница-коллапс: коллапс; граница: сплошной черный 1px; } ... </code> </pre> <p> Сохраните эти изменения в <code> styles.css </code>, затем перезагрузите <code> index.html </code> в браузере. Шрифт для всей таблицы теперь будет иметь шрифт без засечек браузера по умолчанию, как показано на следующем изображении: </p> <p> </p> <p> Наконец, чтобы настроить выравнивание содержимого таблицы, вернитесь к стилям <code>.css </code> в вашем текстовом редакторе. Браузеры обычно по умолчанию выравнивают содержимое по левому верхнему положению. Подобно выравниванию содержимого в приложении для работы с электронными таблицами, содержимое таблиц может быть выровнено по середине ячейки таблицы независимо от высоты строки. </p> <p> Чтобы установить горизонтальное выравнивание по центру, перейдите к селектору типа <code> table </code> и добавьте свойство <code> text-align </code> со значением <code> center </code>. Затем, чтобы установить вертикальное выравнивание по центру, добавьте свойство <code> vertical-align </code> со значением <code> middle </code>.Выделенный раздел следующего блока кода демонстрирует, как добавить это в <code> styles.css </code>: </p> <p> styles.css </p> <pre> <code> body { семейство шрифтов: без засечек; } Таблица { граница-коллапс: коллапс; граница: сплошной черный 1px; выравнивание текста: центр; вертикальное выравнивание: по центру; } ... </code> </pre> <p> Сохраните изменения в <code> styles.css </code>, а затем вернитесь в веб-браузер, чтобы перезагрузить <code> index.html </code>. Теперь содержимое ячейки будет центрировано по горизонтали и вертикали внутри ячейки.Обратите внимание, что <code> <th> </code> ячеек не изменили свой интервал. Это связано с тем, что заголовки таблиц по умолчанию имеют центрированный текст. </p> <p> Вертикальное центрирование не будет сразу видно по содержимому, как оно есть, но если содержимое одной ячейки переносится на вторую строку, остальные ячейки в строке выровняют свое содержимое по вертикали. </p> <p> На следующем изображении показано, как это будет отображаться в браузере: </p> <p> </p> <p> В этом разделе вы переместили свойство границы из ячеек таблицы во всю таблицу.Вы также задали новое семейство шрифтов для страницы и изменили выравнивание по умолчанию для содержимого ячеек таблицы. В следующем разделе вы добавите стили к элементу <code> <caption> </code> таблицы и узнаете больше о его назначении. </p> <h3><span class="ez-toc-section" id="i-35"> Стилизация заголовка таблицы </span></h3> <p> Элемент <code> <caption> </code> обеспечивает контекст как для зрячих, так и для незрячих читателей таблицы и отображается над таблицей, независимо от того, где <code> <caption> </code> находится внутри элемента <code> <table> </code>.Для пользователей программ чтения с экрана и шрифтов Брайля <code> <caption> </code> обеспечивает четкий контекст назначения таблицы, особенно когда на странице есть несколько таблиц. </p> <p> Поскольку <code> <caption> </code> - это элемент, который встречается только внутри элемента <code> <table> </code>, его можно стилизовать с помощью селектора типа <code> caption </code>. По умолчанию для заголовка <code> </code> - это центрированный текст с унаследованным размером, семейством и обычным весом. </p> <p> Чтобы начать изменение стилей элемента <code> <caption> </code>, откройте <code> styles.css </code> в вашем текстовом редакторе. Добавьте селектор <code> caption </code> после селектора <code> table </code>, чтобы сохранить ваш CSS в логическом порядке потока. Затем, используя свойства <code> font-weight </code>, <code> font-size </code>, <code> text-align </code> и <code> color </code>, создайте крупный, полужирный, с выравниванием по левому краю и темно-серый заголовок. Выделенный CSS в следующем блоке кода демонстрирует, как это будет отформатировано: </p> <p> styles.css </p> <pre> <code> таблица { граница-коллапс: коллапс; } подпись { font-weight: жирный; размер шрифта: 24 пикселя; выравнивание текста: слева; цвет: # 333; } th, td { граница: сплошной черный 1px; отступ: 8 пикселей; } ... </code> </pre> <p> Сохраните изменения в <code> styles.css </code> и перезагрузите <code> index.html </code> в своем браузере. Как показано на следующем изображении, содержание заголовка теперь намного больше и полужирно, создавая заголовок для таблицы: </p> <p> </p> <p> Затем необходимо немного места между заголовком <code> </code> и визуальной частью таблицы <code> </code>. Вернитесь к <code> styles.css </code> в текстовом редакторе, чтобы добавить дополнительный интервал к заголовку <code> </code>. </p> <p> Заголовок <code> </code> может принимать свойства интервала <code> margin </code> и <code> padding </code>.Поскольку интервал необходим только под заголовком <code> </code>, добавьте свойство <code> margin-bottom </code> в блок селектора со значением <code> 16px </code>. Выделенная строка следующего блока кода показывает, как это применять: </p> <p> styles.css </p> <pre> <code> caption { font-weight: жирный; размер шрифта: 24 пикселя; выравнивание текста: слева; цвет: # 333; нижнее поле: 16 пикселей; } </code> </pre> <p> Сохраните изменения в файле <code> styles.css </code> и обновите индекс <code>.html </code> в веб-браузере. Заголовок <code> </code> теперь имеет больше места между текстом и таблицей, как показано на следующем изображении: </p> <p> </p> <p> В этом разделе вы создали собственные стили для элемента <code> <caption> </code> таблицы. Вы также узнали, что <code> <caption> </code> является важным элементом для предоставления информационного контекста тем, кто использует вспомогательные технологии для чтения таблицы. В следующем разделе вы примените стили к верхней строке заголовка таблицы.</p> <p> Затем вы примените стили к заголовкам верхней строки. Элемент <code> <thead> </code> будет содержать верхнюю строку, поэтому все стили для него могут быть применены непосредственно к этому элементу. Цель состоит в том, чтобы создать темно-серый фон с белым текстом в верхнем регистре. </p> <p> Для начала откройте <code> styles.css </code> в текстовом редакторе. Создайте новый селектор типа <code> thead </code>. В блоке селектора добавьте свойство <code> background-color </code> со значением <code> # 333 </code>, которое создаст темно-серый цвет.Затем добавьте свойство <code> color </code> со значением <code> white </code>: </p>. <p> styles.css </p> <pre> <code> ... подпись { font-weight: жирный; размер шрифта: 24 пикселя; выравнивание текста: слева; цвет: # 333; нижнее поле: 16 пикселей; } thead { цвет фона: # 333; цвет белый; } ... </code> </pre> <p> Сохраните изменения в <code> styles.css </code> и обновите <code> index.html </code> в браузере. Верхняя строка заголовка теперь визуально отличительна, с сплошным черным фоном и жирным белым текстом.На следующем изображении показано, как это будет отображаться в браузере: </p> <p> </p> <p> Затем, чтобы добавить немного эстетики верхнего заголовка, вернитесь к <code> styles.css </code> в текстовом редакторе. Измените размер текста, добавив свойство <code> font-size </code> со значением <code> 0.875rem </code>, что немного уменьшит размер шрифта. Затем, чтобы сделать все буквы заглавными, добавьте свойство <code> text-transform </code> с <code> прописными буквами </code> в качестве значения. Наконец, чтобы оставить промежуток между буквами, используйте свойство <code> letter-spacing </code> и установите значение <code> 2% </code>.Это создаст достаточно места между заглавными буквами, чтобы они не сгруппировались, что упростит их чтение. </p> <p> Выделенный CSS в следующем блоке кода демонстрирует, как форматировать эти стили: </p> <p> styles.css </p> <pre> <code> thead { цвет фона: # 333; цвет белый; размер шрифта: 0.875rem; преобразование текста: прописные буквы; межбуквенный интервал: 2%; } </code> </pre> <p> Сохраните изменения в файле <code> styles.css </code> и затем вернитесь в браузер, чтобы обновить индекс <code>.html </code>. Как показано на следующем изображении, текст теперь написан в верхнем регистре, немного меньше по размеру, чем содержимое ячейки, но иерархически четкий как заголовок: </p> <p> </p> <p> На этом шаге вы использовали несколько свойств, чтобы придать различимый стиль верхней строке заголовка. HTML для этой части таблицы уже был доступен для незрячих и настойчивых пользователей технологий. Теперь визуальные стили предоставляют больше контекстной информации. Далее вы продолжите работу с наглядными пособиями, добавляя чередующиеся цвета строк.</p> <h3><span class="ez-toc-section" id="i-36"> Добавление стилей полосатых строк в таблицу </span></h3> <p> Затем, чтобы создать чередующиеся цвета полосок, вам нужно будет использовать так называемый селектор псевдокласса. Существуют различные виды псевдоклассов, и в этом случае вы будете использовать псевдокласс <code>: nth-child () </code>. Скобки после <code>: nth-child </code> могут принимать различные числа и значения слов для создания чередующегося стиля, который будет включать <code> нечетных </code> и <code> четных </code> значений. </p> <p> Для начала откройте <code> стилей.css </code> в вашем текстовом редакторе. Псевдокласс <code>: nth-child () </code> работает, применяя его к родственным элементам. В данном случае это будет <code> <tr> </code> элементов внутри <code> <tbody> </code>. Чтобы создать первое значение, напишите селектор комбинатора <code> tbody tr </code>, за которым сразу следует псевдокласс <code>: nth-child (odd) </code>. В этом блоке селектора установите для свойства <code> background-color </code> значение <code> #fff </code>, шестнадцатеричное сокращение для белого. Затем создайте другой селектор в том же формате, но используйте <code> даже </code> вместо <code> нечетных </code> и установите для свойства <code> background-color </code> светло-серое значение <code> #eee </code>.</p> <p> Выделенный CSS в следующем блоке кода демонстрирует, как это будет отображаться в вашем текстовом редакторе: </p> <p> styles.css </p> <pre> <code> ... .cell-highlight { цвет фона: золото; font-weight: жирный; } tbody tr: nth-child (odd) { цвет фона: #fff; } tbody tr: nth-child (even) { цвет фона: #eee; } </code> </pre> <p> Сохраните изменения в <code> styles.css </code>, затем вернитесь к <code> index.html </code> в своем браузере и обновите страницу. У второй строки теперь будет светло-серый фон, и хотя он не будет выглядеть иначе, нечетные строки теперь имеют определенный белый фон вместо прозрачного по умолчанию.По мере добавления строк эти стили будут чередоваться от белого к светло-серому. На следующем изображении показано, как это будет отображаться в браузере: </p> <p> </p> <p> В этом разделе вы использовали псевдокласс <code>: nth-child () </code> для создания чередующихся цветов строк в основной части таблицы. В последнем разделе этого руководства вы объедините то, что вы узнали в предыдущих двух разделах, чтобы создать собственные стили для заголовков строк в левой части таблицы. </p> <p> Последний стиль этой таблицы - добавление синего фона к заголовкам оси Y в левой части таблицы.Это будет происходить в двух частях: первая будет аналогична разделу, стилизованному для верхней строки заголовка, путем нацеливания на <code>-е </code> ячеек в каждой строке. Затем вы создадите изменение цвета, используя тот же подход псевдокласса <code>: nth-child () </code> из предыдущего раздела. </p> <p> Чтобы применить основной синий фон, откройте файл <code> styles.css </code> в текстовом редакторе. Вам необходимо настроить таргетинг на <code> <th> </code> элементов в <code> <tbody> </code>, чтобы элементы <code> <th> </code> в <code> <thead> </code> не получили эти стили.Создайте селектор комбинатора <code> tbody th </code>, затем присвойте ему свойство <code> background-color </code> и значение <code> # 36c </code>. Примените свойство <code> color </code> со значением <code> #fff </code> или <code> white </code>. Наконец, чтобы задать выравнивание текста по левому краю, добавьте для свойства <code> text-align </code> значение <code> left </code>: </p>. <p> styles.css </p> <pre> <code> ... tbody tr: nth-child (even) { цвет фона: #eee; } tbody th { цвет фона: # 36c; цвет: #fff; выравнивание текста: слева; } </code> </pre> <p> Сохраните изменения в <code> стилей.css </code>, а затем обновите <code> index.html </code> в своем браузере. Как показано на следующем изображении, заголовки строк теперь имеют характерный синий цвет с белым текстом: </p> <p> </p> <p> Наконец, чтобы перенести чередующиеся цвета строк в заголовок строки, вернитесь к <code> styles.css </code> в текстовом редакторе. Чтобы добиться того же эффекта, что и строка данных, вам понадобится селектор псевдокласса <code>: nth-child () </code>. Поскольку синий фон уже установлен в селекторе комбинатора <code> tbody th </code>, вам нужно только <code>: nth-child (even) </code>, чтобы настроить его на более темный синий цвет.Однако из-за того, как работает селектор псевдокласса <code>: nth-child () </code>, вам все равно нужно будет применить его к элементу <code> <tr> </code>, а не к элементу <code> <th> </code>, поскольку строка (<code> tr </code>) эффект достигается подсчетом. Для этого потребуется более сложный селектор комбинатора <code> tbody tr: nth-child (even) th </code> со свойством <code> background-color </code>, установленным на <code> # 25c </code>. </p> <p> В следующем блоке кода показано, как отформатирован этот CSS: </p> <p> стилей.css </p> <pre> <code> ... tbody th { цвет фона: # 36c; цвет: #fff; выравнивание текста: слева; } tbody tr: nth-child (even) th { цвет фона: # 25c; } </code> </pre> <p> Сохраните изменения в <code> styles.css </code>, затем вернитесь в свой браузер в последний раз и обновите <code> index.html </code>. Теперь стиль завершен с чередованием цветов строк в заголовках строк и данных, как показано на следующем изображении: </p> <p> </p> <p> В этом разделе вы применили стили к заголовкам строк и перенесли то, что было изучено в предыдущих разделах, для точного нацеливания на чередующийся цвет фона.</p> <h3><span class="ez-toc-section" id="i-37"> Заключение </span></h3> <p> Теперь вы успешно построили таблицу и изучили несколько практических свойств CSS и типов селекторов для применения к табличным данным. В дальнейшем вы можете создавать более сложные таблицы, которые развивают эти концепции. Вы также можете использовать селектор <code> nth-child </code> для создания чередующихся стилей в маркированных списках или навигационных ссылках. Таблицы HTML очень полезны для представления различных видов табличных данных, а возможности HTML и CSS позволяют создавать самые разные типы таблиц.</p> <p> Если вы хотите прочитать больше руководств по CSS, попробуйте другие руководства из серии «Как стилизовать HTML с помощью CSS». </p> Таблицы <h2><span class="ez-toc-section" id="-_Pure"> - Pure </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <h3><span class="ez-toc-section" id="i-38"> Таблица по умолчанию </span></h3> <p> Чтобы стилизовать таблицу HTML, добавьте имя класса <code> pure-table </code>. Этот класс добавляет к элементам таблицы отступы и границы, а также подчеркивает заголовок. </p> <table> <thead> <tr> <th> # </th> <th> Марка </th> <th> Модель </th> <th> Год </th> </tr> </thead> <tbody> <tr> <td> 1 </td> <td> Honda </td> <td> Accord </td> <td> 2009 </td> </tr> <tr> <td> 2 </td> <td> Тойота </td> <td> Камри </td> <td> 2012 </td> </tr> <tr> <td> 3 </td> <td> Hyundai </td> <td> Элантра </td> <td> 2010 </td> </tr> </tbody> </table> <pre> <code> <таблица> <thead> <tr> <th> # </th> <th> Сделать </th> <th> Модель </th> <th> Год </th> </tr> </thead> <tbody> <tr> <td> 1 </td> <td> Honda </td> <td> Соглашение </td> <td> 2009 </td> </tr> <tr> <td> 2 </td> <td> Toyota </td> <td> Камри </td> <td> 2012 </td> </tr> <tr> <td> 3 </td> <td> Hyundai </td> <td> Элантра </td> <td> 2010 </td> </tr> </tbody> </table> </code> </pre> <h3><span class="ez-toc-section" id="i-39"> Таблица с границами </span></h3> <p> Чтобы добавить горизонтальные и вертикальные границы ко всем ячейкам, добавьте имя класса <code> с границами чистой таблицы </code> к элементу <code> <table> </code>.</p> <table> <thead> <tr> <th> # </th> <th> Марка </th> <th> Модель </th> <th> Год </th> </tr> </thead> <tbody> <tr> <td> 1 </td> <td> Honda </td> <td> Accord </td> <td> 2009 </td> </tr> <tr> <td> 2 </td> <td> Тойота </td> <td> Камри </td> <td> 2012 </td> </tr> <tr> <td> 3 </td> <td> Hyundai </td> <td> Элантра </td> <td> 2010 </td> </tr> </tbody> </table> <pre> <code> <таблица> <thead> <tr> <th> # </th> <th> Сделать </th> <th> Модель </th> <th> Год </th> </tr> </thead> <tbody> <tr> <td> 1 </td> <td> Honda </td> <td> Соглашение </td> <td> 2009 </td> </tr> <tr> <td> 2 </td> <td> Toyota </td> <td> Камри </td> <td> 2012 </td> </tr> <tr> <td> 3 </td> <td> Hyundai </td> <td> Элантра </td> <td> 2010 </td> </tr> </tbody> </table> </code> </pre> <h3><span class="ez-toc-section" id="i-40"> Таблица с горизонтальными границами </span></h3> <p> Если вы предпочитаете только горизонтальные линии, добавьте имя класса <code> pure-table-horizontal </code> в элемент <code> <table> </code>.</p> <table> <thead> <tr> <th> # </th> <th> Марка </th> <th> Модель </th> <th> Год </th> </tr> </thead> <tbody> <tr> <td> 1 </td> <td> Honda </td> <td> Accord </td> <td> 2009 </td> </tr> <tr> <td> 2 </td> <td> Тойота </td> <td> Камри </td> <td> 2012 </td> </tr> <tr> <td> 3 </td> <td> Hyundai </td> <td> Элантра </td> <td> 2010 </td> </tr> </tbody> </table> <pre> <code> <таблица> <thead> <tr> <th> # </th> <th> Сделать </th> <th> Модель </th> <th> Год </th> </tr> </thead> <tbody> <tr> <td> 1 </td> <td> Honda </td> <td> Соглашение </td> <td> 2009 </td> </tr> <tr> <td> 2 </td> <td> Toyota </td> <td> Камри </td> <td> 2012 </td> </tr> <tr> <td> 3 </td> <td> Hyundai </td> <td> Элантра </td> <td> 2010 </td> </tr> </tbody> </table> </code> </pre> <h3><span class="ez-toc-section" id="i-41"> Полосатая таблица </span></h3> <p> Большие таблицы легче анализировать визуально, если строки легко различимы.Добавление имени класса <code> pure-table-odd </code> к каждому другому элементу <code> <tr> </code> изменяет фон строки и создает эффект в стиле зебры. </p> <p> <b> Примечание: </b> В браузерах, поддерживающих псевдоселектор CSS3 <code> nth-child </code>, можно использовать более простой подход. Имя класса <code> pure-table-striped </code> может быть добавлено к элементу <code> <table> </code>, и чередование в стиле зебры произойдет автоматически. </p> <table> <thead> <tr> <th> # </th> <th> Марка </th> <th> Модель </th> <th> Год </th> </tr> </thead> <tbody> <tr> <td> 1 </td> <td> Honda </td> <td> Accord </td> <td> 2009 </td> </tr> <tr> <td> 2 </td> <td> Тойота </td> <td> Камри </td> <td> 2012 </td> </tr> <tr> <td> 3 </td> <td> Hyundai </td> <td> Элантра </td> <td> 2010 </td> </tr> <tr> <td> 4 </td> <td> Форд </td> <td> Фокус </td> <td> 2008 </td> </tr> <tr> <td> 5 </td> <td> Nissan </td> <td> Sentra </td> <td> 2011 </td> </tr> <tr> <td> 6 </td> <td> BMW </td> <td> M3 </td> <td> 2009 </td> </tr> <tr> <td> 7 </td> <td> Honda </td> <td> Гражданский </td> <td> 2010 </td> </tr> <tr> <td> 8 </td> <td> Киа </td> <td> Душа </td> <td> 2010 </td> </tr> </tbody> </table> <pre> <code> <таблица> <thead> <tr> <th> # </th> <th> Сделать </th> <th> Модель </th> <th> Год </th> </tr> </thead> <tbody> <tr> <td> 1 </td> <td> Honda </td> <td> Соглашение </td> <td> 2009 </td> </tr> <tr> <td> 2 </td> <td> Toyota </td> <td> Камри </td> <td> 2012 </td> </tr> <tr> <td> 3 </td> <td> Hyundai </td> <td> Элантра </td> <td> 2010 </td> </tr> <tr> <td> 4 </td> <td> Форд </td> <td> В центре внимания </td> <td> 2008 </td> </tr> <tr> <td> 5 </td> <td> Nissan </td> <td> Sentra </td> <td> 2011 </td> </tr> <tr> <td> 6 </td> <td> BMW </td> <td> M3 </td> <td> 2009 </td> </tr> <tr> <td> 7 </td> <td> Honda </td> <td> Гражданский </td> <td> 2010 </td> </tr> <tr> <td> 8 </td> <td> Киа </td> <td> Душа </td> <td> 2010 </td> </tr> </tbody> </table> </code> </pre> <h2><span class="ez-toc-section" id="HTML-_CSS"> HTML-таблицы со стилями CSS </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <h4><span class="ez-toc-section" id="_CSS-3"> Дизайн CSS-таблиц </span></h4> Модель таблицы <p> HTML позволяет нам упорядочивать данные в табличном представлении, используя модель горизонтальных строк и вертикальных столбцов.В этом уроке свойства стиля <b> CSS </b> разбиты на соответствующие группы и показано, как использовать их для форматирования таблиц HTML с помощью CSS вместо атрибутов тегов HTML. </p> <p> Простая структура таблицы HTML с 3 строками и 3 столбцами. </p> <br/> <h5><span class="ez-toc-section" id="_HTML"> Исходный код HTML </span></h5> <table border="1"> <tr> <th> Рулон No </th> <th> Имя </th> <th> Команда </th> </tr> <tr> <td> 1001 </td> <td> Иоанна </td> <td> Красный </td> </tr> <tr> <td> 1002 </td> <td> Петр </td> <td> Синий </td> </tr> <tr> <td> 1003 </td> <td> Генри </td> <td> зеленый </td> </tr> </table> <h4><span class="ez-toc-section" id="_CSS-4"> Как установить ширину и высоту таблицы в CSS </span></h4> <p> Чтобы указать ширину и высоту таблицы, используйте свойства CSS <b> width, height </b>.Здесь ширина таблицы равна 30%, а высота td установлена ​​на 40 пикселей. </p> Таблица { ширина: 40%; } тд { высота: 40 пикселей; } <h5><span class="ez-toc-section" id="i-42"> вывод </span></h5> <br/> <h5><span class="ez-toc-section" id="i-43"> Исходный код </span></h5> <table border="1"> <tr> <th> Рулон No </th> <th> Имя </th> <th> Команда </th> </tr> <tr> <td> 1001 </td> <td> Иоанна </td> <td> Красный </td> </tr> <tr> <td> 1002 </td> <td> Петр </td> <td> Синий </td> </tr> <tr> <td> 1003 </td> <td> Генри </td> <td> зеленый </td> </tr> </table> <h4><span class="ez-toc-section" id="_CSS-5"> Как установить ширину столбца таблицы в CSS </span></h4> <p> Чтобы указать ширину столбца в CSS, используйте свойство <b> width </b> для td.</p> тд { ширина: 170 пикселей; } <h5><span class="ez-toc-section" id="i-44"> вывод </span></h5> <br/> <h4><span class="ez-toc-section" id="CSS-3"> CSS Высота строки таблицы </span></h4> <p> Вы можете установить высоту строки с помощью свойства CSS <b> line-height </b>, которое оно устанавливает для каждого tr. </p> tr { высота строки: 50 пикселей; } <p> Когда вы устанавливаете это свойство, каждая строка имеет высоту 50 пикселей. </p> <br/> <h4><span class="ez-toc-section" id="CSS-4"> CSS Граница таблицы </span></h4> <p> Чтобы указать границу таблицы в CSS, используйте свойство CSS border. </p> таблица, th, td { граница: сплошной зеленый 2px; } <p> В приведенном выше коде CSS свойство границы применяется к таблице, заголовку таблицы и каждому TD.</p> <br/> <h5><span class="ez-toc-section" id="i-45"> Полный исходный код </span></h5> <table> <tr> <th> Рулон No </th> <th> Имя </th> <th> Команда </th> </tr> <tr> <td> 1001 </td> <td> Иоанна </td> <td> Красный </td> </tr> <tr> <td> 1002 </td> <td> Петр </td> <td> Синий </td> </tr> <tr> <td> 1003 </td> <td> Генри </td> <td> зеленый </td> </tr> </table> <h4><span class="ez-toc-section" id="CSS-5"> CSS Свернуть границы таблицы </span></h4> <p> Свойство CSS Collapse принимает два значения: отдельные и свернуть.</p> <p> <b> отдельный: </b> Отдельное значение заставляет все ячейки иметь свои собственные независимые границы и допускает пробелы между этими ячейками. </p> <p> <b> collapse: </b> Это значение сворачивает все пробелы между границами таблицы и ячейками, так что вы можете видеть как однострочную границу. </p> Таблица { граница-коллапс: коллапс; } <h5><span class="ez-toc-section" id="i-46"> вывод </span></h5> <br/> <h4><span class="ez-toc-section" id="CSS_Table_Text_Align"> CSS Table Text Align </span></h4> <p> В CSS можно выровнять текст по горизонтали и вертикали.Для горизонтального выравнивания вы можете использовать свойство CSS text-align, а для вертикального вы можете использовать свойство vertical-align. </p> <br/> <br/> тд { выравнивание текста: вправо; вертикальное выравнивание: снизу; } <h5><span class="ez-toc-section" id="i-47"> вывод </span></h5> <br/> <h4><span class="ez-toc-section" id="CSS_Table_Cell_Padding"> CSS Table Cell Padding </span></h4> <p> CellPadding используется для управления пространством между содержимым ячейки и границами ячейки. Чтобы указать заполнение ячеек в CSS, используйте свойство CSS padding. </p> тд { отступ: 10 пикселей; } th { отступ: 20 пикселей; } <h5><span class="ez-toc-section" id="i-48"> вывод </span></h5> <br/> <h4><span class="ez-toc-section" id="_CSS-6"> Расстояние между ячейками таблицы CSS </span></h4> <p> Атрибут Cellspacing помещает пространство вокруг каждой ячейки в таблице.Чтобы указать интервал между ячейками в CSS, используйте свойство CSS border-spacing. </p> таблица, th, td { граница: сплошной зеленый 2px; интервал границы: 20 пикселей; } <h5><span class="ez-toc-section" id="i-49"> вывод </span></h5> <br/> <h5><span class="ez-toc-section" id="i-50"> Полный исходный код </span></h5> <table> <tr> <th> Рулон No </th> <th> Имя </th> <th> Команда </th> </tr> <tr> <td> 1001 </td> <td> Иоанна </td> <td> Красный </td> </tr> <tr> <td> 1002 </td> <td> Петр </td> <td> Синий </td> </tr> <tr> <td> 1003 </td> <td> Генри </td> <td> зеленый </td> </tr> </table> <br/> <h2><span class="ez-toc-section" id="_CSS-7"> Свойства CSS / стили таблицы / цвет фона таблицы </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <h3><span class="ez-toc-section" id="i-51"> фоновый цвет: ***; </span></h3> <p> Свойство background-color определяет цвет фона элемента.</p> <p> Цвет фона ячеек можно указать, применив это свойство к элементам TABLE, TR, TD или TH. </p> <pre> <code> <mark> table { цвет фона: # bde9ba; } </mark> </code> </pre> <table> <tr> <th> Имущество </th> <th> Значение </th> <th> Пояснение </th> </tr> <tr> <td> цвет фона </td> <td> код цвета или название </td> <td> цвет фона </td> </tr> </table> <p> Значение по умолчанию - «прозрачный». </p> <h4><span class="ez-toc-section" id="i-52"> Примеры отображения </span></h4> <p> При применении этого свойства к элементу ТАБЛИЦА.</p> <p> <code> таблица {цвет фона: # bde9ba; } </code> </p> <table> <tr> <td> Ячейка A </td> <td> Ячейка B </td> </tr> <tr> <td> Ячейка C </td> <td> Ячейка D </td> </tr> </table> <p> При применении этого свойства к элементу TR. </p> <p> <code> tr.example {background-color: # bde9ba; } </code> </p> <table> <tr> <td> Ячейка A </td> <td> Ячейка B </td> </tr> <tr> <td> Ячейка C </td> <td> Ячейка D </td> </tr> </table> <p> При применении этого свойства к элементу TD (TH).</p> <p> <code> td.example {цвет фона: # bde9ba; } </code> </p> <table> <tr> <td> Ячейка A </td> <td> Ячейка B </td> </tr> <tr> <td> Ячейка C </td> <td> Ячейка D </td> </tr> </table> <h4><span class="ez-toc-section" id="i-53"> Пример </span></h4> <pre> <code> <html> <head> <title> Указатель тегов <таблица>
Заголовок A Заголовок B Заголовок C
Ячейка A Ячейка B Ячейка C
Ячейка D Ячейка E Ячейка F
Выход
Заголовок A Рубрика B Заголовок C
Ячейка A Ячейка B Ячейка C
Ячейка D Ячейка E Ячейка F
Стили таблиц
Связанный документ

CSS Ширина стола

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

Чтобы использовать CSS для управления шириной таблицы, используйте свойство CSS width . Например:

<таблица>

Если вы используете встроенную таблицу стилей или внешнюю таблицу стилей, ширина таблицы также может быть объявлена ​​там - просто вызовите ее класс.Например:

HTML-код (для вашего HTML-документа): <таблица> Код CSS (для вашей таблицы стилей): table.wide-table {ширина: 100%; }

Примеры

Вот несколько примеров таблиц разной ширины.

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Вы также можете использовать свойство CSS table-layout, чтобы ускорить загрузку больших таблиц.

Дополнительную информацию о таблицах см. В Учебном пособии по таблицам HTML и в генераторе таблиц HTML.

Добавьте стиль к определенным столбцам или строкам в приложении «Таблица» - Документация - Поддержка Awesome Table

Ваши варианты использования или потребности требуют стилизации определенных столбцов или строк (или их содержимого). Тип визуализации «Таблица» позволяет отображать их определенным образом. В этой статье вы узнаете простые приемы CSS для персонализации столбцов и строк.

1. Использование CSS3: селектор nth-child ()

Если вы хотите, чтобы применил стиль к определенному столбцу или строке (но не к другим), используйте свойство : nth-child () из CSS3. Этот селектор используется для применения стиля к элементу с номером «n» внутри родительского элемента .

Вы можете использовать : nth-child () несколькими способами:

  • : nth-child (3) - используйте число в качестве параметра, чтобы указать стиль для третьего элемента (например).
  • : nth-child (нечетный) или: nth-child (четный) - используйте « odd » или « even » в качестве параметра, чтобы указать стиль для всех нечетных или четных элементов.
  • : nth-child (4n) - используйте ' number n ' в качестве параметра, чтобы указать стиль для каждого 4-го цикла элемента (например, выделите 4-ю строку таблицы красным цветом, затем следующую 4-ю строку после и так далее).

info Включите ! Important в каждое правило CSS, чтобы изменения вступили в силу.

2. Применить стиль к определенным столбцам

Чтобы добавить стиль к определенным столбцам, используйте следующий селектор в вашем CSS:

 1
2
3 
 tbody> tr>: nth-child (your_parameter) {
/ * здесь ваш CSS * /
}

Вот простой пример (изменение цвета шрифта, выравнивания и ширины второго столбца):

Скопируйте этот шаблон

 1
2
3 
4
5
 tbody> tr>: nth-child (2) {
цвет: красный;
ширина: 200 пикселей;
выравнивание текста: по центру;
}

3.Применить стиль к определенным строкам

Чтобы добавить стиль к определенным столбцам, используйте следующий селектор в вашем CSS:

 1
2
3 
 tbody>: nth-child (your_parameter) {
/ * здесь ваш css * /
}

Вот простой пример (изменение цвета шрифта и размера шрифта второй строки):

Скопируйте этот шаблон

 1
2
3 
 tbody>: nth-child (2) {
цвет: красный;
font-weight: жирный;
}

CSS - Столбцы таблицы

CSS - Столбцы таблицы

Столбцы таблицы

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

Какие столбцы

Любая таблица разбита на строки ( ). Кроме того, вы можете указать столбцы таблицы с помощью тега .

HTML
<таблица>
   
   

 Первый ТД первого ТУ 
 Вторая ТД первого ТУ 
 Третий ТД первого ТУ 
 Четвертый ТД первого ТУ 


 Первый ТД второго ТУ 
 Вторая ТД второго ТУ 
 Третий ТД второго ТУ 
 Четвертый ТД второго ТУ 


 

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

Ограничения

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

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

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

фоновый цвет и цвет

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

<таблица>



 
Первая TD первой TR Вторая TD первой TR Третий ТД первого ТР Четвертая ТД первого ТР
Первый TD второго TR Вторая TD второго TR Третий ТД второго ТР Четвертая ТД второго ТР

Чтобы ячейки оставались читабельными, мне также нужен белый цвет текста.Это, к сожалению, не Работа. Большинство браузеров не подчиняются цвету : #ffffff , потому что W3C не позволяет цвет декларация на столбцах.

Explorer Windows - исключение: он разрешает цвет. В этом я склоняюсь на сторону Microsoft; Я не понимаю, почему нельзя использовать все обычные стили на столбцы.

Строки и ячейки имеют приоритет над столбцами

Помните общее правило: любой стиль строки или ячейки имеет приоритет над стилем столбца.Следовательно background-color s из и применены а те, что в столбцах, игнорируются.

 Первый ТД первого ТУ 
[... так далее ...]
 // второй TR
 
Первая TD первой TR Вторая TD первой TR Третий ТД первого ТР Четвертая ТД первого ТР
Первый TD второго TR Вторая TD второго TR Третий ТД второго ТР Четвертая ТД второго ТР

граница

Давайте применим границу ко второму столбцу.Это разрешенное объявление, но оно не работает сразу:


 
Первая TD первой TR Вторая TD первой TR Третий ТД первого ТР Четвертая ТД первого ТР
Первый TD второго TR Вторая TD второго TR Третий ТД второго ТР Четвертая ТД второго ТР

Без границы.Это правильное поведение: объявление границы на столбец действителен только в том случае, если вся таблица имеет border-collapse: collapse .

<таблица>

 
Первая TD первой TR Вторая TD первой TR Третий ТД первого ТР Четвертая ТД первого ТР
Первый TD второго TR Вторая TD второго TR Третий ТД второго ТР Четвертая ТД второго ТР

После добавления border-collapse граница работает.К сожалению, браузеры не согласны с точным размером границы. Браузеры WebKit делают это:

Другие браузеры добавляют среднюю границу:

ширина

В столбцах ширина означает min-width , что соответствует с определениями ширины элементов таблицы в целом. Более странно, что объявление шириной считается для каждого столбца , охваченного тегом .Следовательно, область второго тега имеет общую ширину 10em + интервал ячеек.



 

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

Я использую этот прием во всех своих таблицах совместимости, где я определяю ширину TD через столбцы. Точная ширина зависит от диапазона col. Я делаю это так, чтобы шесть столбцов IE имели одинаковое количество с двумя столбцами Firefox или тремя столбцами Chrome / Yandex.

видимость: разрушение

Обычно видимость принимает три значения:

  1. видимый : элемент видимый. Это значение по умолчанию.
  2. скрыто : элемент скрыт, но занимаемое им пространство остается пустым.
  3. collapse : элемент скрыт, и пространство, которое он занимает, также удалено.

Однако в спецификации четко указано, что в случае столбцов только collapse является допустимым значением.


 
Первая TD первой TR Вторая TD первой TR Третий ТД первого ТР Четвертая ТД первого ТР
Первый TD второго TR Вторая TD второго TR Третий ТД второго ТР Четвертая ТД второго ТР
.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *