Для начала я бы хотел поговорить об использовании свойство

1
outline
, которое на первый взгляд кажется подобным свойству
1
border
.

Однако у свойства

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

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

Например, таким образом:

div {outline: 1px solid #ff0000}

Пример CSS-разметки

Вы можете решить, что точно так можно сделать и с помощью свойства

1
border
, но в действительности это не так. Причина заключается в том, что границы (
1
border
) нарушают разметку. А свойство
1
outline
не нарушает ее.

Вот что я имею ввиду: предположим, у вас есть три колонки

1
div
‘ов, которые должны располагаться внутри контейнера-родителя
1
div
с шириной 960px. (Если вам не нравятся пиксели, то можете применить для этой же цели
1
em
, проценты или любую другую единицу измерения).

Для всех трех

1
div
‘ов-потомков устанавливаем правила
1
float: left; width: 33.33%
и попытаемся визуально обозначить местоположение в разметке каждого из блоков.

Если ко всем трем блокам вы добавите свойство

1
border: 1px solid #ff0000;
, то последний из этих трех опустится вниз и расположиться под двумя первыми:

CSS-разметка с помощью border

Это произошло потому, что каждый из трех блоков

1
div
имеет ширину 320px; помимо этого справа и слева к каждому блоку добавлена граница толщиной в
1
1px
, что делает ширину блока равной, как минимум,
1
322px
.

Умножте это значение ширины на 3 (количество блоков-колонок) и в результате получиться общая ширина 966px, что явно больше ширины блока-родителя 960px. Результат для браузера - сместить последний блок вниз!

Именно по этой причине свойство

1
border
нарушает разметку. Свойство
1
outline
, с другой стороны, не нарушает ее. С помощью него вокруг элементов рисуется линия; к примеру, в нашем случае все три блока
1
div
со свойством
1
outline: 1px solid #ff0000;
разместятся друг рядом с другом внутри блока-родителя.

Не имеет значения, какой толщины вы сделаете

1
outline
, блоки
1
div
никогда не сдвинуться и не нарушат разметку (это касается не только блока
1
div
, а любого элемента страницы). Линии сделают перекрытие друг друга, как показано на рисунке ниже:

CSS-разметка с помощью outlines

Сразу становится ясно преимущество использования

1
outline
при создании разметки. Если в процессе ее создания вам кажется, что что-то идет не так, вы легко можете “нарисовать” границы интересующего вас элемента, не опасаясь при этом нарушить разметку.

Другое отличие

1
outline
от
1
border
заключается в том, что
1
outline
“рисуется” обязательно вокруг всего элемента, по всем четырем его сторонам.

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

1
outline
или же правый
1
outline
, как вы это обычно делаете при работе с границами
1
border
. Может существовать только граница
1
outline
вокруг всех четырех сторон элемента, и не может быть по другому.

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

1
outline: 2px dashed yellow
, то она будет создана таковой вокруг всех сторон элемента.

Заметьте, что элемент может одновременно иметь оба свойства

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

Свойство outline и border для одного элемента

Если элемент также имеет

1
margin
, то эти поля рисуются вокруг границ
1
outline
; но при этом
1
outline
не изменяют поля
1
margin
и не замещают их.

Автор статьи: Eric Meyer - “Smashing CSS Professional Techniques for Modern Layout”


Два дня назад на смену моему старенькому ноутбуку Acer Extensa 5620 пришел новый, молодой и современный - ноутбук ASUS K56CM. Компьютер понравился всем - алюминиевый корпус, матовый экран, технические возможности на уровне бюджетного ноутбука с хорошей производительностью. В тому же очень тихий в работе - его почти не слышно.

Ноутбук ASUS K56CM

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

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

После раздумий и взвешиваний за\против я решил для себя все-же “заморочиться”, но поставить на ASUS K56CM систему Windows 7 вместо Windows 8. Хотя и предвидел некоторые трудности на этом пути, две главные из которых - это BIOS и драйвера под Windows 7. Проблема с BIOS заключается в снятии блокировки на переустановку ОС на этом ноутбуке. Проблема с драйверами - почти не проблема, но также возникли некоторые сложности.

Вход в BIOS ноутбука ASUS K56CM

Неожиданно для себя не смог сразу же войти в BIOS ноутбука, пришлось немного “поволноваться”. Но все оказалось просто.

Вход в BIOS ноутбука ASUS K56CM можно выполнить через клавиши (на выбор):

  • Tab+F2
  • Delete (который на NumPad)

Это два варианта, которые лично у меня сработали. Тут главное, чтобы нажать и держать нажатой клавишу с самого момента запуска ноутбука. Иначе момент “проскочит” и в BIOS не попадем.

Снятие блокировки в BIOS ASUS K56CM

После того, как попали в BIOS, нужно выполнить два действия.

Первым шагом заходим во вкладку Boot и включаем (Enabled) опцию Launch CSM:

Boot - Launch CSM - Enabled

Вторым шагом переходим на вкладку Security и отключаем (Disabled) опцию Secure Boot Control:

Security - Secure Boot Control - Disabled

Сохраняем изменения в BIOS и выходим из него, нажав клавишу F10.

Меню выбора загрузки ASUS K56CM

Когда нужные изменения внесены в BIOS, можно приступать к обычной процедуре установки Windows 7 с диска (я делал инсталляцию с него). Чтобы загрузиться с установочного диска, нужно открыть меню выбора загрузки. Для этого нужно нажать и держать нажатой клавишу Esc. Затем выбираем оптический дисковод и процесс запущен.

Но не стоит забывать одну вещь. Чтобы Windows 7 правильно встала и от Windows 8 не осталось и следа на ноутбуке ASUS K56CM, перед инсталляций необходимо полностью удалить все существующие разделы на жестком диске и создать новые, с соответствующим форматированием.

Делается это с помощью специальных программ для редактирования разделов жесткого диска. Такими программами являются Acronis Disk Director, Gparted и многие другие. Достаточно в поисковой строке Google ввести запрос: “программы редактирования разделов жесткого диска”. Есть платные и бесплатные - все дело вкуса и умения.

Драйвера под Windows 7 на ASUS K56CM

После успешной инсталляции ОС Windows 7 на ноутбук ASUS K56CM насущной задачей стала установка драйверов. Для этого поступил привычным для себя способом - с помощью диска DriverPack Solution 13 r399 Full Final.

Автоматически поставились все драйвера, кроме чипсета под Intel. Перед этим система сделала предупреждение, что драйвера ненадежны! Однако я понадеялся на авось - и ноутбук вылетел с синим экраном смерти при попытке инсталляции этих драйверов.

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

Список этих пакетов (которые не захотели ставиться из-под DriverPack Solution) таков:

  • Chipset_Intel_Win7_64_Z9301020.zip
  • DPTF_Intel_Win7_64_Z6011067.zip
  • IRST_Intel_Win7_64_Z11101006.zip
  • MEI_Intel_Win7_64_Z8101252.zip
  • Rapid_Start_Technology_NonUI_Win7_64_Z1001024.zip

ASUS-ские утилиты-приблуды скачивать и устанавливать не стал. Только систему загромождают. Windows 7 на моем ноутбуке ASUS K56CM до сих пор работает нормально, проблем нет.

На этом все.


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

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

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

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

Табель выходов с зелеными ячейками

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

Прекрасное и готовое решение моей задачи я нашел на сайте http://www.excel-vba.ru/. Даже не одно, а целых два решения, под разные условия. Ниже привожу последовательность шагов, которые привели меня к успеху.

Сразу скажу, что изображения были сделаны в Excel 2007. В Excel 2010 все несколько по другому, но запутаться невозможно, если что.

Режим “Разработчик” в Excel

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

Переходим в “Пуск - Параметры Excel” и находим в левом списке пункт “Надстройки”:

Excel - надстройка VBA

Выбираем в основном окне строчку “Пакет анализа - VBA” и жмем кнопочку “Перейти” в самом низу окна. Откроется еще одно окошко со списком доступных под Excel расширений (надстроек). Снова выбираем в этом списке “Пакет анализа - VBA” и соглашаемся, что хотим установить его, нажав кнопку “ОК”:

Excel - Пакет анализа VBA

Потребуется установочный диск с Microsoft Office на нем (или же подключение к Интернет) чтобы программа получила необходимые пакеты для инсталляции. Если установка прошла успешно, то в “Ленте” появиться пункт “Разработчик” (Excel 2010). Можно перейти в него через эту панель или же с помощью сочетания клавиш Alt + F11.

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

Вставка готовых функций в Excel VBA

Но есть готовые решения, которые я вставлю в виде кода с помощью меню “Insert - Module”. Просто берем отсюда код функций и вставляем в свой Excel. Затем сохраняем файл Excel с поддержкой VBA (макросов) и все готово для дальнейшей работы.

Вставленные функции появятся в списке формул таблицы:

Excel - пользовательские функции

Ниже представлен готовый код двух функций на VBA, написанных их автором Дмитрием Щербаковым. Первая функция с именем “CountByInteriorColor” выполняет подсчет количества ячеек по цвету заливки.

Вторая функция с именем “SumByInteriorColor” выполняет выборку ячеек по цвету заливки и суммирует все значения в этих ячейках.

Обе функции имеют одинаковый синтаксис и принимают три входных аргумента, первые два из которых обязательные, а третий - необязательный:

  • 1
    
    rRange
    - диапазон с ячейками для подсчета
  • 1
    
    rColorCell
    - ячейка-образец с цветом заливки
  • 1
    
    bSumHide
    -
    1
    
    ИСТИНА
    или
    1
    
    1
    учитывает скрытые ячейки;
    1
    
    ЛОЖЬ
    ,
    1
    
    0
    или опущен(по умолчанию) - скрытые ячейки не подсчитываются.

Функция подсчета количества ячеек

'---------------------------------------------------------------------------------------
' Procedure : CountByInteriorColor
' Author    : The_Prist(Щербаков Дмитрий)
'             http://www.excel-vba.ru
' Purpose   : Функция подсчета ячеек на основе цвета заливки.
' Аргументы:
'             rRange     - диапазон с ячейками для подсчета.
'             rColorCell - ячейка-образец с цветом заливки.
'             bSumHide   - ИСТИНА или 1 учитывает скрытые ячейки.
'                          ЛОЖЬ, 0 или опущен(по умолчанию) - скрытые ячейки не подсчитываются.
'---------------------------------------------------------------------------------------
Function CountByInteriorColor(rRange As Range, rColorCell As Range, Optional bSumHide As Boolean = False)
  Dim lColor As Long, rCell As Range, lCnt As Long, vVal
  lColor = rColorCell.Interior.Color
  For Each rCell In rRange
      If rCell.Interior.Color = lColor Then
          If rCell.EntireRow.Hidden Or rCell.EntireColumn.Hidden Then
              If bSumHide Then lCnt = lCnt + 1
          Else
              lCnt = lCnt + 1
          End If
      End If
  Next rCell
  CountByInteriorColor = lCnt
End Function

Синтаксис этой функции прост:

=CountByInteriorColor(D8:AG8;$E$65)

Функция подсчета суммы ячеек

'---------------------------------------------------------------------------------------
' Procedure : SumByInteriorColor
' Author    : The_Prist(Щербаков Дмитрий)
'             http://www.excel-vba.ru
' Purpose   : Функция суммирования ячеек на основе цвета заливки.
' Аргументы:
'             rRange     - диапазон с ячейками для суммирования.
'             rColorCell - ячейка-образец с цветом заливки.
'             bSumHide   - ИСТИНА или 1 учитывает скрытые ячейки.
'                          ЛОЖЬ, 0 или опущен(по умолчанию) - скрытые ячейки не суммируются.
'---------------------------------------------------------------------------------------
Function SumByInteriorColor(rRange As Range, rColorCell As Range, Optional bSumHide As Boolean = False)
  Dim lColor As Long, rCell As Range, dblSum As Double, vVal
  lColor = rColorCell.Interior.Color
  For Each rCell In rRange
      If rCell.Interior.Color = lColor Then
          vVal = rCell.Value
          If IsNumeric(vVal) Then
              If rCell.EntireRow.Hidden Or rCell.EntireColumn.Hidden Then
                  If bSumHide Then dblSum = dblSum + vVal
              Else
                  dblSum = dblSum + vVal
              End If
          End If
      End If
  Next rCell
  SumByInteriorColor = dblSum
End Function

Синтаксис этой функции следующий:

=SumByInteriorColor(D8:AG37;E63)

При вставке пользовательской функции “CountByInteriorColor” и “SumByInteriorColor” можно воспользоваться либо “Мастером функций”, либо произвести указание диапазона ячеек и ячейку-критерий вручную.

Описание рабочей формулы

Готовый пример работы функции “CountByInteriorColor” можно посмотреть на рисунке “Табель выходов с зелеными ячейками”. В нем подсчет отработанного времени производится по следующей формуле:

=((Сумма фактически отработанных часов) - (Норма часов выхода за месяц)) + ((Кол-во дней с переработкой)*4)

Фактически эта формула получается такой (смотри строку №13 на рисунке):

=(AH13-AI13) + (CountByInteriorColor(D13:AG13;$E$65)*4)

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


Селекторы стандарта CSS3 имеют поистине безграничные возможности для выделения HTML-элементов без создания дополнительной разметки (которая практически всегда применялась в предыдущих версиях CSS).

В этой статье я собираюсь менее чем за 5 минут выполнить стилизацию популярного детского стихотворения “Мерцай, звездочка, мерцай!”, используя CSS3-селекторы.

Кодируем стихотворение

Не существует единого мнения в вопросе, как следует выполнять HTML-разметку для стихотворения: большинство полагает, что каждый стих из стихотворения должен быть параграфом (

1
p
), а каждая строка стиха должна быть отделена от другой с помощью элемента
1
br
.

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

1
<poem>
,
1
<stanza>
и
1
<line>
. Однако маловероятно, что это будущее наступит в скором времени (если вообще наступит).

Разметка

В будущей разметке имеются три основных элемента:

  • заголовок;
  • подзаголовок с информацией об авторе;
  • само стихотворение, собственно.
<h1>
  Twinkle Twinkle Little Star
</h1>
<h2>
  by Jane Taylor, 1806
</h2>
<p>
  Twinkle, twinkle, little star,<br />
      How I wonder what you are!<br />
      Up above the world so high,<br />
      Like a diamond in the sky!
</p>
<p>
  When the blazing sun is gone,<br />
      When he nothing shines upon,<br />
      Then you show your little light,<br />
      Twinkle, twinkle, all the night.
</p>
<p>
  Then the traveller in the dark,<br />
      Thanks you for your tiny spark,<br />
      He could not see which way to go,<br />
      If you did not twinkle so.
</p>
<p>
  In the dark blue sky you keep,<br />
      And often through my curtains peep,<br />
      For you never shut your eye,<br />
      Till the sun is in the sky.
</p>
<p>
  As your bright and tiny spark,<br />
      Lights the traveller in the dark,&mdash;<br />
      Though I know not what you are,<br />
      Twinkle, twinkle, little star.
</p>

Стилизация заголовков

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

body {
  background: #fff;
  color: #111;
  font: 14px Baskerville, "Palatino Linotype", "Times New Roman", Times, serif;
  text-align: center;
}

  div, h1, h2, p {
    margin: 0;
    padding: 0;
  }

Само стихотворение обернем в блок

1
div
и разместим его по центру окна браузера, для большей красоты:

#poem {
  margin: auto;
  padding: 20px 0;
  text-align: left;
  width: 390px;
}

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

h1, h2 {
    font-weight: normal;
    text-align: center;
  }

Установим размер шрифта для основного заголовка - тега

1
h1
; добавим небольшой
1
margin-bottom
и такой же
1
line-height
(потому что размер шрифта был задан слишком большой; если заголовок окажется достаточно длинным, то между его строками будет большое расстояние):

h1 {
  font-size: 34px;
  line-height: 1.2;
  margin-bottom: 10px;
}

Для заголовка второго уровня

1
h2
с информацией об авторе и дате публикации будет использовать другой, более легкий цвет; меньший размер шрифта; сделаем его курсивным, чтобы он выглядел совсем уж по другому; а также небольшой отступ внизу с помощью
1
margin-bottom
:

h2 {
  color: #666;
  font-size: 18px;
  font-style: italic;
  margin-bottom: 30px;
}

Стихотворение

Для основного текста стихотворения добавим интерлиньяж

1
line-height
достаточно большого размера для того, чтобы расстояние между строками было большое и такой текст было удобно читать. Также для каждого стиха добавим
1
margin-bottom
, чтобы визуально отделить их друг от друга:

p {
  line-height: 1.5;
  margin-bottom: 15px;
}

Волшебные селекторы

А вот теперь начнем развлекаться! Первое - добавим декоративный элемент в начале и в конце информации об авторе. Для этого воспользуемся псевдо-элементами

1
:before
и
1
:after
в сочетании с CSS-свойством
1
content
:

h2:before {
  content: '— ';
}

h2:after {
  content: ' —';
}

Теперь увеличим первую букву стихотворения - так называемая буквица (

1
drop cap
). Для этого воспользуемся смежным селектором (
1
+
) и псевдо-элементом (
1
:first-child
).

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

1
div
).

Мы выделим первую букву каждого параграфа, который следует сразу за заголовком второго уровня

1
h2
, который в нашем примере только один:

#poem h2 + p:first-letter {
  float: left;
  font-size: 38px;
  line-height: 1;
  margin: 2px 5px 0 0;
}

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

1
line-height
уменьшаем, чтобы последующие строки не были сдвинуты вниз; и слегка сместим буквицу внутри текста с помощью
1
margin
.

Выделим первую строку каждого параграфа через

1
small-caps
и сделаем его более удобочитаемым, добавив немного расстояния между каждой строчкой:

#poem p:first-line {
  font-variant: small-caps;
  letter-spacing: 1px;
}

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

1
:last-child
, с помощью которого выделим последнего потомка элемента-родителя:

#poem p:last-child {
  margin-bottom: 30px;
  padding-bottom: 30px;
}

Вот стилизация стихотворения и закончена!

Некоторые заметки о поддержке браузерами

Не стоит ожидать, что весь созданный CSS-код будет одинаково работать во всех основных браузерах. Последние версии Safari, Firefox и Opera поддерживают все представленные здесь селекторы. Но Internet Explorer 8 не поддерживает псевдо-элемент

1
:last-child
; Internet Explorer 7 не поддерживает псевдо-элементы
1
:last-child
,
1
:before
и
1
:after
; Internet Explorer 6 также не поддерживает псевдо-элемент
1
:first-child
, помимо всего прочего.

Заключение

Эта статья является очень общим и кратким руководством, как использовать селекторы CSS3-стандарта для стилизации HTML-элементов без дополнительных классов, идентификаторов или чрезмерно раздутого кода. Селекторы CSS3 не работают в более старых версиях браузеров, таких как Internet Explorer 6, в которых генерируются только основные CSS-свойства (за редким исключением).

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

Примечание переводчика: статья была написано довольно давно - в 2009 году. Что касается поддержки браузерами CSS3-селекторов, то на сегодняшний день изменений не так уже и много. Исключением является факт, что о браузере IE6 можно забыть.

Оригинал статьи - “Styling a Poem with Advanced CSS Selectors”.


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

1
:empty
.

Что такое псевдо-класс :empty

Вот краткое описание, взятое из спецификации W3C:

Псевдо-класс

1
:empty
относится к элементу, у которого нет потомков.

Звучит просто и понятно, не правда ли? Потому что это действительно так - псевдо-класс

1
:empty
применяется к элементам, которые полностью пустые; например, для пустого параграфа:

<p>...</p>

Или же пустые ячейки таблицы:

<table>
  <tr>
    <td></td>
  </tr>
</table>

А вот к такому параграфу псевдо-класс

1
:empty
не применим, так как он не является пустым (внутри этого тега есть пробел, который является равноправным символом по сравнению со всеми остальными):

<p>...</p>

Практическое применение :empty

Хорошо, но каким образом может быть полезен этот селектор?

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

1
:empty
.

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

Разметка будет выглядеть таким образом:

<table>
  <caption>A simple table</caption>
  <tr>
    <th scope="col" rowspan="2">Some headings</th>
    <th scope="col" colspan="4">More headings</th>
  </tr>
  <tr>
    <th scope="col">Great</th>
    <th scope="col">Brilliant</th>
    <th scope="col">Genius</th>
    <th scope="col">Good</th>
  </tr>
  <tr>
    <th scope="row">Interesting totals</th>
    <td>155</td>
    <td>165</td>
    <td>70</td>
    <td>140</td>
  </tr>
  <tr>
    <th scope="row">Curious</th>
    <td>5</td>
    <td>35</td>
    <td>50</td>
    <td>15</td>
  </tr>
  <tr>
    <th scope="row">Awesome</th>
    <td>75</td>
    <td>90</td>
    <td></td>
    <td>5</td>
  </tr>
  <tr>
    <th scope="row">Fabulous</th>
    <td>30</td>
    <td></td>
    <td>20</td>
    <td>80</td>
  </tr>
  <tr>
    <th scope="row">Nice</th>
    <td>45</td>
    <td>40</td>
    <td></td>
    <td>40</td>
  </tr>
</table>

И вот, что я собираюсь добавить в таблицы стилей, для того чтобы отформатировать пустые ячейки таблицы:

tbody td:empty {
  background: #efefef;
}

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

Если вас этот селектор заинтересовал, то скажу, что он поддерживается всеми последними версиями браузеров Firefox, Safari, Chrome и Opera. И возможно, он работает в браузере Internet Explorer 9, наравне с остальными селекторами стандарта CSS3.