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

У таблицы в примере следующая разметка, код HTML5 сжат для экономии места:

<table>
        <caption>2007 Greenhouse gas contributions, per country (megatonnes)</caption>
        <thead>
                <tr>
                        <td>&nbsp;
                        <th scope="col">USA
                        <th scope="col">China
                        <th scope="col">India
                        <th scope="col">Canada
                        <th scope="col">Brazil
        </thead>
        <tbody>
                <tr>
                        <th scope="row">CO<sub>2</sub>
                        <td>29,529.1
                        <td>6,702.6
                        <td>1410.4
                        <td>583.9
                        <td>373.7
                <tr>
                        <th scope="row">Methane
                        <td>521
                        <td>853.3
                        <td>547.7
                        <td>102
                        <td>389.1
        </tbody>
</table>

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

Цифры пропорциональных и моноширинных шрифтов

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

Цифры пропорционального шрифта не выравниваются по вертикали

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

Использование правильно встроенного шрифта формата OpenType на веб-странице дает возможность переключаться между пропорциональными и моноширинными цифрами с помощью CSS для увеличения четкости в зависимости от контекста данных:

font-feature-settings: 'pnum'; /* пропорциональные цифры */
font-feature-settings: 'tnum'; /* моноширинные цифры */

Для этих свойств могут быть нужны приставки производителей для кода CSS, чтобы они работали и в старых версиях браузеров, поддерживающих шрифты формата OpenType, начиная с браузеров Firefox от версии 3.6, Internet Explorer от версии 10 и Chrome от версии 20.

В некоторых шрифтах, таких как Calluna, созданная Jos Buivenga, цифры по умолчанию старостильные, минускульные: некоторые из них располагаются ниже, а другие — выше базовой линии шрифта, как 7 и 9 на изображении выше. А в других шрифтах, маюскульных, все цифры располагаются на базовой линии и имеют равную с прописными буквами высоту. И опять же с помощью кода CSS можно выбрать нужный вид цифр из этих двух:

font-feature-settings: 'onum'; /* минускульные цифры */
font-feature-settings: 'inum'; /* маюскульные цифры */

Результат

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

@font-face {
        font-family: Calluna;
        src: url('CallunaSansRegular.otf'),
        url('calluna.woff') format('woff');
}
table {
        font-size: 1.6rem;
        border-collapse: collapse;
}
table {
        font-family: Calluna, Arial, sans-serif;
}
table td {
        text-align: right;
        padding: .5rem;
        width: 5rem;
}
table thead th {
        border-bottom: 1px solid #777;
        font-weight: 400;
}
table tbody th {
        font-weight: 400;
        text-align: right;
        padding-right: 1rem;
}
table caption {
        font-feature-settings:"smcp";
}
table tbody td {
        font-feature-settings: "tnum";
}

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание улучшенных адаптивных галерей изображений с использованием Flexbox
• Выпадающее меню с использованием только CSS и недокументированных возможностей элемента флажка
• Создание всплывающих подсказок с использованием CSS