Добавил ефиду

package.json

@@ -38,7 +38,8 @@
       "dropdown": [],
       "menu": [],
       "label": [],
-      "loader": []
+      "loader": [],
+      "table": []
     },
     "addCssBefore": [
       "./src/scss/variables.scss",

src/blocks-demo.html

@@ -1211,6 +1211,116 @@
 
     </section>
 
+    <section class="blocks-library__item" id="table" data-name=".table">
+
+      <h2 class="blocks-library__item-title">Таблицы</h2>
+
+      <table class="table">
+        <caption>Таблица как БЭМ-блок, нет прописанных thead, tbody, tfoot</caption>
+        <tbody>
+          <tr>
+            <th>Имя</th>
+            <th>Фамилия</th>
+            <th>Мыло</th>
+            <th>Статус</th>
+            <th>Политическая ориентация</th>
+          </tr>
+          <tr>
+            <td>Иннокентий</td>
+            <td>Барлаухенштицкен-Ламанческий</td>
+            <td>Хозяйственное</td>
+            <td>Администратор</td>
+            <td>«ВСЕГДА!»</td>
+          </tr>
+          <tr>
+            <td>Васисуалий</td>
+            <td>Пылепневмомешковыколачивателев</td>
+            <td>Душистое</td>
+            <td>Юзверь</td>
+            <td>Нижняя</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <table class="table">
+        <caption>Таблица как БЭМ-блок, есть thead, tbody, tfoot и у них есть классы</caption>
+        <thead class="table__header">
+          <tr>
+            <th>Имя</th>
+            <th>Фамилия</th>
+            <th>Мыло</th>
+            <th>Статус</th>
+            <th>Политическая ориентация</th>
+          </tr>
+        </thead>
+        <tbody class="table__body">
+          <tr>
+            <td>Иннокентий</td>
+            <td>Барлаухенштицкен-Ламанческий</td>
+            <td>Хозяйственное</td>
+            <td>Администратор</td>
+            <td>«ВСЕГДА!»</td>
+          </tr>
+          <tr>
+            <td>Васисуалий</td>
+            <td>Пылепневмомешковыколачивателев</td>
+            <td>Душистое</td>
+            <td>Юзверь</td>
+            <td>Нижняя</td>
+          </tr>
+          <tr>
+            <td>Ктулху</td>
+            <td>Втанк</td>
+            <td>ktulkhu@ad.ru</td>
+            <td>Патриарх</td>
+            <td>Яизм</td>
+          </tr>
+        </tbody>
+        <tfoot class="table__footer">
+          <tr>
+            <td colspan="5">Итого: 18 попугаев, 15 длинных червяков, надувная женщина и украденный из церкви огарок дешевой свечи.</td>
+          </tr>
+        </tfoot>
+      </table>
+
+      <div class="blocks-library__code-wrapper">
+        <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
+        <div class="blocks-library__code">
+          <pre class="code">
+            <code>&lt;table class="table"></code>
+            <code>  &lt;caption>Таблица&lt;/caption></code>
+            <code>  &lt;thead class="table__header"></code>
+            <code>    &lt;tr></code>
+            <code>      &lt;th>Имя&lt;/th></code>
+            <code>      &lt;th>Фамилия&lt;/th></code>
+            <code>    &lt;/tr></code>
+            <code>  &lt;/thead></code>
+            <code>  &lt;tbody class="table__body"></code>
+            <code>    &lt;tr></code>
+            <code>      &lt;td>Иннокентий&lt;/td></code>
+            <code>      &lt;td>Барлаухенштицкен-Ламанческий&lt;/td></code>
+            <code>    &lt;/tr></code>
+            <code>    &lt;tr></code>
+            <code>      &lt;td>Васисуалий&lt;/td></code>
+            <code>      &lt;td>Пылепневмомешковыколачивателев&lt;/td></code>
+            <code>    &lt;/tr></code>
+            <code>    &lt;tr></code>
+            <code>      &lt;td>Ктулху&lt;/td></code>
+            <code>      &lt;td>Втанк&lt;/td></code>
+            <code>    &lt;/tr></code>
+            <code>  &lt;/tbody></code>
+            <code>  &lt;tfoot class="table__footer"></code>
+            <code>    &lt;tr></code>
+            <code>      &lt;td colspan="2">Итого:&lt;/td></code>
+            <code>    &lt;/tr></code>
+            <code>  &lt;/tfoot></code>
+            <code>&lt;/table></code>
+          </pre>
+        </div>
+      </div>
+
+    </section>
+
   </div>
 
   <style>

src/blocks/loader/loader.scss

@@ -8,8 +8,8 @@
   &:before {
     content: '';
     display: block;
-    width: 1.2em;
-    height: 1.2em;
+    width: 1em;
+    height: 1em;
     border: 3px solid $gray-lightest;
     border-top: 3px solid $gray-lighter;
     border-radius: 50%;

src/blocks/table-responsive/table-responsive--horizontal.less

-// Для импорта в диспетчер подключений: @import './src/blocks/table-responsive/table-responsive--horizontal.less';
-
-@import '../../less/variables.less';     // только для удобства обращения к переменным
-
-
-//------------------------------------------------------------------------------
-//  Адаптивные таблицы (требуют наличия атрибутов data-label на тегах td)
-//------------------------------------------------------------------------------
-
-.table-responsive {
-
-  &--horizontal {
-
-    @media (max-width: (@screen-md - 1)) {
-
-      tbody {
-
-        td {
-          display: block;
-          width: 100%;
-          padding-left: 19rem;
-
-          &:before {
-            width: 18rem;
-            min-width: 18rem;
-            padding-right: 1rem;
-            float: left;
-            margin-left: -19rem + 0.6rem;
-          }
-
-          &:after {
-            content: '';
-            display: table;
-            clear: both;
-          }
-        }
-      }
-    }
-  }
-}

src/blocks/table/table--hover.less

-// Для импорта в диспетчер подключений: @import './src/blocks/table/table--hover.less';
-
-@import '../../less/variables.less';     // только для удобства обращения к переменным
-
-
-.table {
-
-  &--hover {
-
-    tbody {
-
-      tr:hover {
-        background-color: @gray-lightest;
-      }
-    }
-  }
-}

src/blocks/table/table--not-greed.less

-// Для импорта в диспетчер подключений: @import './src/blocks/table/table--not-greed.less';
-
-@import '../../less/variables.less';     // только для удобства обращения к переменным
-
-
-.table {
-
-  &--not-greed {
-    width: auto;
-  }
-}

src/blocks/table/table--striped.less

-// Для импорта в диспетчер подключений: @import './src/blocks/table/table--striped.less';
-
-@import '../../less/variables.less';     // только для удобства обращения к переменным
-
-
-.table {
-
-  &--striped {
-
-    tbody {
-
-      tr:nth-child(2n) {
-        background-color: @gray-lightest;
-      }
-    }
-  }
-}

src/blocks/table/table.html

 <!--DEV
 
-Нужно убрать пробел между @-ами:
-
-@ @include('blocks/table/table.html')
+<table class="table">
+  <caption>Таблица</caption>
+  <thead class="table__header">
+    <tr>
+      <th>Имя</th>
+      <th>Фамилия</th>
+    </tr>
+  </thead>
+  <tbody class="table__body">
+    <tr>
+      <td>Иннокентий</td>
+      <td>Барлаухенштицкен-Ламанческий</td>
+    </tr>
+    <tr>
+      <td>Васисуалий</td>
+      <td>Пылепневмомешковыколачивателев</td>
+    </tr>
+    <tr>
+      <td>Ктулху</td>
+      <td>Втанк</td>
+    </tr>
+  </tbody>
+  <tfoot class="table__footer">
+    <tr>
+      <td colspan="2">Итого:</td>
+    </tr>
+  </tfoot>
+</table>
 
 -->
-<div class="table">content</div>

src/blocks/table/table.less → src/blocks/table/table.scss

-// Для импорта в диспетчер подключений: @import './src/blocks/table/table.less';
-
-@import '../../less/variables.less';     // только для удобства обращения к переменным
-
+// В этом файле должны быть стили только для БЭМ-блока table, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
+// Не пишите здесь другие селекторы.
 
 .table {
   border-collapse: collapse;
   width: 100%;
-  border: 1px solid @border-color;
+  border: 1px solid $border-color;
+  margin: $line-height 0;
 
   caption {
-    padding: round(0.6em * (100 / @font-size--small-percent), 2);
+    padding-top: 0.4em;
     text-align: right;
     caption-side: bottom;
-    font-size: @font-size--small-percent;
+    font-size: $font-size--small;
     line-height: 1em;
-    color: @text-color--muted;
+    color: $text-color--muted;
   }
 
   td,
   th {
+    padding: $field-padding-vertical $field-padding-horizontal;
     vertical-align: top;
-    border-bottom: 1px solid @border-color;
+    border-bottom: 1px solid $border-color;
 
     &:not(:first-child) {
-      border-left: 1px solid @border-color;
+      border-left: 1px solid $border-color;
     }
   }
 
   th {
     text-align: left;
-    padding: 0.6em;
-  }
-
-  td {
-    padding: 0.6em;
   }
 
   &__header {
-    background-color: @gray-lightest;
+    background-color: $gray-lightest;
   }
 
   &__body {}
 
   &__footer {
-    background-color: @gray-lightest;
-    color: @gray;
+    background-color: $gray-lightest;
   }
 }

src/blocks/typo/typo.scss

@@ -112,8 +112,7 @@ dl,
 blockquote,
 pre,
 address,
-figure,
-table {
+figure {
   margin-top: ($line-height / 2);
   margin-bottom: ($line-height / 2);
 }