用html和javascript实现自定义表的头?

var data = {
"managment":
    {
            "Notice":{
            "Red color" :{"delete":true,"enable":true,"view":true} ,
            "Yellow color":{"delete":true,"enable":true,"view":true},
            "Specail color":{"delete":true,"enable":true,"view":true},
            },
            "Black Notice":{"delete":true,"enable":true,"view":true},
    },
"Faculty":
    {
        "salary":{"delete":true,"enable":true,"view":true},
       
    },
};

var zoneHtml = '';


     
      for (var zoneKey in data) {
        zoneHtml += '<div class="zone" style="border-bottom:1px solid #696768">';
        zoneHtml += ('<div class="row"><div class="col-sm-3" style="font-size:21px;">' + zoneKey + '</div><div class="col-sm-6">PORTAL</div></div>');
        var jsonData = data[zoneKey];
        for (var listUI in jsonData) {
          zoneHtml += '<div class="jsonData">';
          zoneHtml += ('<h2>' + listUI + '</h2>');
          var ports = jsonData[listUI];
          zoneHtml += '<ul class="port">';
          for (var port in ports) {
            if (typeof ports[port] === 'object') {
           
              zoneHtml += '<div class="row">'
              zoneHtml += '<div class="col-sm-12">' + port + ':';
              for (var i in ports[port]) {
                zoneHtml += '<li class="checkBoxProp"><input type="checkbox" id="' + i + '" ' + (ports[port][i] ? " checked " : "") + '      ></li>';

              }
              zoneHtml += '</div></div>';
            } else {
              zoneHtml += '<li class="checkBoxProp"><input type="checkbox" id="' + i + '" ' + (ports[port] ? " checked " : "") + '      ></li>';
            }

          }
          zoneHtml += '</ul>';
        
          zoneHtml += '</div>';
        }
        zoneHtml += ('</div>');
      }

      $("#zone").html(zoneHtml);

  .jsonData{
    margin-left:5%;
  }
  li
{ 
display:inline; 
}  
.checkBoxProp{
  margin-left:4%;
  font-size:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="zone"></div>