Сниппеты: Таблица

Таблица (m104) — этот блок состоит из заготовленной таблицы. Мы рекомендуем готовить для него код таблицы отдельно и затем дописывать необходимые классы, вместо того чтобы редактировать имеющиеся стобцы и строки.  

Подготовьте таблицу, например, в Excel, переведите её в код при помощи обработчика (Реформатор), для <table> укажите class="mk104__table", для <th> —  class="mk104__col_120". После этого, замените выделенную часть в коде.

<section class="mk104">

   <section class="mk104__table-mob-container"></section>

   <table class="mk104__table">

     <thead>

       <tr>

         <th class="mk104__col_120">Head/Cell0/

         </th>

         <th class="mk104__col_120">Head/Cell1/

         </th>

         <th class="mk104__col_120">Head/Cell2/

         </th>

         <th class="mk104__col_120">Head/Cell3/

         </th>

         <th class="mk104__col_120">Head/Cell4/

         </th>

       </tr>

     </thead>

     <tbody></tbody>

     <tr>

       <td>/Cell0/

       </td>

       <td>/Cell1/

       </td>

       <td>/Cell2/

       </td>

       <td>/Cell3/

       </td>

       <td>/Cell4/

       </td>

     </tr>

     <tr>

       <td>/Cell0/

       </td>

       <td>/Cell1/

       </td>

       <td>/Cell2/

       </td>

       <td>/Cell3/

       </td>

       <td>/Cell4/

       </td>

     </tr>

     <tr>

       <td>/Cell0/

       </td>

       <td>/Cell1/

       </td>

       <td>/Cell2/

       </td>

       <td>/Cell3/

       </td>

       <td>/Cell4/

       </td>

     </tr>

     <tr>

       <td>/Cell0/

       </td>

       <td>/Cell1/

       </td>

       <td>/Cell2/

       </td>

       <td>/Cell3/

       </td>

       <td>/Cell4/

       </td>

     </tr>

     <tr>

       <td>/Cell0/

       </td>

       <td>/Cell1/

       </td>

       <td>/Cell2/

       </td>

       <td>/Cell3/

       </td>

       <td>/Cell4/

       </td>

     </tr>

     <tfoot>

       <tr>

         <td>Foot/Cell0/

         </td>

         <td>Foot/Cell1/

         </td>

         <td>Foot/Cell2/

         </td>

         <td>Foot/Cell3/

         </td>

         <td>Foot/Cell4/

         </td>

       </tr>

     </tfoot>

   </table>

</section>

Сниппет на сайте

Элементы выделенные зелёным можно заменить собственным контентом.