<template>

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

Содержимое <template> — это шаблон для фрагмента HTML, который может быть клонирован и вставлен в документ через скрипты. Обычно применяется для элементов с повторяющейся структурой, вроде списков, таблиц, списков <select> и др

Внутри <template> располагаются пустые элементы, образующие требуемый шаблон. Повторение этих элементов и их заполнение содержимым берут на себя скрипты.

Закрывающийся тег:

Обязателен

Поддержка:

HTML5

Атрибуты:

Для этого элемента доступны универсальные атрибуты и события.

Пример:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>template</title>  
  <style>
   table 
   {  
    width = 100%;
    border-collapse: collapse;
   }
   td, th 
   {
    padding: 5px;
    border: 2px solid #89ace0;
   } 
  </style>
 </head>
 <body>
  <table>
   <thead>
    <tr>
     <th > ЛР№ </th>
     <th> название лабораторной работы</th>
    </tr>
   </thead>
   <tbody>
 
    <template id="row">
     <tr><td align="center"><td>
    </template>
 
   </tbody>
  </table>
  <script>
   var arr = [
    { num: 1, name: 'Основы языка PHP'},
    { num: 2, name: 'Работа с массивами'},
    { num: 3, name: 'Передача параметров'},
    { num: 4, name: 'Работа с файлами'},
    { num: 5, name: 'Графика'},
    { num: 6, name: 'Регулярные выражения'},
    { num: 7, name: 'Работа с базой данных'},
    { num: 8, name: 'Работа с Cookies и Session'},
    { num: 9, name: 'Выполнение JavaScript в браузере клиента'},
    { num: 10, name: 'Использование популярных JavaScript Библиотек'}
   ];
 
   var template = document.querySelector('#row');
 
   for (var i = 0; i < arr.length; i++) {
    var data = arr[i];
 
    var clone = template.content.cloneNode(true);	
    var cells = clone.querySelectorAll('td');
 
    cells[0].textContent = data.num;
    cells[1].textContent = data.name;
 
    template.parentNode.appendChild(clone);
   }
  </script>
 </body>
</html>