Logo Windi CSS

Таблицы

Таблица

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

CSS
Встроенная таблица 
Утилита inline-table не имеет прямого отображения в HTML. Он ведет себя как элемент HTML <table>, но как встроенный блок, а не как блок уровня блока. Внутри поля таблицы находится контекст уровня блока.
CSS
| inline-table | display: inline-table; |
Заголовок таблицы 
Утилита table-caption ведет себя как HTML-элемент <caption>. Элемент HTML <caption> определяет заголовок (или заголовок) таблицы.
CSS
Ячейка таблицы 
Утилита table-cell ведет себя как HTML-элемент <td>. Элемент HTML <td> определяет ячейку таблицы, содержащую данные. Он участвует в настольной модели.
CSS
Строка таблицы 
Утилита table-row ведет себя как HTML-элемент <tr>. Элемент HTML <tr> определяет строку ячеек в таблице. Затем ячейки строки могут быть созданы с использованием комбинации элементов <td> (ячейка данных) и <th> (ячейка заголовка).
CSS
Столбец таблицы 
Утилита table-column ведет себя как HTML-элемент <col>. Элемент HTML <col> определяет столбец в таблице и используется для определения общей семантики для всех общих ячеек. Обычно он находится в элементе <colgroup>.
CSS
Группа строк таблицы 
Утилита table-row-group ведет себя как HTML-элемент <tbody>. Элемент HTML Table Body (<tbody>) инкапсулирует набор строк таблицы (элементы <tr>), указывая, что они составляют тело таблицы (<table>).
CSS
Группа столбцов таблицы 
Утилита table-column-group ведет себя как HTML-элемент <colgroup>. Элемент HTML <colgroup> определяет группу столбцов в таблице.
CSS
Группа заголовков таблицы 
Утилита table-header-group ведет себя как HTML-элемент <thead>. Элемент HTML <thead> определяет набор строк, определяющих заголовок столбцов таблицы.
CSS
Группа нижнего колонтитула таблицы 
Утилита table-footer-group ведет себя как HTML-элемент <tfoot>. Элемент HTML <tfoot> определяет набор строк, суммирующих столбцы таблицы.
CSS
Макет таблицы 
Утилиты для управления алгоритмом раскладки таблицы.
auto
fixed
CSS
Свернуть границу таблицы 
Утилиты для контроля того, должны ли границы таблицы сворачиваться или разделяться.
collapse
separate
CSS
Сторона заголовка таблицы 
Утилита caption помещает содержимое таблицы <caption> на указанную сторону. Значения относятся к режиму записи таблицы.
top
bottom
CSS
Таблица пустых ячеек 
Утилита empty-cells устанавливает, появляются ли границы и фон вокруг ячеек <table>, которые не имеют видимого содержимого. Хорошим вариантом использования пустых ячеек может быть ситуация, когда вы можете не знать, будет ли таблица содержать пустые точки данных или нет, и вы решили их скрыть.
visible
hidden
CSS
Пример табличных утилит 
Используйте указанные выше утилиты для создания элементов, которые ведут себя так же, как соответствующие им элементы таблицы.
Необработанные теги 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>