Bootstrap Table

HTML

<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<div>
  <table id="tableau" data-sort-stable=true class="table table-striped">
    <thead>
      <tr>
        <th data-field="ext" data-sortable="true">Type</th>
        <th data-field="nbfichiers" data-sortable="true" data-align="center">Total</th>
        <th data-field="nb2017" data-formatter="BadgeFormatter" data-sortable="true" data-align="center">2017-2018</th>
        <th data-field="l_ext" data-formatter="ItemBadgeFormatter" data-sortable="true" data-align="center">Liste extensions</th>
      </tr>
    </thead>
  </table>
</div>

CSS

html, body {
                  background-color: #F4EFEA !important;
              }
              
          .badge-info {
              background-color: orange;
              }
          .badge-ext {
              background-color: DarkCyan;
              }

JavaScript

function BadgeFormatter(value, row, index) {
		return '<span class="badge badge-info">' + value + '</span>';
}

function ItemBadgeFormatter(value, row, index) {
  return '<span class="badge badge-ext">' + value.join('</span><span class="badge badge-ext">') + '</span>';
}

var datajson = [{"ext":"Vecteur","itype":"map-marker","nbfichiers":44659,"nb2017":2171, "l_ext":["SHP","KML","GEOJSON"]},{"ext":"Raster","itype":"image","nbfichiers":121036,"nb2017":3055, "l_ext":["JPG","TIF","BMP"]},{"ext":"Bases de donn\u00e9es","itype":"database","nbfichiers":101,"nb2017":16, "l_ext":["MDB","ACCDB","SQLITE"]},{"ext":"Tableurs","itype":"table","nbfichiers":70196,"nb2017":1421, "l_ext":["XLS","XLSX","CSV","ODT"]},{"ext":"Autres fichiers","itype":"file","nbfichiers":268807,"nb2017":40283, "l_ext":["..."]}];

var $table = $('#tableau');

$(function () {
    $('#tableau').bootstrapTable({
        data: datajson
    });
});

// Essais indépendants du tableau :

let liste = ["KML", "SHP", "MDB", "TXT", "GEOJSON", "DBF"];
 
document.body.append(...liste.map((item) => {
  let spanObj = document.createElement("span");
  spanObj.className = "badge";
  spanObj.append(item);
  return spanObj;
}));