Logo Windi CSS

Таблицы

Таблица

Утилита table ведет себя как элемент HTML <table>. Он определяет блок уровня блока. Элемент таблицы представляет собой табличные данные, то есть информацию, представленную в двумерной таблице, состоящей из строк и столбцов ячеек, содержащих данные.

CSS
.table {
  display: table;
}

Встроенная таблица

Утилита inline-table не имеет прямого отображения в HTML. Он ведет себя как элемент HTML <table>, но как встроенный блок, а не как блок уровня блока. Внутри поля таблицы находится контекст уровня блока.

CSS
.inline-table {
  display: inline-table;
}

| inline-table | display: inline-table; |

Заголовок таблицы

Утилита table-caption ведет себя как HTML-элемент <caption>. Элемент HTML <caption> определяет заголовок (или заголовок) таблицы.

CSS
.table-caption {
  display: table-caption;
}

Ячейка таблицы

Утилита table-cell ведет себя как HTML-элемент <td>. Элемент HTML <td> определяет ячейку таблицы, содержащую данные. Он участвует в настольной модели.

CSS
.table-cell {
  display: table-cell;
}

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

Утилита table-row ведет себя как HTML-элемент <tr>. Элемент HTML <tr> определяет строку ячеек в таблице. Затем ячейки строки могут быть созданы с использованием комбинации элементов <td> (ячейка данных) и <th> (ячейка заголовка).

CSS
.table-row {
  display: table-row;
}

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

Утилита table-column ведет себя как HTML-элемент <col>. Элемент HTML <col> определяет столбец в таблице и используется для определения общей семантики для всех общих ячеек. Обычно он находится в элементе <colgroup>.

CSS
.table-column {
  display: table-column;
}

Группа строк таблицы

Утилита table-row-group ведет себя как HTML-элемент <tbody>. Элемент HTML Table Body (<tbody>) инкапсулирует набор строк таблицы (элементы <tr>), указывая, что они составляют тело таблицы (<table>).

CSS
.table-row-group {
  display: table-row-group;
}

Группа столбцов таблицы

Утилита table-column-group ведет себя как HTML-элемент <colgroup>. Элемент HTML <colgroup> определяет группу столбцов в таблице.

CSS
.table-column-group {
  display: table-column-group;
}

Группа заголовков таблицы

Утилита table-header-group ведет себя как HTML-элемент <thead>. Элемент HTML <thead> определяет набор строк, определяющих заголовок столбцов таблицы.

CSS
.table-header-group {
  display: table-header-group;
}

Группа нижнего колонтитула таблицы

Утилита table-footer-group ведет себя как HTML-элемент <tfoot>. Элемент HTML <tfoot> определяет набор строк, суммирующих столбцы таблицы.

CSS
.table-footer-group {
  display: table-footer-group;
}

Макет таблицы

Утилиты для управления алгоритмом раскладки таблицы.

auto
fixed
CSS
.table-auto {
  table-layout: auto;
}

Свернуть границу таблицы

Утилиты для контроля того, должны ли границы таблицы сворачиваться или разделяться.

collapse
separate
CSS
.border-collapse {
  border-collapse: collapse;
}

Сторона заголовка таблицы

Утилита caption помещает содержимое таблицы <caption> на указанную сторону. Значения относятся к режиму записи таблицы.

top
bottom
CSS
.caption-top {
  caption-side: top;
}

Таблица пустых ячеек

Утилита empty-cells устанавливает, появляются ли границы и фон вокруг ячеек <table>, которые не имеют видимого содержимого. Хорошим вариантом использования пустых ячеек может быть ситуация, когда вы можете не знать, будет ли таблица содержать пустые точки данных или нет, и вы решили их скрыть.

visible
hidden
CSS
.empty-cells-visible {
  empty-cells: show;
}

Пример табличных утилит

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

Необработанные теги HTML 

<table>
    <caption>Бюджет совета</caption>
    <thead>
        <tr>
            <th>Элементы</th>
            <th scope="col">Расходы</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Пончики</th>
            <td>3,000</td>
        </tr>
        <tr>
            <th scope="row">Канц. товары</th>
            <td>18,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">Итого</th>
            <td>21,000</td>
        </tr>
    </tfoot>
</table>

С утилитами Windi 

<div class="table">
    <div class="table-caption">Бюджет совета</div>
    <div class="table-header-group">
        <div class="table-row">
            <div class="table-cell">Элементы</div>
            <div class="table-cell">Расходы</div>
        </div>
    </div>
    <div class="table-row-group">
        <div class="table-row">
            <div class="table-cell">Пончики</div>
            <div class="table-cell">3,000</div>
        </div>
        <div class="table-row">
            <div class="table-cell">Канц. товары</div>
            <div class="table-cell">18,000</div>
        </div>
    </div>
    <div class="table-footer-group">
        <div class="table-row">
            <div class="table-cell">Итого</div>
            <div class="table-cell">21,000</div>
        </div>
    </div>
</div>